腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

[其他] 使用HTML+CSS编写灵活的Tab页

2
回复
1248
查看
[复制链接]

1

主题

6

帖子

8

积分

1°伸手党

Rank: 2

积分
8
发表于 19-4-7 13:51:32 | 显示全部楼层 |阅读模式         
首先看一下预览界面:
, w8 d$ }5 @3 N使用HTML+CSS编写灵活的Tab页 三联  
' k( O) X$ k7 u  `* Z& [0 Z# R  下面开始讲述一下完成上述页面的步骤。
3 h& |' u/ @6 @+ Q- U0 z! e( Q% J0 u  1. 构建HTML
$ p& w5 V# c6 Q8 C; N0 ], [
$ ^3 y, |* L, W" d& l* S  s  构建HTML是整个过程最基础的部分。我们构建HTML比较关键的一个原则就是“还HTML标签其本来的含义”。所以在这里,我们应该合理分析一下期望做到的HTML的结构的情况,并加以分析,选择比较合适的HTML标签,而不是采用非标准的Table布局或者充斥着大量div和class的布局方式。事实上,现在存在着一种误区,就是凡事采用了DIV+CSS的方式进行页面编程的就是Web标准的,其实这是完全错误的观点,很容易就导致了“多div症”(divitus)或者“多类症”(classitis)。
: |) b- q: M7 b& F& p; n8 E5 A# ]6 d+ ~& P! j
  回到正题,我们分析一下页面样式,可以将整个Tab页分成2个部分,分别是一级菜单和二级菜单,他们有类似的特点,并以横向方式排列。HTML标签中的无序列表就可以反映出这种逻辑关系。所以我们分别采用2个无序列表来表示一级菜单和二级菜单。代码如下:
; U1 K9 L# ?0 I

  1. 5 p7 c+ h2 f  t  C& n
  2. <divclass="navg"> 
    8 f% X3 S4 l. H+ ]# A6 E& G. T' ^) \
  3. <divid="attendance"class="mainNavg"> 
    * V* n; S; \! ^4 J( a6 [
  4. <ul> 9 s6 X8 S  e+ n. @$ X& ]8 A
  5. <liid="attendanceNavg"><ahref="http://cms.ddvip.com/index.php#">考勤管理</a></li> 2 B  r' W# f7 n8 N
  6. <liid="teachNavg"><ahref="http://cms.ddvip.com/index.php#">教学管理</a></li> 0 ]& S1 |: f# y$ w1 |# w# k( t
  7. <liid="communicationNavg"><ahref="http://cms.ddvip.com/index.php#">家校互通</a></li> 
    6 {: ^" ~' a0 a$ {% _  Q
  8. <liid="systemNavg"><ahref="http://cms.ddvip.com/index.php#">系统管理</a></li> $ b( `) S2 }9 Q" B
  9. </ul> & p; ?  [) o5 l4 O! z5 _, W
  10. </div>   
    / s: d4 ~+ P) x( b% w% ]& |
  11. <divid="dailyAttendance"class="secondaryNavg"> 
    ) H$ d; y+ x7 ]: d
  12. <ul> 
    ' X5 O. `) _$ w3 X6 _
  13. <liid="dailyAttendanceNavg"><ahref="http://cms.ddvip.com/index.php#">当天考勤</a></li> 
    + ^7 l- q' I5 F" ?  ^* J% l; n
  14. <liid="leaveApproveNavg"><ahref="http://cms.ddvip.com/index.php#">请假审批</a></li> % b2 {8 e" g  R, U1 W" A' M7 ?
  15. <liid="attendanceStatisticsNavg"><ahref="http://cms.ddvip.com/index.php#">考勤统计</a></li> 
    + E4 w& R* E# E8 ?, V0 Y+ F
  16. <liid="attendanceCollectNavg"><ahref="http://cms.ddvip.com/index.php#">考勤汇总</a></li> + g( N- I* ?7 R7 n
  17. </ul> 
    - {/ ?. T* J5 r. B) Z2 q8 {+ N$ s
  18. </div> ; X) N) Q" d- x4 i+ G
  19. </div>
复制代码
3 O8 n0 P& N3 I. @& N/ Q2 O
, O& i9 P, `- L. ~* ?
  其中,2个div将菜单级别划分开。其实在以后还会有其他的功效。此时,我们不妨View一下这张页面,我们可以惊喜的发现,这张页面就想Word文档一样,是可读的,这一点我们可以在整个过程做完以后再一次验证。
& f% r9 t$ d, {$ q" E; } 1y.gif + `/ A* Z1 f! c* n: J% \: i1 V' V

$ e) S& m# Q0 g6 C5 O  2. 构建基本CSS
2 c# j- A( G) A
, U  k& `; z5 o! H  先简单的让ul横向排列,这里面要注意元素float之后要注意清理, ?, O. |2 X- g/ X7 e6 j. M% q

# p) Z4 Z! I' s( W  然后通过分别在LI 和 A 元素上应用背景来实现主菜单样式,这里有个比较重要的地方是A这个元素变成块级元素(display: block),这样可以便于我们下面做一些处理,也能使整个菜单应用到链接样式。+ ?6 m% z2 l, C( k3 y2 M( C
" B7 ~, X( M+ \6 V/ z  b; Y6 K: \
  而其中的line-height,恰恰可以使A中的字纵向居中。text-align使得A中的字横向居中。 代码如下:
( f; ]1 G' G4 U+ y+ h( b& F
  1. 7 L0 V$ ~, \; N' v/ r9 ]- _* G' e, e
  2.   .navg.mainNavgUL{
    0 i$ C% p5 C# S3 F9 c5 Y

  3. ! ?3 ]; G9 l- i: a
  4.   margin:0;7 P9 F. ~# q( D

  5. + @! _' ?9 V7 r! G% H  s# y
  6.   padding:0;
    7 J% |) f! T! i- E4 J! L
  7. ! I  e' H8 N: i( p+ v3 w% G8 R
  8.   list-style:none;
    5 R/ d6 `# j0 ^5 b
  9. 7 A2 [" j2 r$ x/ ^9 C+ X7 b
  10.   }
    $ H7 e1 O% o- U5 @
  11. / m+ t7 W: [9 p& ?6 _& I
  12.   .navg.mainNavgULLI{5 _1 s7 W% B" b

  13. & J7 h$ B; v$ q$ }- M% O- y
  14.   float:left;
    / X) p: W" a* f9 b

  15. ) l: I: m1 C3 Z: G# M$ ^
  16.   background-color:#E1E9F8;
    & s; r% Z. A9 W/ B# h

  17. 1 U5 P3 _0 R" |" K: J
  18.   background:url(../images/tab_right.gif)no-repeatrighttop;8 r6 `5 [" v4 |# E5 P# J( E9 X- D5 h
  19. . t) E, v+ q7 R% n
  20.   margin:10px3px;5 c6 m- f2 g+ B/ ], d

  21. , _/ h* a# p5 d+ X9 G4 }9 z
  22.   height:25px;
    2 r) p: a9 K* e
  23. ) {8 d* `1 k/ T2 p4 I
  24.   }: ~' z9 h' f6 k$ W

  25. , L/ K" H% Q$ ^
  26.   .navg.mainNavgULLIA{
    5 n4 G8 X8 i4 H' l
  27. ' n( P& t+ G' D/ q- ~
  28.   display:block;3 k( u! {9 \; J. w( X. U

  29. 9 e6 m! \" l* ?5 J' y4 S
  30.   height:25px;3 b' p, d) j7 ^6 K

  31. * D( V* m+ Y2 j3 Z
  32.   padding:025px;
    - Q" S" s$ P$ ?7 I* J% i

  33. ( P" M' ^6 d' W( J" R2 P1 w
  34.   line-height:24px;
    7 q6 f1 l& m' b
  35. - Y, f6 E) Y' c& K+ @
  36.   background-color:#E1E9F8;1 S& y9 J$ t1 g
  37. ) I  N) Z- \+ J5 }( f
  38.   background:url(../images/tab_left.gif)no-repeatlefttop;1 b9 z2 D$ x6 Q2 c, j2 ?

  39. % I, u( R* C' A
  40.   text-decoration:none;
    / q* r' p/ M" g: m7 Y. H

  41. / o! h# D  V2 [# a$ k
  42.   float:left;
    0 ]7 W2 \. [+ y6 m6 _
  43. 6 S7 `8 T6 _7 ?+ J1 G+ b
  44.   text-align:center;
    + ~/ h  v% b$ z% C" I5 A: W( R
  45. / t3 d9 S4 m7 S; T7 z
  46.   color:#fff;
    , y/ {& x( a0 w7 X- @) n0 F( B

  47. 3 m+ ?2 F4 B' l& f- Z
  48.   font-weight:bold;
    - y+ E0 J3 B6 G/ C

  49. . @+ Y5 |# l; U; ]9 t
  50.   }
复制代码

  _1 [2 {# b6 G9 n; d+ A4 i) O
( \. Q. Q7 U: ~  3. 使宽度自适应
: s' W8 O3 ?. N6 N$ L! C
; @( j4 d* I& [& Z# M' d- ~$ X  我们在这里使用滑动门技术来做宽度自适应。下面简单介绍一下滑动门技术; h% k. n: O5 g' ^  U' E5 T
, _8 g0 B6 a6 F; V, F" w5 n
  简单来说,就是在LI上应用一幅大图像背景,并让这个背景居于右侧
# P7 Y% P, v+ D, k2 Q8 c; e 1gif.gif
* P( Y. [3 L  c  d" S8 F, o' d4 V! v( B
  然后在A上应用一个小图像背景,并让这个背景居于左侧,遮住大图像边缘
2 a. v7 _9 Q# B2 |# k+ X$ E
- @# O4 Q: i, p( X1 v6 A: ~- J6 \7 K3 D+ f
  这样无论菜单文字内容长度怎么变,都不会破坏原来的结构了。2 [/ y/ f; _6 h+ l# F

$ e$ P4 H% [3 _8 A" ], l4 B  4. 当前菜单高亮显示
% T5 R% P9 {$ w. D* B4 }0 b9 R2 z6 i: T  H
  如果高亮当前页面,这个有很多种做法,最死板的是在每个页面上显式的定义类。
; i9 d% t/ c6 x* m0 E4 p! x; f: E) p
  但是对于web项目来说,页面多数是动态的,所以这样不是最理想的方法。
1 c. ?5 z, t8 M4 F4 W: E/ T- J! M+ p0 T4 q7 n- S6 a
  我这里采用的方法是CSS选择器的灵活使用,代码如下:
. B& n6 D: D- ~8 ?% `% n' u
% L# r+ R, ^% d! v
  1.   #attendance#attendanceNavg,+ J+ G, T( y+ |& _5 S$ S& \0 M

  2. + x$ ^. H0 g# g4 T8 o7 ?; ]  E0 a
  3.   #teach#teachNavg,
    4 c5 t& l* j. |9 |: t3 _

  4. + M7 u! r; i* G% t* @% v
  5.   #communication#communicationNavg,; U/ R0 g+ t1 Y# I5 U! c; m
  6. ' W! W) r3 I4 C5 B& U$ t
  7.   #system#systemNavg{; c6 q2 ?* Z* X8 [# X/ U0 o  c8 ^" M

  8.   E& H9 r7 h6 N3 D8 k" ]% g- s  V
  9.   background:url(../images/tab_right_on.gif)no-repeatrighttop;$ J* V4 f4 d. R. `
  10. + j/ _0 l0 u9 m5 E7 E' J6 ]
  11.   }+ k, J2 ?. x+ [- D$ m: C7 V2 G

  12. & z9 o# r% u& U( h1 l* j+ o
  13.   #attendance#attendanceNavgA,
    - K/ w/ D# U9 Y. ]5 }, M7 T
  14. ; _" t( Q) ?9 P! ?
  15.   #teach#teachNavgA,
    , F" p0 L9 O- j# `
  16. $ a* a* t7 g6 D( J6 m' v' p
  17.   #communication#communicationNavgA,  w( ~  o0 `9 U/ d7 H

  18. : u) R0 J0 L8 f. a3 E7 a
  19.   #system#systemNavgA{9 K( U- ^' J. F/ @; U' b# z' E0 p
  20. . m2 G  m( u4 Y6 u+ S5 B
  21.   background:url(../images/tab_left_on.gif)no-repeatlefttop;
    3 j! V3 ]1 ^. @2 q( }8 m
  22. : m0 `0 i, O0 x- ?
  23.   color:#0000ff;
    7 E6 G. r- o! U" Q$ g
  24. . S) m; x5 V6 q
  25.   }
复制代码
) a) }' ?. q4 V$ ^" X
8 x( S, u0 `8 Z* ~$ y1 O* p! z; \
  在代码中,我们可以使用不同的id作为选择器,由于CSS中的选择器id的优先级将大于class,所以只要根据id配合上li上面的id,就可以达到动态选择高亮选中的目的。8 _% ?- }$ c5 W9 Y: |& E7 ?% m+ e
0 z, C/ q# K& c/ i
  事实上,由于我们的页面都是动态的,所以id可以由后台生成,这样就可以通过id的不同组合非常精巧的实现了我们的需求。
, c- |1 O/ E; |/ ~. q4 U& N) \$ r- Q, [, K- h& X
  5. 小技巧& y2 M$ [2 Z1 ^: v

8 r: v" y$ p& N  最后可能还有一个问题你在想怎么实现的,就是高亮的tab如何把下面的横线遮掉的0 W8 \4 I' G/ b% [: m2 l
. _) b, Q/ q' |3 f8 |# B( a) {
  很简单,图片上的小技巧。将高亮的图片高度设置为25px,而普通的图片设置为24px。然后通过padding,就可以将那根横线遮去了。
8 Y; u  D* M! T: `
2 v( a/ h$ P# \1 D+ a  我们可以使用类似的方式,把二级菜单也做出来,这里就不详细叙述了。大家可以结合源码试一下。

0

主题

7

帖子

8

积分

1°伸手党

Rank: 2

积分
8
发表于 19-9-22 23:54:11 | 显示全部楼层         
我是来刷分的,嘿嘿
回复

使用道具 举报

1

主题

5

帖子

22

积分

1°伸手党

Rank: 2

积分
22
发表于 19-10-6 09:51:30 | 显示全部楼层         
路过,学习下
回复

使用道具 举报

网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除