2000币求css或者div代码

leescott

https://www.kangxizidian.cn/kangxi/19486.html
4 m7 a) k2 S% Y我想做成字典。
$ \  x0 A$ c) f2 w8 F0 l* x就是原始样式，不能显示，不知道问题。主要是那三条彩色。
$ P( a5 S# q: B" P1 k$ R; Z0 R所以，求一个css。谢谢！
/ n$ T( Q2 T$ a$ V3 E

1. .fz{
   ( _5 b4 n' g/ w
2. font-size:0;
   $ S% r  Q6 M) i5 v1 ?* E
3. }
   
4. .fz li:first-child{
   
5. margin-right:20px;
   , t( l/ B6 N  E% |! c. {
6. }
   
7. .fz li{
   . \  Q2 @5 _, o  |7 ], T  |
8. display:inline-block;
   8 |: `5 R0 {5 ?5 x; o
9. width:48%;
   
10. font-size:14px;
    
11. color:#999;
    
12. margin-bottom:10px;
    % h5 j3 Q4 L4 F
13. }
    $ a1 X" R+ D* w
14. .fz li > div{
    0 z$ ~2 R/ Z& u  w5 v4 J
15. display:flex;
    % Q! q% `* A& \+ ?. o  w$ f
16. justify-content:space-between;
    . m$ P3 M; ?, S, |
17. }
    + w6 G# p0 h  T* k! z
18. .fz li:first-child em{
    3 `: e  y6 M9 [. Z1 E, S
19. color:#95a5e9;
    ' X0 C. x* r0 U2 z
20. }
    & P3 ^6 \9 H0 D& n
21. .fz li em{
    
22. font-style:initial;
    
23. }
    
24. .fz .sz{
    
25. background:#efefef;
    7 \$ |6 S7 {: C* d( j0 s% l$ A1 s
26. height:10px;
    * Q) P8 }: O5 k4 c6 K8 [2 L8 u# C1 m
27. border-radius:5px;
    . O( d$ m6 Z) k5 k) t7 D2 _1 X
28. margin-top:5px;
    ) R) U( D% {) F9 t+ Q! a+ `
29. }
    # ]& a: w0 {( S8 i+ u% J
30. .fz .sz.bgBlue{
    % [  y- P0 Z+ c( z4 D" w
31. background:#95a5e9;
    $ Z- C1 r( f# M+ E5 S$ ~  c
32. }
    
33. .fz .sz.bgRed{
    2 F* F7 q% @7 o" f' b
34. background:#e995a1;
    
35. }
    
36. .fz .sz.bgYel{
    1 x  x& o6 B- q8 w- e
37. background:#ebd28d;
    % I* X% z- N; t" ?5 A. S! H
38. }
    
39. .fz .sz .sz{
    
40. margin-top:0;
    + @6 j9 D8 z& W: }. e' m& U
41. }
    
42. .fz li p{
    2 e; I- t, d; u) y
43. font-size:14px;
    
44. color:#ccc;
    & z( `1 O7 U6 j1 r7 z1 M
45. display:flex;
    
46. }
    
47. .nameDetail p{
    
48. line-height:26px;
    
49. text-align:justify;
    
50. font-size:16px;
    , G/ b$ d& I2 ^/ ?# a
51. }
    8 h/ ]: o# a* c
52. .fz li p span{
    ) l( T9 Z7 k3 E* j* u  ]
53. flex:1;
    8 Z- m% ^% U% c2 q
54. }

复制代码

  N# C/ R+ x0 E7 Z3 Y0 I. N1 f! b

jeanleem6

我想应该是你的 html 代码少了宽度的问题，这个宽度应该是根据后端返回的数据动态添加的，见图片。
6 f& b4 l7 }# K) `9 K. [( ?" D如果不是这个原因，请贴出你的 html 代码

leescott

加了固定宽度，还是不行。
新的css是这样的：
* L; ]. ~* {: Y1 |9 O

1. .progress {
   6 d% \; q3 n8 T; c
2.   width: 100%;
   
3.   height: 6px;
   4 C  ]1 |8 K: |7 [1 K1 e( `
4.   border-radius: 3px;
   $ Z# ~0 E0 G8 ^1 b) B. k* J
5.   background: #F1F5FD;
   5 z, f4 ~! B% a! D$ @
6. }
   
7. .progress.progress-bar {
   
8.   height: 100%;
   
9.   border-radius: 3px;
   
10. }
    
11. .progress.blProgress {
    
12.   background-color: #0072FF;
    & l* B" g6 }# o5 K
13. }
    
14. .progress.reProgress {
    
15.   background-color: #F75A03;
    
16. }
    ' v' }6 f2 ?3 k& J' d) ~
17. .progress.yeProgress {
    * q, f1 ]/ l8 ?9 X+ v( \
18.   background-color: #FFFF00;
    % V( z* X! J; H) {8 u
19. }
    
20. .progress#yeProgress {
    
21.   background-color: #FFFF00;
    
22. }
    % d0 Q* o8 q- k8 y$ A) y

复制代码

但是，网页这样，总是不能显示蓝色以外的颜色，显示本身的样式还是接受的。

1. <progress class="blProgress" value="50" max="100"> 50%</progress><br>

复制代码

jeanleem6

HTML:
) k$ _' O1 h, {  u* ~+ C( \
& O& Q2 [( V6 Y

1. <progress class="blProgress blue" value="92" max="100">92%</progress>
   
2.       <progress class="blProgress red" value="93" max="100">93%</progress>
   
3.       <progress class="blProgress yellow" value="50" max="100">50%</progress>

复制代码

CSS:

1. progress {
   
2.         -webkit-appearance: none;
   
3.       }
   
4.       ::-webkit-progress-bar {
   
5.         height: 12px;
   1 M+ a9 z) L) K  X$ h; G) @
6.         border-radius: 6px;
   - ~0 Q* x6 T6 s* O+ s
7.         background-color: #f0f0f0;
   
8.       }
   . \4 x8 C. C9 X# f
9.       ::-webkit-progress-value {
   , m+ d: D- q( \0 k' j7 M
10.         border-radius: 6px;
    
11.       }
    
12. 
    
13.       .blue::-webkit-progress-value {
    ) B- V$ C% {+ A% p$ l; u
14.         background-color: #95a5e9;
    
15.       }
    
16.       .red::-webkit-progress-value {
    
17.         background-color: #e995a1;
    % N: G5 @1 O: f( U
18.       }
    
19.       .yellow::-webkit-progress-value {
    
20.         background-color: #ebd28d;
    
21.       }

复制代码

注意：::-webkit-progress-bar、::-webkit-progress-value 这两个 css 伪元素并不在 CSS 标准中
浏览器也存在不兼容（也就是说有的浏览器不支持它们，比如 Firefox 对这两个伪元素都不支持，其它浏览器版本过低也不支持）



5 V1 l. N8 W4 H: e
: C, Q( O1 U& h# Z1 G8 r7 Z( P以下是兼容各种浏览器的写法，不过需要修改你现有的 html 标签：
* E# e+ ?8 d* B: ?! z
8 w' }8 \0 z! h' QHTML:
; }4 V" L/ O; w- u' F& j
1 D0 V1 ~$ w6 O" M

1. <div class="progress">
   ) a# l5 L6 H  B/ A" F- x
2.         <span class="value blue" style="width: 92%"></span>
   ! V* _  y9 }& |# r7 ?4 R4 f- F3 |
3.       </div>
   
4.       <div class="progress">
   $ e* w+ g1 @& P9 _& C0 n) ~
5.         <span class="value red" style="width: 93%"></span>
   
6.       </div>
   
7.       <div class="progress">
   
8.         <span class="value yellow" style="width: 50%"></span>
   ' X% M' T! a5 o( d& s. V
9.       </div>

复制代码

6 k% n& x  [8 a" i3 v
0 F& T  m* g; `4 wCSS:

1. .progress {
   ' ]) L; {7 T6 D9 U
2.         height: 12px;
   : |6 d8 K, L/ X- m: I) T# H
3.         margin: 1em 0;
   
4.         border-radius: 6px;
   
5.         background-color: #f0f0f0;
   
6.         text-align: left;
   ( U# M" Y. M0 d: v7 F
7.       }
   5 y) _8 ~. F8 s. h$ Z, a
8.       .progress .value {
   
9.         display: inline-block;
   
10.         height: 12px;
    ; E6 q. W: j$ p8 I+ o' ?( X6 c5 T
11.         border-radius: 6px;
    9 C# I- }# f% E# }& T
12.         vertical-align: top;
    / l5 ~: Q) l/ t- d, H4 i! E
13.       }
    
14.       .progress .blue {
    2 C& h1 N+ l" W
15.         background-color: #95a5e9;
    & X. X; _3 u3 h; o" {& {4 S
16.       }
    
17.       .progress .red {
    3 v, J8 j+ C' f. [3 p+ U8 w
18.         background-color: #e995a1;
    
19.       }
      U0 ]+ K  S) K* ?* a
20.       .progress .yellow {
    
21.         background-color: #ebd28d;
    
22.       }

复制代码

/ ]$ W9 B. E4 b% F# t
5 {0 @/ w! l' z# V附上两种实现方式的 HTML 文档（解压后用浏览器打开可查看效果）
5 l' N/ [) F$ o, G0 u3 F+ E5 H

Bartleby

看看，楼主源数据都爬取了吗？

leescott

jeanleem6 发表于 2024-8-6 10:12
5 Y9 D( }6 T) cHTML:

, `' e' v- G& j5 q谢谢帮助！
第一、在手机深蓝词典，<progress都显示，但是，蓝色。可能与词典支持有关？
第二、在另一个文件，老代码曾经显示。不知道为什么，增加词条，就不显示。显示的是“悉昙”那个的最后。
最后，我是想用于姓氏字典。也许复制一个词条去示例文件，比较好。
4 R( m: ^7 K; ^  C/ p6 A: u" d! ]6 ]$ E
, r6 M7 d( Q; a5 r$ @  Z链接：https://pan.baidu.com/s/1565YWSEAv2CkThJfDYiauQ?pwd=uome
提取码：uome
6 w- k( f5 v0 o7 d3 ]5 G& H

jeanleem6

首先，你 mdx 中词条引用的 css 文件名(示例.css)和你 mdd 中打包的 css 文件名(process示例.css)不一致
' s4 r" g7 i- }; A6 V* B第二，你打包的 css 文件(process示例.css)中的样式表和你词条中的结构完全对应不上
0 ]! e8 ~- ~/ G
# W7 z( ?( I* B+ U建议你先学 html 和 css 基础吧

leescott

jeanleem6 发表于 2024-8-7 14:30
首先，你 mdx 中词条引用的 css 文件名(示例.css)和你 mdd 中打包的 css 文件名(process示例.css)不一致
/ Q' ^- I" ~/ \; Q% }第 ...

最后的文件是按照你的第一个方法，好像子元素需要适当改一下？第二个办法也实验了。
9 W: v6 A2 H6 g8 y第二、确实不懂，代码抄了不少，也看得到蓝条，总数与</progress>的数量一致。
, r+ U" A$ U# {+ p1 l6 F" j- G文件夹有别的css，不应该影响吧。
谢谢！