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

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

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

1

主题

8

帖子

8

积分

1°伸手党

Rank: 2

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

  1. . t: s; a: o) u' F* I
  2. <divclass="navg"> 
    # D4 u! D( l+ i* k5 Q: u
  3. <divid="attendance"class="mainNavg"> % B; ]+ C9 e7 ]5 h: A
  4. <ul> 
    % X) l/ r5 V+ ^4 F0 U9 @) ^
  5. <liid="attendanceNavg"><ahref="http://cms.ddvip.com/index.php#">考勤管理</a></li> 
    % n! V" J$ M! R" ]% z
  6. <liid="teachNavg"><ahref="http://cms.ddvip.com/index.php#">教学管理</a></li> 
    2 G) d; I$ K' ~1 K2 g1 |
  7. <liid="communicationNavg"><ahref="http://cms.ddvip.com/index.php#">家校互通</a></li> * @! D* O* `% r4 t$ b1 E9 F
  8. <liid="systemNavg"><ahref="http://cms.ddvip.com/index.php#">系统管理</a></li> 9 b8 v( i* _2 g* ^9 n/ y+ G' X$ I
  9. </ul> : S+ k6 l. I0 d) ^
  10. </div>   
    # ?" p- ~( y! M+ |
  11. <divid="dailyAttendance"class="secondaryNavg"> * X& c) l/ y( {0 ~: T& w9 a
  12. <ul> 
    3 _$ ?& K) G5 g
  13. <liid="dailyAttendanceNavg"><ahref="http://cms.ddvip.com/index.php#">当天考勤</a></li> # f& @& U& E/ Z/ E' P  B
  14. <liid="leaveApproveNavg"><ahref="http://cms.ddvip.com/index.php#">请假审批</a></li> 9 L# `9 X  f) h3 G: u
  15. <liid="attendanceStatisticsNavg"><ahref="http://cms.ddvip.com/index.php#">考勤统计</a></li> 
    4 s1 C. l+ t: G/ M  B9 f/ |
  16. <liid="attendanceCollectNavg"><ahref="http://cms.ddvip.com/index.php#">考勤汇总</a></li> 
    & t  S$ P) t) s6 h1 J" V
  17. </ul> 
    " v  Y/ M* o) g# _
  18. </div> 
    $ s0 g( @4 D. F) p, n2 ~1 D
  19. </div>
复制代码

' `$ _9 x! R6 n0 f7 Z" d9 i1 r( \4 F
  其中,2个div将菜单级别划分开。其实在以后还会有其他的功效。此时,我们不妨View一下这张页面,我们可以惊喜的发现,这张页面就想Word文档一样,是可读的,这一点我们可以在整个过程做完以后再一次验证。- |0 h) Z2 u" c: J: r, c; C- i8 @
1y.gif
# Z$ I: y, e- c  W0 `! p, [) m# Y: d  L* Z; s5 J/ {5 m
  2. 构建基本CSS
9 [4 ?1 Y! h& l& \8 \& a2 R  l# z* r* g4 c1 d
  先简单的让ul横向排列,这里面要注意元素float之后要注意清理
/ f% j+ l& }1 o5 `. W: Z9 w, y. p$ ]+ O& ?: B" f8 [4 X! n7 K
  然后通过分别在LI 和 A 元素上应用背景来实现主菜单样式,这里有个比较重要的地方是A这个元素变成块级元素(display: block),这样可以便于我们下面做一些处理,也能使整个菜单应用到链接样式。* r& O7 k5 Z+ q3 |0 w
, t/ f, x5 t4 ~3 [
  而其中的line-height,恰恰可以使A中的字纵向居中。text-align使得A中的字横向居中。 代码如下:5 B4 G( j# R7 F
  1. " I; `" y+ x6 v! N+ q& ~
  2.   .navg.mainNavgUL{( L8 H/ h1 w' E" C* V8 {5 ?
  3. . E( o3 r8 Q' G' E) i) P
  4.   margin:0;
    + [) M2 F2 }9 |; ^* h
  5. * U6 b3 H" {4 e; j; X+ e
  6.   padding:0;! {1 X" x  p" H# Z6 @9 [
  7. 9 t8 {. e$ N- G- D+ H: x6 v' O
  8.   list-style:none;2 ^9 D, R/ H0 p2 Q4 n  F- Q) V  C

  9. ! e% m8 P2 z5 O# N5 {
  10.   }" P: b! M% A  {" g1 B/ d5 l
  11. . J& t6 G2 }8 U
  12.   .navg.mainNavgULLI{
    * @3 d7 k7 u5 k" L2 @. k

  13. " M% S- a' {* c6 `7 [  H; b
  14.   float:left;; U! ?7 [8 j, e

  15. 4 g0 k# ^! i7 z1 |
  16.   background-color:#E1E9F8;1 F$ \: |; X, q- I1 Z

  17. 1 L/ t0 Y4 t: K# u" _. G0 ~: a
  18.   background:url(../images/tab_right.gif)no-repeatrighttop;. \. I, G3 c. m# ]4 {

  19. 8 c" h2 \7 M+ C% \# [, `. v1 X% b
  20.   margin:10px3px;
    2 w* i* F, ?) l1 g* T

  21. 7 Z& |) ]. n2 S( J" U
  22.   height:25px;
    & G! N+ o& Z# e" W
  23. ( |2 t1 G! N, O5 C5 |- s0 E
  24.   }7 o( t2 ]4 E$ h8 k
  25. & {( G8 h+ ^6 i+ F( T( e& U* G
  26.   .navg.mainNavgULLIA{
    3 D( p/ H& l  O

  27. 4 F$ a: [, I& Z. @6 _& o! V
  28.   display:block;
    : G3 J& ~+ S' ]3 }) q

  29. ' W2 {+ O- \( ]9 H' _6 [8 v* H! d8 S
  30.   height:25px;
    & E1 P5 w3 Y1 q% |' `1 P, @+ G

  31. - {6 j: ]$ {7 ]. X
  32.   padding:025px;
    ( Y, ?4 V3 M1 D  D" F  [6 L( V# I' P

  33. ( L8 S) k: U1 m7 |
  34.   line-height:24px;% l. Y) q8 Q) q- S/ `5 p
  35. ! h2 {7 J( B, B1 A7 |
  36.   background-color:#E1E9F8;: F! C" \, m, L0 e/ o  q% B$ h

  37. 0 ]& w: s0 R$ G9 \
  38.   background:url(../images/tab_left.gif)no-repeatlefttop;' }( [& n8 b+ T* q( f3 n
  39. , Z7 ?  r5 z# A# c9 ]
  40.   text-decoration:none;
    / ]9 c+ C1 y2 Y  P8 G+ n4 t' G
  41. - @1 A' T8 h! F1 a
  42.   float:left;' H4 \4 o: y  `
  43. & B: G: [  T0 h
  44.   text-align:center;# I+ a7 g9 W8 |! L
  45. + F, N: z# l* W% I' O
  46.   color:#fff;
      v( }, M9 g6 |- c+ f2 c7 v+ K# v

  47. " V) f: y# _+ G. r1 I; F" d) D$ h
  48.   font-weight:bold;
    ( v6 w- X1 l4 }6 t. O

  49. ; ?) O* |/ |6 @+ C; |" {
  50.   }
复制代码
, R5 h; \; v5 y1 A0 j

, R  ]! z2 ]* O* r  3. 使宽度自适应
4 x0 H5 I! r1 R& `, R, Q& w6 P1 C# w4 R4 S: U
  我们在这里使用滑动门技术来做宽度自适应。下面简单介绍一下滑动门技术
6 y3 K9 o- n5 N* j; `1 `4 t' {1 A, l2 d% H: g
  简单来说,就是在LI上应用一幅大图像背景,并让这个背景居于右侧
0 N6 ?! y* ?3 g" P4 V' D+ C 1gif.gif
( |1 W" D' }* V1 A7 |
( U) O% K; u, r; v/ q1 Z' n  然后在A上应用一个小图像背景,并让这个背景居于左侧,遮住大图像边缘6 w% y$ I$ \: V& l
$ ~$ w: {8 \7 l! _- C% @
0 f! c) `- |: E) s% c9 V  k5 M8 j
  这样无论菜单文字内容长度怎么变,都不会破坏原来的结构了。
2 Q9 j: A4 s$ ^7 y( H
" T7 y* ~" b1 Y6 s$ t2 n( a0 U  4. 当前菜单高亮显示
$ K1 Q) Y) c4 @6 z! w
& d! E* |5 V* {% k; s  如果高亮当前页面,这个有很多种做法,最死板的是在每个页面上显式的定义类。  S9 T& c. I; s" k% }" m
- p& W- w  I) \! P5 O
  但是对于web项目来说,页面多数是动态的,所以这样不是最理想的方法。7 Q8 G8 O! o6 ^1 s1 M  ^  H
8 O+ I0 s& N' y& T! u& S
  我这里采用的方法是CSS选择器的灵活使用,代码如下:  A6 j* m0 Q! _1 T2 l" K/ J
3 k: u0 p4 D' O" K9 v
  1.   #attendance#attendanceNavg,6 I& K1 `& W- R7 R* ?

  2. 1 i' t& h/ Z4 s7 K
  3.   #teach#teachNavg,+ H8 R7 `- {. G( @: _

  4. 7 z9 g& W! F3 {4 ]0 X1 f. f
  5.   #communication#communicationNavg,
    ' q7 \7 x( Z* k; {- w1 N
  6. ) J3 J# a7 q3 G$ M. |1 i, }6 ~
  7.   #system#systemNavg{- B* c" e7 k) o7 W6 @+ p
  8. ! H& L: n4 f- t1 X
  9.   background:url(../images/tab_right_on.gif)no-repeatrighttop;
    2 v! d" [5 i& i

  10. 0 d/ J9 c3 s" b
  11.   }% g! D* C5 I2 y- N

  12. * s( u  g2 E+ g! `  q
  13.   #attendance#attendanceNavgA,. B0 F' {4 w# m8 m9 F' h! D
  14. 4 L  f, T! h. ]( q
  15.   #teach#teachNavgA,
    - Y: \' g8 C4 U& i
  16. ; L" }* _7 ?# T- q5 M
  17.   #communication#communicationNavgA,; p! g7 k5 U& u

  18. % ^/ D6 E' L7 E* `4 I
  19.   #system#systemNavgA{
    4 Y) j& H) Q; @% D" s  `6 Z

  20. 0 P; F2 y( n( U: k5 a2 `
  21.   background:url(../images/tab_left_on.gif)no-repeatlefttop;1 c7 J" [" ?% j- w3 x

  22. # Y8 @& O$ `3 {) l8 ^. `- p- _- C
  23.   color:#0000ff;( N; v; Q$ m, C# a% {* Y4 K

  24. * Z+ s5 F1 n9 i9 B# _  e; w. H
  25.   }
复制代码

! P  A: r2 B& ~7 ]. V7 g- M' K
3 |3 f9 e" F; A+ J  在代码中,我们可以使用不同的id作为选择器,由于CSS中的选择器id的优先级将大于class,所以只要根据id配合上li上面的id,就可以达到动态选择高亮选中的目的。
4 n. K4 e/ L( b: i1 v. X
/ l0 ]7 w( f) G2 q) H  事实上,由于我们的页面都是动态的,所以id可以由后台生成,这样就可以通过id的不同组合非常精巧的实现了我们的需求。2 i# z4 z* `$ m' ^' @2 a- K0 H

- W: E* f1 y7 \+ a- }0 X  5. 小技巧' m* u( S7 G6 H/ \! q8 Q8 _
/ v9 m' E6 k4 y8 e) i
  最后可能还有一个问题你在想怎么实现的,就是高亮的tab如何把下面的横线遮掉的, W& l  @) A( S, i" Z7 ~, }" G

" [& [/ C! Y. u  很简单,图片上的小技巧。将高亮的图片高度设置为25px,而普通的图片设置为24px。然后通过padding,就可以将那根横线遮去了。2 \. c. h* B+ U. g, d. b; Y0 g# E5 ~

4 O& F* a5 {+ O. m  X: x  我们可以使用类似的方式,把二级菜单也做出来,这里就不详细叙述了。大家可以结合源码试一下。

0

主题

12

帖子

8

积分

1°伸手党

Rank: 2

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

使用道具 举报

1

主题

9

帖子

22

积分

1°伸手党

Rank: 2

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

使用道具 举报

0

主题

7

帖子

4

积分

1°伸手党

Rank: 2

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

使用道具 举报

网站简介

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