2000币求css或者div代码

leescott

https://www.kangxizidian.cn/kangxi/19486.html
我想做成字典。
就是原始样式，不能显示，不知道问题。主要是那三条彩色。
所以，求一个css。谢谢！
# H6 l! _- i4 S, C$ m/ q) V0 J1 x  n5 \
5 g0 ?. {/ {& O0 M3 Q! U

1. .fz{
   3 V, F- Q0 @7 X) K* s" L/ C* u
2. font-size:0;
   
3. }
   . i. n9 m, v+ V  `
4. .fz li:first-child{
   
5. margin-right:20px;
   2 ?! J# i3 n4 D2 I7 H' `1 p% e( R: E
6. }
   
7. .fz li{
   . r) z0 R5 k4 F5 U
8. display:inline-block;
   ; S( n- I- `* J5 I. U2 r
9. width:48%;
   6 ]. H5 l8 N. \! E& c" p
10. font-size:14px;
    ' A1 R  m2 V1 Y9 X5 W2 N
11. color:#999;
    $ M3 F. x3 u7 ]! X$ V7 \; v
12. margin-bottom:10px;
    6 o6 ]0 t& @: U, J& V
13. }
    
14. .fz li > div{
    2 ?; |( y5 z5 v* D
15. display:flex;
    9 j! [, p" p: r: K: H0 o2 D
16. justify-content:space-between;
    
17. }
    
18. .fz li:first-child em{
    0 D9 [& `( w0 x
19. color:#95a5e9;
    
20. }
    
21. .fz li em{
    3 s, M; T" H1 X9 O
22. font-style:initial;
    
23. }
    , N( ]* I! p" R+ ^  O6 n
24. .fz .sz{
    
25. background:#efefef;
    
26. height:10px;
    ! u: X9 K1 x8 \4 I3 R+ t
27. border-radius:5px;
    + H1 x$ z! T+ ?' l$ w
28. margin-top:5px;
    5 M! \; `, U$ u3 ~
29. }
    
30. .fz .sz.bgBlue{
    + U" D8 {0 C3 C: S
31. background:#95a5e9;
    
32. }
    0 i7 ^$ _# k! g+ C5 E
33. .fz .sz.bgRed{
    9 e7 _! ?, l$ `( v& o$ A2 R
34. background:#e995a1;
    
35. }
    
36. .fz .sz.bgYel{
    
37. background:#ebd28d;
    
38. }
    
39. .fz .sz .sz{
    * d4 T# P' S; V, K
40. margin-top:0;
    
41. }
    # O# J5 Q. c- o" J$ c* C
42. .fz li p{
    
43. font-size:14px;
    
44. color:#ccc;
    
45. display:flex;
    
46. }
    
47. .nameDetail p{
    ; F+ r) C! @  B/ W* g2 n0 A1 ]
48. line-height:26px;
    
49. text-align:justify;
    
50. font-size:16px;
    
51. }
    
52. .fz li p span{
    ) p& t6 M4 K0 w5 M' w; ~
53. flex:1;
    
54. }

复制代码

jeanleem6

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

leescott

加了固定宽度，还是不行。
新的css是这样的：
/ B' s4 X' r1 c9 L! h

1. .progress {
   
2.   width: 100%;
   4 h1 V* L0 b9 Y4 B& E# t) e
3.   height: 6px;
   
4.   border-radius: 3px;
   & ]7 Y' O6 t& L) w3 H8 X3 M
5.   background: #F1F5FD;
   9 y7 ?4 y% }. \+ `
6. }
   8 A( N- A- _8 g4 u* c1 w4 k" V4 d& J
7. .progress.progress-bar {
   
8.   height: 100%;
   * j1 _+ ^; s; p6 N
9.   border-radius: 3px;
   
10. }
    
11. .progress.blProgress {
    / U/ p1 Q  G$ ^2 L2 h+ L1 N9 e9 l
12.   background-color: #0072FF;
    
13. }
    
14. .progress.reProgress {
    ! z5 M  ]5 T* H2 G
15.   background-color: #F75A03;
    * C+ J0 r2 `  \
16. }
    
17. .progress.yeProgress {
    * P) p! v/ {! ]% Z
18.   background-color: #FFFF00;
    
19. }
    
20. .progress#yeProgress {
    
21.   background-color: #FFFF00;
    
22. }
    ) ]1 Q4 U: a( T! F8 ^# N

复制代码

9 O4 V' b$ O* M, H4 X但是，网页这样，总是不能显示蓝色以外的颜色，显示本身的样式还是接受的。

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

复制代码

jeanleem6

' o% o+ J2 C! x% ~HTML:
, q! g6 k" x+ R' {. \
/ L7 k2 O/ j, q4 [

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>

复制代码

5 x$ ~/ B" A3 H$ Q7 _, K, SCSS:
2 P. y/ @, ?" z" R
3 ~: T3 f% h" |% W* n* b

1. progress {
   . d5 ?7 t4 a+ j
2.         -webkit-appearance: none;
   3 G' N- B, t0 P  V  D1 S
3.       }
   
4.       ::-webkit-progress-bar {
   " i' [6 N7 A3 ?  z3 p2 M  ]4 y% Y
5.         height: 12px;
   
6.         border-radius: 6px;
   # X* c! x* b' C# D. h
7.         background-color: #f0f0f0;
   
8.       }
   
9.       ::-webkit-progress-value {
   
10.         border-radius: 6px;
    
11.       }
    % J8 h; L; Z) j) d% Z
12. 
    
13.       .blue::-webkit-progress-value {
    * y& P5 `% d& K& ?
14.         background-color: #95a5e9;
    * v4 R4 K" |5 V8 q
15.       }
    
16.       .red::-webkit-progress-value {
    7 v, U  G  N5 y6 D( E& v
17.         background-color: #e995a1;
    - }. \, z  D1 M9 H
18.       }
    5 U' U! P! C) r' |- i$ U
19.       .yellow::-webkit-progress-value {
    
20.         background-color: #ebd28d;
    3 n( |5 _7 C) V
21.       }

复制代码

注意：::-webkit-progress-bar、::-webkit-progress-value 这两个 css 伪元素并不在 CSS 标准中
浏览器也存在不兼容（也就是说有的浏览器不支持它们，比如 Firefox 对这两个伪元素都不支持，其它浏览器版本过低也不支持）
2 z$ m( v1 F5 c6 M+ l4 R) @
3 k0 Z- H  i8 y. O: E, h! [
% y! Q5 l0 j+ M8 p6 y4 E# ]/ {, D
' ]; z( u: `$ X
+ p5 [" j* B2 C" k以下是兼容各种浏览器的写法，不过需要修改你现有的 html 标签：
+ a- O1 U* C4 w; }9 _( J/ X0 M; h
2 |, o% K. i2 fHTML:

$ E, j% y( j9 W# g% h! o! m2 w" w* s3 ?

1. <div class="progress">
   3 H0 J9 I9 z% ?$ K
2.         <span class="value blue" style="width: 92%"></span>
   
3.       </div>
   
4.       <div class="progress">
   
5.         <span class="value red" style="width: 93%"></span>
   5 `2 B# B* o) x$ R
6.       </div>
   
7.       <div class="progress">
   
8.         <span class="value yellow" style="width: 50%"></span>
   1 \) Y0 J" H' }* U7 b; V6 y. ^1 N
9.       </div>

复制代码

CSS:

# S, G6 c$ _% ?2 P& \& G: w

1. .progress {
   / g* P# [0 g& N8 n  j
2.         height: 12px;
   . h# b3 l. v' r8 q; m
3.         margin: 1em 0;
   0 v+ y3 W4 M* H3 X# p; i
4.         border-radius: 6px;
     W1 X( j. N9 z+ \7 J
5.         background-color: #f0f0f0;
   4 O, m! f: p0 c0 a. @1 g
6.         text-align: left;
   
7.       }
   * I6 O  J: x7 B; p' ]" }
8.       .progress .value {
   ) F6 T# t- g& _% T
9.         display: inline-block;
   
10.         height: 12px;
    
11.         border-radius: 6px;
    
12.         vertical-align: top;
    , h; ^$ k5 s! q4 w
13.       }
    
14.       .progress .blue {
    & y0 f, }  y* n2 z; |# D
15.         background-color: #95a5e9;
    
16.       }
    
17.       .progress .red {
    
18.         background-color: #e995a1;
    7 G: W& k- l" l, {7 _. s
19.       }
    ; @$ c) @' Y: U+ X8 Y3 ~7 t1 ^
20.       .progress .yellow {
    : _7 c3 M; D6 E" z; \
21.         background-color: #ebd28d;
    
22.       }

复制代码

8 U1 U8 N1 h  z
附上两种实现方式的 HTML 文档（解压后用浏览器打开可查看效果）
; o4 f( n  v1 w  x/ y
. q5 [- x5 i: j( G. x8 y

Bartleby

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

leescott

jeanleem6 发表于 2024-8-6 10:12
1 P1 [: N, T! lHTML:

/ L! I6 ^$ K1 z谢谢帮助！
第一、在手机深蓝词典，<progress都显示，但是，蓝色。可能与词典支持有关？
3 H% B( ^4 L. Q" z  V( t第二、在另一个文件，老代码曾经显示。不知道为什么，增加词条，就不显示。显示的是“悉昙”那个的最后。
& m1 g! A% G$ d* ]% L最后，我是想用于姓氏字典。也许复制一个词条去示例文件，比较好。

5 r: C- I2 i  K: ?( C' l链接：https://pan.baidu.com/s/1565YWSEAv2CkThJfDYiauQ?pwd=uome
提取码：uome
9 y+ a! T8 o8 X  d, ~5 H6 Y

jeanleem6

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

建议你先学 html 和 css 基础吧

leescott

jeanleem6 发表于 2024-8-7 14:30
( l1 o3 `2 ?+ W4 |& @, r5 y! r, j6 Z首先，你 mdx 中词条引用的 css 文件名(示例.css)和你 mdd 中打包的 css 文件名(process示例.css)不一致
* @2 u0 Y( W+ X$ I( o; l' T第 ...

最后的文件是按照你的第一个方法，好像子元素需要适当改一下？第二个办法也实验了。
第二、确实不懂，代码抄了不少，也看得到蓝条，总数与</progress>的数量一致。
文件夹有别的css，不应该影响吧。
9 b0 {& c% _7 P2 O谢谢！