掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 452|回复: 7

[求助] 2000币求css或者div代码

[复制链接]
  • TA的每日心情
    开心
    2019-5-28 07:39
  • 签到天数: 339 天

    [LV.8]以坛为家I

    发表于 2024-8-4 20:02:27 | 显示全部楼层 |阅读模式
    https://www.kangxizidian.cn/kangxi/19486.html( x* J& w# M, A& v
    我想做成字典。. c/ r  j' |2 ?: t. g
    就是原始样式,不能显示,不知道问题。主要是那三条彩色。+ @/ o6 K* W) c; d
    所以,求一个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;: \' V: K" y7 n, Y+ z
    3. }
      . i. n9 m, v+ V  `
    4. .fz li:first-child{( S2 K: {6 S+ Y' ^1 N* M2 q
    5. margin-right:20px;
      2 ?! J# i3 n4 D2 I7 H' `1 p% e( R: E
    6. }. }/ o, a" X  {! S9 }
    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. }9 j. R0 S% S, E6 S; J  c
    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;. ]1 o3 w5 j# N$ Z+ J) s
    17. }1 @! y0 Z( {4 B2 Z/ e! {# c
    18. .fz li:first-child em{
      0 D9 [& `( w0 x
    19. color:#95a5e9;! M; J  N4 g6 D- S' J0 p, D
    20. }  p* j! j5 T7 w) F* L, j6 b
    21. .fz li em{
      3 s, M; T" H1 X9 O
    22. font-style:initial;, r. [: N4 `4 B* y; G5 p6 W
    23. }
      , N( ]* I! p" R+ ^  O6 n
    24. .fz .sz{# W6 u, z5 V" |0 l! @
    25. background:#efefef;" }- R! I' r, i& v2 q' `
    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. }2 ~: v6 ?; g" M* o3 D
    30. .fz .sz.bgBlue{
      + U" D8 {0 C3 C: S
    31. background:#95a5e9;& Q) i+ b/ _; c4 k2 j
    32. }
      0 i7 ^$ _# k! g+ C5 E
    33. .fz .sz.bgRed{
      9 e7 _! ?, l$ `( v& o$ A2 R
    34. background:#e995a1;  z+ Z& D) m+ |7 K5 d8 O& q0 n" s" V
    35. }& `8 x( {. H" I+ K) R+ _
    36. .fz .sz.bgYel{& l# K/ s8 V. n5 ^+ p% a4 [+ _
    37. background:#ebd28d;/ j3 ~$ N6 k7 C% n  [
    38. }* Z7 X# y* G  }1 r! b2 m
    39. .fz .sz .sz{
      * d4 T# P' S; V, K
    40. margin-top:0;. \5 }$ M' o# _) z4 Q+ L, V
    41. }
      # O# J5 Q. c- o" J$ c* C
    42. .fz li p{( X/ ~1 H8 w+ r" ~1 _" K" I' I  ^
    43. font-size:14px;, I5 x1 a: i' k$ x3 l1 N. O
    44. color:#ccc;# e$ [  A: Y  l5 \1 i5 S
    45. display:flex;  W& t/ D' X1 K. T* A" D+ M! k0 g; L4 W
    46. }: I: Y5 V2 F2 ^1 L& w8 J
    47. .nameDetail p{
      ; F+ r) C! @  B/ W* g2 n0 A1 ]
    48. line-height:26px;8 k' F+ u8 q& y3 X) |
    49. text-align:justify;9 Z1 y7 C; h6 _* h  x5 p
    50. font-size:16px;: o5 f5 G0 T9 k3 }+ X
    51. }8 P' z, t! B& a/ A
    52. .fz li p span{
      ) p& t6 M4 K0 w5 M' w; ~
    53. flex:1;) r" T2 P4 G& E) W8 Z2 N: u- \7 a
    54. }
    复制代码
    " ]* h4 P6 q* C, `% {5 U3 W. B

    该用户从未签到

    发表于 2024-8-5 15:53:45 | 显示全部楼层
    我想应该是你的 html 代码少了宽度的问题,这个宽度应该是根据后端返回的数据动态添加的,见图片。
    ! ~4 Q8 }& P3 ~2 Z如果不是这个原因,请贴出你的 html 代码

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x
  • TA的每日心情
    开心
    2019-5-28 07:39
  • 签到天数: 339 天

    [LV.8]以坛为家I

     楼主| 发表于 2024-8-5 19:54:31 | 显示全部楼层
    加了固定宽度,还是不行。. ^: z  u% \2 @: r# \& X4 f
    新的css是这样的:
    / B' s4 X' r1 c9 L! h
    1. .progress {8 ?+ s' F( d+ ?- e# Z
    2.   width: 100%;
      4 h1 V* L0 b9 Y4 B& E# t) e
    3.   height: 6px; : p7 F, W2 M  D$ S" y2 k' P# t  r
    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 {& \9 ?- f- F+ o% @
    8.   height: 100%;
      * j1 _+ ^; s; p6 N
    9.   border-radius: 3px;2 O4 q1 r; L- J! v0 ?
    10. }, }% P1 C2 _. z# W" J8 a
    11. .progress.blProgress {
      / U/ p1 Q  G$ ^2 L2 h+ L1 N9 e9 l
    12.   background-color: #0072FF;0 m- J& r0 o9 S
    13. }! d- C( e) K) q6 E5 B5 a
    14. .progress.reProgress {
      ! z5 M  ]5 T* H2 G
    15.   background-color: #F75A03;
      * C+ J0 r2 `  \
    16. }7 Y, i* Z0 B  S$ f$ V  u: u% d
    17. .progress.yeProgress {
      * P) p! v/ {! ]% Z
    18.   background-color: #FFFF00;& A8 I' s9 x! U8 Y- O7 O* U1 U
    19. }+ P$ b; Q7 k( K9 z3 |9 I( [/ w
    20. .progress#yeProgress {1 @  e8 C' h# d
    21.   background-color: #FFFF00;" A0 w  ^: c# _( T2 ?2 M) \1 T
    22. }
      ) ]1 Q4 U: a( T! F8 ^# N
    复制代码

    9 O4 V' b$ O* M, H4 X但是,网页这样,总是不能显示蓝色以外的颜色,显示本身的样式还是接受的。+ @8 F& G" w# H& s" Z' r
    1. <progress class="blProgress" value="50" max="100"> 50%</progress><br>
    复制代码

    该用户从未签到

    发表于 2024-8-6 10:12:52 | 显示全部楼层
    本帖最后由 jeanleem6 于 2024-8-6 10:21 编辑 , K& `  _+ {# E5 Q+ o

    ' 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>, r1 u( B0 v. N+ E. Y
    2.       <progress class="blProgress red" value="93" max="100">93%</progress>8 Q/ @) G: b3 s  U6 I
    3.       <progress class="blProgress yellow" value="50" max="100">50%</progress>
    复制代码
    % N/ V5 C, B; r! s0 I3 I& R

    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 B/ S5 s& w5 l1 k0 ]# H, h! H
    4.       ::-webkit-progress-bar {
      " i' [6 N7 A3 ?  z3 p2 M  ]4 y% Y
    5.         height: 12px;) G4 ?2 z  q+ P8 P+ m
    6.         border-radius: 6px;
      # X* c! x* b' C# D. h
    7.         background-color: #f0f0f0;! L- u$ Z1 l) C4 v5 M* C
    8.       }$ ?1 b* g) U# n$ P2 Q! B
    9.       ::-webkit-progress-value {  z  A, u. a. D' B
    10.         border-radius: 6px;: _$ S! e  U; c3 N) p
    11.       }
      % J8 h; L; Z) j) d% Z
    12. * S' D' j- J* Z9 Y
    13.       .blue::-webkit-progress-value {
      * y& P5 `% d& K& ?
    14.         background-color: #95a5e9;
      * v4 R4 K" |5 V8 q
    15.       }* p6 D. d+ M: R- L" b# z5 L6 p
    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 {2 ~& i  x( ?4 E+ @" O+ ?
    20.         background-color: #ebd28d;
      3 n( |5 _7 C) V
    21.       }
    复制代码
    4 L$ x& f/ M! r. g* I  X% @
    / Z3 n- U0 X! u0 S1 n
    注意:::-webkit-progress-bar::-webkit-progress-value 这两个 css 伪元素并不在 CSS 标准中1 \7 D5 r& T! r
    浏览器也存在不兼容(也就是说有的浏览器不支持它们,比如 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:' W5 s! E( l8 O$ J9 ^: r

    $ 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>; l1 d+ {' E9 w$ y2 E  Z) S
    3.       </div># S" p2 m: W& F+ [
    4.       <div class="progress">! C7 C- ^+ C+ }  F1 q" \
    5.         <span class="value red" style="width: 93%"></span>
      5 `2 B# B* o) x$ R
    6.       </div>+ i6 i4 ]5 B4 }7 U9 R: k
    7.       <div class="progress">4 z( Z/ u- F3 L1 {. E# ?+ [' A
    8.         <span class="value yellow" style="width: 50%"></span>
      1 \) Y0 J" H' }* U7 b; V6 y. ^1 N
    9.       </div>
    复制代码
    ; n; h/ P# o9 \4 N  I! F- @+ P
    3 ^& I0 e) W4 r# @( j4 m
    CSS:3 y3 S/ t0 [7 N. N5 E) ^4 J3 f+ t

    # 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;2 ~( I# g8 E! P& K" N: @% i
    7.       }
      * I6 O  J: x7 B; p' ]" }
    8.       .progress .value {
      ) F6 T# t- g& _% T
    9.         display: inline-block;+ C+ S6 _/ d1 K4 L0 I
    10.         height: 12px;* |0 [, ?$ f: K' I+ S& P1 ~
    11.         border-radius: 6px;" v% x6 U+ |4 d. f
    12.         vertical-align: top;
      , h; ^$ k5 s! q4 w
    13.       }/ X4 j4 S. A% t( W; h$ I
    14.       .progress .blue {
      & y0 f, }  y* n2 z; |# D
    15.         background-color: #95a5e9;* }* P* B, i) E" Z. [* `! P
    16.       }6 Z1 [( I- _& t; u5 b1 a
    17.       .progress .red {! S2 o7 k* m4 {% e6 r* ]
    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;1 ]  N8 {7 g& G$ j5 h" v9 `$ v. f
    22.       }
    复制代码

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

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x

    评分

    1

    查看全部评分

  • TA的每日心情
    奋斗
    昨天 21:32
  • 签到天数: 685 天

    [LV.9]以坛为家II

    发表于 2024-8-7 00:05:23 | 显示全部楼层
    看看,楼主源数据都爬取了吗?
  • TA的每日心情
    开心
    2019-5-28 07:39
  • 签到天数: 339 天

    [LV.8]以坛为家I

     楼主| 发表于 2024-8-7 11:55:04 | 显示全部楼层

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

    5 r: C- I2 i  K: ?( C' l链接:https://pan.baidu.com/s/1565YWSEAv2CkThJfDYiauQ?pwd=uome 9 b* t6 y8 H# P) [0 K
    提取码:uome
    9 y+ a! T8 o8 X  d, ~5 H6 Y

    该用户从未签到

    发表于 2024-8-7 14:30:41 | 显示全部楼层
    首先,你 mdx 中词条引用的 css 文件名(示例.css)和你 mdd 中打包的 css 文件名(process示例.css)不一致
    0 w: ?' [, E0 @: l第二,你打包的 css 文件(process示例.css)中的样式表和你词条中的结构完全对应不上) @$ q# j& z9 A
    # E% ^" F$ T& I8 R# e
    建议你先学 html 和 css 基础吧
  • TA的每日心情
    开心
    2019-5-28 07:39
  • 签到天数: 339 天

    [LV.8]以坛为家I

     楼主| 发表于 2024-8-7 18:17:47 | 显示全部楼层
    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第 ...
    4 {+ w' ]* `& e1 y6 Y* N: W
    最后的文件是按照你的第一个方法,好像子元素需要适当改一下?第二个办法也实验了。2 M9 H7 u9 Q8 ~! @
    第二、确实不懂,代码抄了不少,也看得到蓝条,总数与</progress>的数量一致。5 ?7 h( E# m. _6 W# W, O' ^/ z
    文件夹有别的css,不应该影响吧。
    9 b0 {& c% _7 P2 O谢谢!
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    小黑屋|手机版|Archiver|PDAWIKI |网站地图

    GMT+8, 2025-5-18 08:38 , Processed in 0.022379 second(s), 26 queries .

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表