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

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

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

1

主题

9

帖子

8

积分

1°伸手党

Rank: 2

积分
8
发表于 19-4-7 13:51:32 | 显示全部楼层 |阅读模式         
首先看一下预览界面:1 ^, |" ^5 |7 u8 a! B
使用HTML+CSS编写灵活的Tab页 三联  . S# k. ~) V2 `' _' x+ E5 c
  下面开始讲述一下完成上述页面的步骤。
9 F! k$ v1 Z, f7 {  D  1. 构建HTML
; e( U7 V" d9 l4 U2 u
4 {; }7 e. u) k/ g: |! _. g  构建HTML是整个过程最基础的部分。我们构建HTML比较关键的一个原则就是“还HTML标签其本来的含义”。所以在这里,我们应该合理分析一下期望做到的HTML的结构的情况,并加以分析,选择比较合适的HTML标签,而不是采用非标准的Table布局或者充斥着大量div和class的布局方式。事实上,现在存在着一种误区,就是凡事采用了DIV+CSS的方式进行页面编程的就是Web标准的,其实这是完全错误的观点,很容易就导致了“多div症”(divitus)或者“多类症”(classitis)。3 m- d# X# r0 `) _8 i; i4 g( c4 _1 x
, e  E' I  s, r' j
  回到正题,我们分析一下页面样式,可以将整个Tab页分成2个部分,分别是一级菜单和二级菜单,他们有类似的特点,并以横向方式排列。HTML标签中的无序列表就可以反映出这种逻辑关系。所以我们分别采用2个无序列表来表示一级菜单和二级菜单。代码如下:
8 W0 p! {+ g9 @
  1. 8 P$ G/ H1 Y9 C1 d1 {
  2. <divclass="navg"> 
    : p- g3 s; _1 L. B. G/ M: W
  3. <divid="attendance"class="mainNavg"> 1 G: L5 g; g! ]5 L
  4. <ul> 
    $ y, }6 w0 [  u6 T1 d, _) i
  5. <liid="attendanceNavg"><ahref="http://cms.ddvip.com/index.php#">考勤管理</a></li> 
    % X. v+ V" e& }3 H
  6. <liid="teachNavg"><ahref="http://cms.ddvip.com/index.php#">教学管理</a></li> 2 @+ N% @; d% l
  7. <liid="communicationNavg"><ahref="http://cms.ddvip.com/index.php#">家校互通</a></li> 
    ' L7 U. A2 `" }: C5 p* H& l5 l+ D6 e
  8. <liid="systemNavg"><ahref="http://cms.ddvip.com/index.php#">系统管理</a></li> 
    + x% H; K; f% U2 E) l
  9. </ul> 
    4 Y7 a: S$ Q7 U
  10. </div>   + Q% E/ O% ]; z! C
  11. <divid="dailyAttendance"class="secondaryNavg"> ( U, k4 W3 h  t' ~. G7 }) g
  12. <ul> 
    + [% h8 ]" d4 S' z: L) ^$ [& y5 k
  13. <liid="dailyAttendanceNavg"><ahref="http://cms.ddvip.com/index.php#">当天考勤</a></li> / b4 H0 j3 [! W
  14. <liid="leaveApproveNavg"><ahref="http://cms.ddvip.com/index.php#">请假审批</a></li> 
    / f. {" w7 N( z3 J
  15. <liid="attendanceStatisticsNavg"><ahref="http://cms.ddvip.com/index.php#">考勤统计</a></li> 8 r+ j3 l; \( q9 y" b$ \' R. K0 T2 ?
  16. <liid="attendanceCollectNavg"><ahref="http://cms.ddvip.com/index.php#">考勤汇总</a></li> 
    4 L1 d8 {0 R7 E. v7 g+ p
  17. </ul> 
    ' S: g' b8 t! B- |3 P. @- J
  18. </div> 
    ) `/ w) o- ~+ ?) X+ R
  19. </div>
复制代码
2 k- K* j2 {' ^: b& Y8 P$ X7 s& V2 Q
0 w2 R; g- M) `' U. `& v3 U0 I( ?* t7 h
  其中,2个div将菜单级别划分开。其实在以后还会有其他的功效。此时,我们不妨View一下这张页面,我们可以惊喜的发现,这张页面就想Word文档一样,是可读的,这一点我们可以在整个过程做完以后再一次验证。
1 m) Z' q3 D: ?9 I6 q- o. D 1y.gif - Y$ u- F' a, [( `# I; o9 ?+ H

" ]1 _7 j7 g6 |+ f  2. 构建基本CSS' v( i) L& U+ u3 f- n

5 O' b* X) d) O  S1 d  先简单的让ul横向排列,这里面要注意元素float之后要注意清理% k6 b0 F9 Y: ]6 q
) @3 w9 j1 n6 e$ F5 b
  然后通过分别在LI 和 A 元素上应用背景来实现主菜单样式,这里有个比较重要的地方是A这个元素变成块级元素(display: block),这样可以便于我们下面做一些处理,也能使整个菜单应用到链接样式。6 x% b/ E9 O# s' Q0 ^8 H! l

; B1 g. {2 |! }, N( {0 j2 {( q  而其中的line-height,恰恰可以使A中的字纵向居中。text-align使得A中的字横向居中。 代码如下:
8 ?5 l0 O/ p. f3 X/ J6 m

  1. / Y8 t/ ^/ s1 Z. A4 ~: a* V
  2.   .navg.mainNavgUL{
    $ l6 J1 J, u7 g
  3. 3 D- x. G, F& {+ r
  4.   margin:0;  z# X( c- \+ z# V- i

  5. 5 v. `; U9 z, L. A; x  g$ T
  6.   padding:0;" r: \4 y5 E  |* d

  7. - |6 B0 ~, [' j/ [8 ~2 _1 R! o% N
  8.   list-style:none;8 P# o6 d/ U0 {6 G/ E
  9. * s. k$ Q( E) F
  10.   }3 M2 h/ |& w& U5 B/ Y2 `
  11. , l! f5 _7 J* w) g
  12.   .navg.mainNavgULLI{% {1 p! R# z$ y2 Y' K& `6 r2 \

  13. ' `, w4 ^# y) y
  14.   float:left;; Y) w( y! N4 V  H  \- p
  15. " B3 ^( i' `$ ]1 X& J
  16.   background-color:#E1E9F8;
    7 W& l+ Y% ~$ F

  17. , @7 e3 |$ R1 j' F2 @4 K
  18.   background:url(../images/tab_right.gif)no-repeatrighttop;
    3 s. ]2 e( w  q  I2 k3 B

  19. ) y- T0 \% u. X, q. @; a
  20.   margin:10px3px;, c8 w6 y( m8 O( U
  21. 5 W% G$ W+ [0 F1 J
  22.   height:25px;
    6 e, Z# i1 l2 [/ q

  23. 9 ?* }* R* n2 Q2 g) I
  24.   }
    3 t& y/ R/ Z6 _9 a3 ^3 O

  25. 4 }! n& E8 o% ~6 z5 x3 c3 q: F! i
  26.   .navg.mainNavgULLIA{1 ]- {, v% s; X+ g- T- y
  27. & \7 P6 Q1 q# q. G+ f1 H9 h
  28.   display:block;+ ]& n+ P/ t% ~' s% w, x
  29. 9 n# m% Y# [2 b$ ?5 K: {$ P
  30.   height:25px;+ D2 U4 W1 K1 H/ v

  31. 4 k3 ?8 J( o9 k9 u, C% k' f
  32.   padding:025px;" z" \6 @/ a2 Z5 b# h

  33. # M: X$ A; o: b6 l
  34.   line-height:24px;
    , C/ [2 V  s& Q4 u3 K
  35. ! F, V7 E1 N' j3 p
  36.   background-color:#E1E9F8;
    1 i4 _+ ]1 F6 ?# Y4 W+ i
  37. : M  F& u3 z) S6 h, r, s! b
  38.   background:url(../images/tab_left.gif)no-repeatlefttop;
    & f& F% n1 U: M! }/ g

  39. : D$ p* x3 \: j( {
  40.   text-decoration:none;
    9 y" Q' Z; s# r- o
  41. 6 ~3 j# T; S% a! `( h
  42.   float:left;. Z; @, r$ `! k3 @% [
  43. ; Y8 q3 d& z  M2 _' N# }! R% X
  44.   text-align:center;3 L; L2 J9 R0 j: v& L# o; o, q. F
  45. 9 q6 w0 \5 X1 d8 A4 B7 F4 B
  46.   color:#fff;
    $ h7 Z. J. @* o8 l
  47. 7 A. b1 U, O, t5 k+ z5 J+ D
  48.   font-weight:bold;- k! z' r, l( l( P4 P

  49. 3 Y0 g$ Q$ ~4 N5 a- q$ F$ `
  50.   }
复制代码

# p7 k# J3 a# j$ O, |- G7 u7 d* X, r; A! k1 A
  3. 使宽度自适应4 d6 z. O" L# ?' s# m3 h7 ^6 N

" {& f+ v1 J% P' y6 w1 e5 k  我们在这里使用滑动门技术来做宽度自适应。下面简单介绍一下滑动门技术
: o( U' c" H$ T9 u2 g4 p  b/ ]. K4 E- Q3 Z, m. z
  简单来说,就是在LI上应用一幅大图像背景,并让这个背景居于右侧
+ o7 a: j3 |5 {9 l 1gif.gif 0 q6 ^- m2 w: w# M+ x, Z0 k: }
% p9 C. k  a! ~5 e3 N) @0 p7 ^
  然后在A上应用一个小图像背景,并让这个背景居于左侧,遮住大图像边缘( N, Y5 a- k4 |! T9 q9 _8 M0 U0 t

3 R4 U: g/ t+ f9 Z4 H- ]+ I( j+ r) p4 {1 }- x" w
  这样无论菜单文字内容长度怎么变,都不会破坏原来的结构了。
0 Q9 |4 A& O( }; c" W3 L& r+ h2 v* f* @1 m- j- I* s
  4. 当前菜单高亮显示8 Q5 t/ b! B3 Q% ~: V

6 v: X: Q" E+ _) v% j  如果高亮当前页面,这个有很多种做法,最死板的是在每个页面上显式的定义类。& T: L4 W& B4 A
) ]' Q" N# \2 d$ I' R
  但是对于web项目来说,页面多数是动态的,所以这样不是最理想的方法。) k' p$ H& P. K' x7 a
0 O* G) R" {4 M5 P% h
  我这里采用的方法是CSS选择器的灵活使用,代码如下:
4 d0 ~$ W3 y* c( U5 v- K* K9 ~1 L8 ^2 ]; |' y9 ^# h1 F2 _
  1.   #attendance#attendanceNavg,
    * u0 _% F+ G0 }2 r7 m
  2. 3 s" |6 i0 n7 `( |
  3.   #teach#teachNavg,
    5 s, s# x1 e7 w7 B+ ]) M+ |
  4. , S5 _  l  _6 K
  5.   #communication#communicationNavg,
    2 s4 d; Q, m8 h4 c2 `7 I% w
  6. % g( {2 C& d5 u& m+ p2 o7 C
  7.   #system#systemNavg{
    * |0 ~4 ?8 [! I; X. }1 B" C
  8. & F* E4 r% T- T! J  P& [
  9.   background:url(../images/tab_right_on.gif)no-repeatrighttop;0 W' B; b5 C5 B* n6 G% J

  10. 5 @0 ^# T2 m* _
  11.   }) a# G6 I/ q. L

  12. ; z+ A/ c+ p# R/ u
  13.   #attendance#attendanceNavgA,
    7 Q: b6 }/ g! q' v2 w' p$ I
  14. ' X- B0 I( k* b: ~
  15.   #teach#teachNavgA,
    7 d7 {3 D+ o& I+ g
  16. : w! D0 K8 {# Y9 d- l5 G
  17.   #communication#communicationNavgA,
    % b7 ~# |/ ^+ I  E/ b; J
  18. * z) M5 i3 T# ~# [. c& p: ?4 m
  19.   #system#systemNavgA{- x7 R# z" Z" B6 @+ c2 j4 v

  20. : R" G8 _; B6 v5 X# T
  21.   background:url(../images/tab_left_on.gif)no-repeatlefttop;
    # I4 [) H7 A6 S6 t- R' p

  22. 1 g: o& M/ a: L$ \' }1 f/ f
  23.   color:#0000ff;! T6 T3 k6 j. z# Q; \& r
  24. $ s: U* D% f+ f% t4 T- O3 v
  25.   }
复制代码

$ R/ X4 R& n4 f3 F3 }  S% N
0 i: K$ y3 Y. P+ z  在代码中,我们可以使用不同的id作为选择器,由于CSS中的选择器id的优先级将大于class,所以只要根据id配合上li上面的id,就可以达到动态选择高亮选中的目的。+ \& V; ^% N# b" j' r# ~
% m" ?) R! u' Q( T0 {0 `) ]
  事实上,由于我们的页面都是动态的,所以id可以由后台生成,这样就可以通过id的不同组合非常精巧的实现了我们的需求。
" u; v9 j! W  {
5 U0 z1 s( ~- x8 i5 Q. `  5. 小技巧
1 ~8 j6 E8 A+ A7 j  x) ]1 k$ G' N5 w5 e1 Q/ y+ k' G
  最后可能还有一个问题你在想怎么实现的,就是高亮的tab如何把下面的横线遮掉的$ z% Z9 U: O2 a$ t
' H' a- \" m4 H. [) Z& u
  很简单,图片上的小技巧。将高亮的图片高度设置为25px,而普通的图片设置为24px。然后通过padding,就可以将那根横线遮去了。
& S; \* T$ c1 p0 z8 n
  B- j, |. @8 w# |4 N  我们可以使用类似的方式,把二级菜单也做出来,这里就不详细叙述了。大家可以结合源码试一下。

0

主题

14

帖子

8

积分

1°伸手党

Rank: 2

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

使用道具 举报

1

主题

12

帖子

22

积分

1°伸手党

Rank: 2

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

使用道具 举报

0

主题

9

帖子

4

积分

1°伸手党

Rank: 2

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

使用道具 举报

网站简介

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