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

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

3
回复
1395
查看
[复制链接]

1

主题

6

帖子

8

积分

1°伸手党

Rank: 2

积分
8
发表于 19-4-7 13:51:32 | 显示全部楼层 |阅读模式         
首先看一下预览界面:
1 Y: o+ r4 R, f: Q" Y使用HTML+CSS编写灵活的Tab页 三联  
2 o1 p; S7 T' Z* S" r, t4 P  下面开始讲述一下完成上述页面的步骤。
8 l( ]5 P4 t6 o1 G2 ]: {  1. 构建HTML. o# w) {9 B  r! p: D
4 t( @9 b" J  J/ ^
  构建HTML是整个过程最基础的部分。我们构建HTML比较关键的一个原则就是“还HTML标签其本来的含义”。所以在这里,我们应该合理分析一下期望做到的HTML的结构的情况,并加以分析,选择比较合适的HTML标签,而不是采用非标准的Table布局或者充斥着大量div和class的布局方式。事实上,现在存在着一种误区,就是凡事采用了DIV+CSS的方式进行页面编程的就是Web标准的,其实这是完全错误的观点,很容易就导致了“多div症”(divitus)或者“多类症”(classitis)。
. ]% q9 [( d# f6 v$ m3 ~4 F. C. B9 A
  回到正题,我们分析一下页面样式,可以将整个Tab页分成2个部分,分别是一级菜单和二级菜单,他们有类似的特点,并以横向方式排列。HTML标签中的无序列表就可以反映出这种逻辑关系。所以我们分别采用2个无序列表来表示一级菜单和二级菜单。代码如下:% {: r) _+ g# A7 |$ z: `* c

  1. ' ?+ |* q3 k: x( A2 S% H7 Y
  2. <divclass="navg"> 
    ' \* p5 ~7 e3 Y$ Q. s$ O
  3. <divid="attendance"class="mainNavg"> 
    1 a  T# c( j! }+ X. M
  4. <ul> # J  [5 K% w& A# I% ]% v
  5. <liid="attendanceNavg"><ahref="http://cms.ddvip.com/index.php#">考勤管理</a></li> ) l5 d+ x9 r2 C8 j9 t  Z3 B( a' ]
  6. <liid="teachNavg"><ahref="http://cms.ddvip.com/index.php#">教学管理</a></li> ' {- z# l7 y0 p; B
  7. <liid="communicationNavg"><ahref="http://cms.ddvip.com/index.php#">家校互通</a></li> 
    ; A/ [2 D1 S0 l' ~% ]
  8. <liid="systemNavg"><ahref="http://cms.ddvip.com/index.php#">系统管理</a></li> 4 L, e/ |1 R: L% O( E
  9. </ul> 
    6 L/ f) K' ?0 q# V& ?5 \
  10. </div>   
    % p; Z! L- A# [; h
  11. <divid="dailyAttendance"class="secondaryNavg"> 
    8 h$ K2 X. l) E/ q& ^6 s
  12. <ul> 
    4 w6 C# {* ^6 o
  13. <liid="dailyAttendanceNavg"><ahref="http://cms.ddvip.com/index.php#">当天考勤</a></li> % _- F2 f2 p6 ^4 P9 Z# H- }# r+ X
  14. <liid="leaveApproveNavg"><ahref="http://cms.ddvip.com/index.php#">请假审批</a></li> 
    ' ^2 K1 H8 u& n) P0 z: L
  15. <liid="attendanceStatisticsNavg"><ahref="http://cms.ddvip.com/index.php#">考勤统计</a></li> 
    6 M& a, t& b2 P( S7 D
  16. <liid="attendanceCollectNavg"><ahref="http://cms.ddvip.com/index.php#">考勤汇总</a></li> ' R4 C  \' P# |4 ?3 M4 L
  17. </ul> 
    # @; p$ S, J2 @, X$ ^
  18. </div> 
    . w; _; y4 o/ D/ y7 A
  19. </div>
复制代码
0 C' Q( G/ @6 V

3 _% c# }1 V: W$ C  其中,2个div将菜单级别划分开。其实在以后还会有其他的功效。此时,我们不妨View一下这张页面,我们可以惊喜的发现,这张页面就想Word文档一样,是可读的,这一点我们可以在整个过程做完以后再一次验证。. [/ D" K+ A9 E
1y.gif
1 S( p) T( T2 K3 F4 D
7 r2 F# b& }5 V- s6 P% `" Q/ i  2. 构建基本CSS( W( H$ F% [2 x# k7 Y7 |, y/ j: I

3 W5 `0 D8 a! \! E0 d8 R/ ~$ [6 q, d  先简单的让ul横向排列,这里面要注意元素float之后要注意清理$ c! X/ N. o$ K
# z2 @* A, C1 e% y& S
  然后通过分别在LI 和 A 元素上应用背景来实现主菜单样式,这里有个比较重要的地方是A这个元素变成块级元素(display: block),这样可以便于我们下面做一些处理,也能使整个菜单应用到链接样式。
% F4 `0 ~$ Q/ w% R$ d) o& q/ V
9 \  A9 R! ~! G6 D! h  而其中的line-height,恰恰可以使A中的字纵向居中。text-align使得A中的字横向居中。 代码如下:! l4 ]6 {$ H& M5 B6 @* r. Q

  1. 1 S( ]% X* q* v; g" f
  2.   .navg.mainNavgUL{
    4 r' c; d8 z5 z' Y# B( Q

  3.   f! ~) `8 P1 @. ^
  4.   margin:0;
    4 Z5 J- N  F; ]3 c4 y) p

  5. " Q! l/ y, }. l. S' j
  6.   padding:0;
    * ]. ~( H2 H6 d- ~# e7 a

  7. , _. {; ~1 B8 J( e: s, O2 F
  8.   list-style:none;. N( k' |- T2 R" U/ r
  9. ; K% d. k, A2 H( ]
  10.   }
    ; s, s, l. N% x6 ^7 _" i; Q8 o
  11. 9 M, G' E$ S) e* H# c$ H/ y  G
  12.   .navg.mainNavgULLI{+ ]# W* E% c6 d7 V$ o) m
  13. , T$ p: N- N% P" Q+ @6 R0 O+ R) e' k
  14.   float:left;0 K3 `7 c# f# }8 J
  15. $ ]4 ~' F5 s" l' R* J
  16.   background-color:#E1E9F8;0 J5 L' z1 M2 l% f1 m

  17. : a- Z# M& {- F
  18.   background:url(../images/tab_right.gif)no-repeatrighttop;
    0 B6 @' R+ o8 c8 x% B  i
  19. 9 m. Y( f* H7 L( u- K! ]1 A6 G) \
  20.   margin:10px3px;
    ! a& T" J/ L' c# g- ^

  21. 0 l1 J9 [/ {: s0 F* A  n
  22.   height:25px;9 P5 w1 A9 ^8 S3 g
  23. 3 i8 F, I7 S0 |$ w" S' q% V
  24.   }* E/ O; y3 j1 r! E

  25. & }/ K2 R" M5 U5 R# F5 G$ Z
  26.   .navg.mainNavgULLIA{
    7 n, W- ^, H4 {" w9 D( B# Z2 \

  27.   `' Q' l; T( A# u- B" f
  28.   display:block;
    ; l/ ]+ t7 r6 ^2 w# b' \/ O( j
  29. % A+ [( e$ {! A8 `2 y- |5 \
  30.   height:25px;
    6 c9 c" C1 x1 X2 P( O

  31. ( z8 y4 W* ?. O
  32.   padding:025px;
      b7 U+ e, |& _1 Y

  33. 3 q# d4 M7 D# M' v/ p/ T. z' j
  34.   line-height:24px;$ R6 S! B% r5 j- Y
  35. - x7 x) S, @& V' t
  36.   background-color:#E1E9F8;4 K4 o+ C& c/ o, ^8 \+ a
  37. ( C8 w. h- f1 w: ]
  38.   background:url(../images/tab_left.gif)no-repeatlefttop;
    ; _( a" X' n, E0 \+ y3 K8 {7 G/ X

  39. * J' K( r# |2 z1 N2 Z6 ]% g' v  x9 C0 g
  40.   text-decoration:none;
    ) }  l  b/ |) \; i* a3 e; R* _4 }# D. E0 I
  41. 2 x) A2 G7 M( F+ s! J) [
  42.   float:left;
    $ e2 \+ Q# c) O) F) l
  43. , n5 T: h7 O- n, z, P' z  Z! n
  44.   text-align:center;
    0 S' g3 z3 w, {
  45. ( D% f8 d! y, r+ ^- Z
  46.   color:#fff;
    % {% W7 [8 X( }7 V4 x
  47. 9 W- H7 e; G% O* o. o. F8 ^4 J/ F
  48.   font-weight:bold;
    9 d( R. Q- D8 Q' }& l: r  b& c

  49. 4 b) V) [3 s0 Z5 t
  50.   }
复制代码
- a! J) M- p9 x( H
3 p. l! E' X" f; o& ^, _
  3. 使宽度自适应
' E; g. C) |2 B
( ^- I/ F' l; G1 h$ T) v  我们在这里使用滑动门技术来做宽度自适应。下面简单介绍一下滑动门技术
0 w, B2 N( Z) @( @7 H2 u( u  c. ^; U) Q& N  ^% K$ g, Z; ]% N- A1 y
  简单来说,就是在LI上应用一幅大图像背景,并让这个背景居于右侧; J5 Q# K; m1 G/ Z% X
1gif.gif
- b2 D2 w- h3 w; C7 f7 w$ c9 e0 J0 N8 }* q
  然后在A上应用一个小图像背景,并让这个背景居于左侧,遮住大图像边缘
9 W" _- s0 O8 {) I* b* @! m7 i8 Q
! f( W/ N9 `% v  I: r  x0 j3 V
! x2 R* ~+ N+ n$ t4 B  这样无论菜单文字内容长度怎么变,都不会破坏原来的结构了。
; ~8 R1 i0 H$ g5 p' @8 d$ q1 |0 \
  4. 当前菜单高亮显示$ o, V. M0 E( Q5 u6 r% f& k
5 v9 u) V% a8 Y2 ^: Z( v3 Q
  如果高亮当前页面,这个有很多种做法,最死板的是在每个页面上显式的定义类。
' y1 _' p/ `5 x  R- B: _( t  |) |, _7 M$ f
  但是对于web项目来说,页面多数是动态的,所以这样不是最理想的方法。
8 o4 O" @9 l3 \0 H
8 F1 E9 }6 r( E7 W$ U- \( J5 R4 I  我这里采用的方法是CSS选择器的灵活使用,代码如下:! y! ~( j: s1 p
: o$ K# r1 }# n. |& `" ^: F5 \
  1.   #attendance#attendanceNavg,
    3 U7 V/ H3 D: P! g* E( Y* V
  2. $ J& F, w8 ~% Z, Y: S5 D
  3.   #teach#teachNavg,0 h9 m& u( g8 E' }4 E
  4. ; k+ x, a( Z8 M- n
  5.   #communication#communicationNavg,
    " A; T+ D! J7 R3 p& t  w3 Y' c

  6. ; A# m& l# [: ]) M
  7.   #system#systemNavg{
    . `  r4 J6 ?" A- r4 z0 P# V1 J
  8. / P4 Q+ F  o, @8 M
  9.   background:url(../images/tab_right_on.gif)no-repeatrighttop;
    / Q2 _4 O1 l) I

  10. 6 G0 ^7 n# K, q
  11.   }
    , A# p7 I7 f. e& b( E4 s
  12. % z) Q1 S- s% ~, w8 B
  13.   #attendance#attendanceNavgA,
    . }2 P3 @  R: ?+ N! w' j6 i

  14.   N3 k; }+ j. E+ f
  15.   #teach#teachNavgA," k$ h8 v) O5 k) a6 y' ?! L
  16. 7 \. P) t# S1 E% P# b0 E
  17.   #communication#communicationNavgA,
    4 y* f7 g5 p1 M5 H0 o  k1 {! l4 ]* b

  18. 0 p* p/ ?. A) B0 f
  19.   #system#systemNavgA{( D9 a, |# I* Z" @. a( u' t$ I
  20. & S, {/ N% M) z2 l% X$ a( i% s
  21.   background:url(../images/tab_left_on.gif)no-repeatlefttop;9 V$ f) p2 _, o0 D1 d: b

  22. 2 b8 X, Q4 d4 X+ \. O9 u
  23.   color:#0000ff;
    ) o2 a: Y0 X+ j

  24. / @+ M( q& Q9 I  a1 o" A
  25.   }
复制代码

- H" m, a! j( b6 U. l- F. e; |( ~% v! l5 F
  在代码中,我们可以使用不同的id作为选择器,由于CSS中的选择器id的优先级将大于class,所以只要根据id配合上li上面的id,就可以达到动态选择高亮选中的目的。
! r  H: r% W1 K8 D! m6 R4 w6 o1 V' a$ L/ b, k- Q0 P/ q0 U5 j' I
  事实上,由于我们的页面都是动态的,所以id可以由后台生成,这样就可以通过id的不同组合非常精巧的实现了我们的需求。" A9 H6 S2 ?* s* c% u

- K' i  v1 \1 z) B' u$ {8 w% d  5. 小技巧
. C% o3 h. s; C  S
1 \# w5 x# |8 n4 `0 n" t- X  最后可能还有一个问题你在想怎么实现的,就是高亮的tab如何把下面的横线遮掉的0 M8 P  b4 {" o& n0 z: ?9 {
% o6 S9 v; r" f, y% J
  很简单,图片上的小技巧。将高亮的图片高度设置为25px,而普通的图片设置为24px。然后通过padding,就可以将那根横线遮去了。
( ?! I. s; g& ?: G. V9 Y- R0 S4 ?; h( B& |7 {3 x% \" m
  我们可以使用类似的方式,把二级菜单也做出来,这里就不详细叙述了。大家可以结合源码试一下。

0

主题

10

帖子

8

积分

1°伸手党

Rank: 2

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

使用道具 举报

1

主题

8

帖子

22

积分

1°伸手党

Rank: 2

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

使用道具 举报

0

主题

6

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 19-11-20 19:29:07 | 显示全部楼层         
有竞争才有进步嘛
回复

使用道具 举报

网站简介

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