2000币求css或者div代码

leescott

https://www.kangxizidian.cn/kangxi/19486.html
我想做成字典。
就是原始样式，不能显示，不知道问题。主要是那三条彩色。
所以，求一个css。谢谢！
' h( ]& _3 ?- }- Q( a9 W" N

1. .fz{
   
2. font-size:0;
   ) `' T% z( }" E+ `( `, W
3. }
   
4. .fz li:first-child{
   
5. margin-right:20px;
   ' i& ]' z( Z1 K" W" H
6. }
   ( u! \" `' K7 c& ?$ ~( a0 N
7. .fz li{
   
8. display:inline-block;
   + e+ U! S. Y- E5 r5 f
9. width:48%;
   $ T4 x& F4 H1 V
10. font-size:14px;
    $ z* z" R" d; \0 ~3 `5 ]# F! y) [) l
11. color:#999;
    
12. margin-bottom:10px;
    8 V9 c* B* T( A5 N/ V* Q
13. }
    3 X5 w/ S+ w8 A% u. e- t9 [
14. .fz li > div{
    
15. display:flex;
    , C9 p. q) ]1 T$ }) C+ k. ~1 g
16. justify-content:space-between;
    
17. }
    ! v& z) W: ~! ^" u
18. .fz li:first-child em{
    : X' X* M  A+ g
19. color:#95a5e9;
    * G* c$ U( K  d+ {6 R; y$ c; D1 j- O( f
20. }
    
21. .fz li em{
    
22. font-style:initial;
    + o- `+ U4 j! v8 d
23. }
    
24. .fz .sz{
    
25. background:#efefef;
    
26. height:10px;
    
27. border-radius:5px;
    ' s8 F6 \# a, L; K. g# T
28. margin-top:5px;
    4 A$ K. N% d; _! t6 T
29. }
    8 g8 U: b% s4 j0 {1 _( W0 Y
30. .fz .sz.bgBlue{
    
31. background:#95a5e9;
    
32. }
    
33. .fz .sz.bgRed{
    . y5 b2 b  W/ i$ Y- Q
34. background:#e995a1;
    
35. }
    5 M  O0 w- M$ e6 B: b( F" M
36. .fz .sz.bgYel{
    + \3 q$ Y( J1 R$ S+ m
37. background:#ebd28d;
    
38. }
    . j2 d8 m: Z! T$ L1 m
39. .fz .sz .sz{
    , I& K, m; h# w: u! \
40. margin-top:0;
    + s2 j) ]$ S/ g+ Y' d' S- C$ M! [
41. }
    
42. .fz li p{
    . \6 {  J2 A6 i* f
43. font-size:14px;
    ( |* w/ w4 O' ^2 t  k
44. color:#ccc;
    
45. display:flex;
    
46. }
    # L, P! o+ y) H( q5 i- ~+ T
47. .nameDetail p{
    
48. line-height:26px;
    
49. text-align:justify;
    
50. font-size:16px;
    & g( S. d5 V2 G' ^
51. }
    
52. .fz li p span{
    : X4 L; a' I  P  y  [; i% d" \
53. flex:1;
    2 g: r, d- z3 L
54. }

复制代码

jeanleem6

我想应该是你的 html 代码少了宽度的问题，这个宽度应该是根据后端返回的数据动态添加的，见图片。
如果不是这个原因，请贴出你的 html 代码

leescott

加了固定宽度，还是不行。
新的css是这样的：
& D3 Q) H0 |! `1 s$ V& ]* V) ^6 [

1. .progress {
   
2.   width: 100%;
   
3.   height: 6px;
   
4.   border-radius: 3px;
   
5.   background: #F1F5FD;
   
6. }
   4 C  O9 T8 n* F! x- r/ J6 E
7. .progress.progress-bar {
   
8.   height: 100%;
   : l: r$ \8 m# U% q3 b8 `/ }8 l
9.   border-radius: 3px;
   
10. }
    2 F/ Y6 l3 d4 P" h5 ~
11. .progress.blProgress {
    
12.   background-color: #0072FF;
    
13. }
    
14. .progress.reProgress {
    
15.   background-color: #F75A03;
    
16. }
    
17. .progress.yeProgress {
    
18.   background-color: #FFFF00;
    ! J- j9 N; r, o% N$ R3 y
19. }
    & X' R9 V0 s. l0 n2 d
20. .progress#yeProgress {
      u/ i( ?4 H' N, [4 ^1 m
21.   background-color: #FFFF00;
    6 O1 x6 u! Q/ o% o3 M9 w- a
22. }
    8 Z2 E9 N- D, g  ]1 W; C

复制代码

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

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

复制代码

jeanleem6

  Z; t# Q) g$ D! t0 P" X
  B# ^$ g3 k, F6 eHTML:
$ L: n2 j1 `$ v

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>

复制代码

7 i3 V4 C$ |) O* f
CSS:
- S6 H& [" O1 H$ V6 C1 q0 F
& {9 d2 [; M* t: N4 p8 `' l; E

1. progress {
   
2.         -webkit-appearance: none;
   
3.       }
   . J3 u$ R6 c& k- }: m
4.       ::-webkit-progress-bar {
   
5.         height: 12px;
   0 V, F& ~' C& n: U
6.         border-radius: 6px;
   9 b. {7 z$ R( w; g% S
7.         background-color: #f0f0f0;
   
8.       }
   , c0 Y& Z5 [# X# s& W  }
9.       ::-webkit-progress-value {
   
10.         border-radius: 6px;
    
11.       }
    ' w& F, U% ?+ o& w9 H1 z# z
12. 
    
13.       .blue::-webkit-progress-value {
    : q4 _4 g8 V. g6 ^# O: ?, c
14.         background-color: #95a5e9;
    
15.       }
    
16.       .red::-webkit-progress-value {
    
17.         background-color: #e995a1;
    
18.       }
    
19.       .yellow::-webkit-progress-value {
    1 e; h( e* e6 B5 M8 R
20.         background-color: #ebd28d;
    / D4 q% _- S5 G6 r* m8 F
21.       }

复制代码

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


/ V; [( X6 M% H8 A% O

以下是兼容各种浏览器的写法，不过需要修改你现有的 html 标签：

) i4 p8 l4 u' b, X9 AHTML:

* ]3 G" Q4 e9 e4 R% [( F

1. <div class="progress">
   9 O* E$ N% t7 Z2 ^: [, N6 q
2.         <span class="value blue" style="width: 92%"></span>
   , `" M" g7 h  w$ {' D  W- o
3.       </div>
   
4.       <div class="progress">
   
5.         <span class="value red" style="width: 93%"></span>
   ( h6 X  x, ~; O' t
6.       </div>
   ! ]9 {4 Q+ G2 |/ Q4 C
7.       <div class="progress">
   
8.         <span class="value yellow" style="width: 50%"></span>
   2 O2 c& p; [6 ^4 P9 v+ [
9.       </div>

复制代码

CSS:
5 g; l! L8 d+ q+ {9 R

1. .progress {
   % o; W9 j& V: [5 ^3 F3 i
2.         height: 12px;
   
3.         margin: 1em 0;
   0 t! o8 @  j  i. s' F
4.         border-radius: 6px;
   6 w! s8 y/ |) r
5.         background-color: #f0f0f0;
   
6.         text-align: left;
   
7.       }
   
8.       .progress .value {
   ; a1 }/ }2 W4 T4 B3 N- T- l
9.         display: inline-block;
   9 o4 `  t" w. K' d- F; ^3 B" }# }
10.         height: 12px;
    
11.         border-radius: 6px;
    0 @* g. M  p( @/ Z0 G" I
12.         vertical-align: top;
    
13.       }
    
14.       .progress .blue {
    & h; I9 E% M3 Y7 _' @" Q" a! `* h! ?: c
15.         background-color: #95a5e9;
    ! y1 H3 s3 V0 d/ v2 ]/ {" A
16.       }
    
17.       .progress .red {
    
18.         background-color: #e995a1;
    
19.       }
    
20.       .progress .yellow {
    7 T: w9 n' n6 X
21.         background-color: #ebd28d;
    & ]" z5 ^2 z; c: `2 g  j
22.       }

复制代码

6 V5 ^! [# h4 z/ f# s0 V& q
附上两种实现方式的 HTML 文档（解压后用浏览器打开可查看效果）

Bartleby

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

leescott

jeanleem6 发表于 2024-8-6 10:12
HTML:

谢谢帮助！
第一、在手机深蓝词典，<progress都显示，但是，蓝色。可能与词典支持有关？
2 @2 i" B! T' O- f( s9 t第二、在另一个文件，老代码曾经显示。不知道为什么，增加词条，就不显示。显示的是“悉昙”那个的最后。
最后，我是想用于姓氏字典。也许复制一个词条去示例文件，比较好。

  i; A% `8 C1 I3 g  }链接：https://pan.baidu.com/s/1565YWSEAv2CkThJfDYiauQ?pwd=uome
提取码：uome

jeanleem6

首先，你 mdx 中词条引用的 css 文件名(示例.css)和你 mdd 中打包的 css 文件名(process示例.css)不一致
第二，你打包的 css 文件(process示例.css)中的样式表和你词条中的结构完全对应不上

建议你先学 html 和 css 基础吧

leescott

jeanleem6 发表于 2024-8-7 14:30
9 d  q% b+ t: Y7 H1 w4 h3 H1 M首先，你 mdx 中词条引用的 css 文件名(示例.css)和你 mdd 中打包的 css 文件名(process示例.css)不一致
* i" [$ u/ B) L第 ...

最后的文件是按照你的第一个方法，好像子元素需要适当改一下？第二个办法也实验了。
7 K( X3 @, e& `# Z! ]/ k第二、确实不懂，代码抄了不少，也看得到蓝条，总数与</progress>的数量一致。
文件夹有别的css，不应该影响吧。
- L/ w+ B; U5 j; ]: C  V4 E6 b  _+ p谢谢！