返回列表 回复 发帖

Div+CSS布局入门教程(五)

四、页面制作(1)----用好border和clear- d- U" n, Y4 o! Y9 t! _' f

$ |6 {1 {3 X" v9 ^" s9 u$ D  K  由于找工作找房子的原因,隔了这么久才能开始写教程,心里感觉很对不起一直在关注本站的朋友,今天是找到房子的第二天,于是赶快继续写教程。
1 [. c+ E$ }5 c- y6 m# A* R4 f' A
( c5 Z! f/ O# r, T/ }5 _. d  这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。8 c3 |8 |+ E6 k; X9 R; u

  P) U! ]0 w0 c  \; y2 _  首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></td>中加入这么一段就可以了,你可以试试:4 E. Q( s. n; _7 {" u
  <div style="border-bottom:1px dashed #ccc"></div>
: N4 d# o2 x. u+ X! `- G) B4 G2 A& k/ v! Z
  大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。* p$ a% r$ L$ a7 K" y
程序代码4 a" G" Y: L8 C  t# m6 y0 }8 {$ B
<div id="banner"></div>
" g% c# d% S; S+ K' m* c' h  以上代码便可以实现设计草图中的banner,在css.css中加入以下样式:' l" o" x: L: h8 r; K3 X' V
程序代码
. c5 b; n6 Z, k% s; C9 |  C$ O* D9 v#banner {& h8 s2 ^; R7 I& l0 D) W+ d
    background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
7 e: R% Z& S8 s# @) [* N% h4 k* }    width:730px; /*设定层的宽度*/# B3 h4 i) p" U5 v0 h- T
    margin:auto; /*层居中*/
3 Q- W9 N+ w' H* ^( n% S, Y    height:240px; /*设定高度*/
4 g: g# U; `% \5 H: S1 f0 r8 |    border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/; I. B' ^2 k$ }7 q6 z5 P( S. G
    clear:both /*清除浮动*/4 y# l) T& ^6 S; ~4 Z& C
}
% t! R7 U, q; f9 o* p1 ^) g  通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。: _6 ?" |5 J  |" y! A- f

& P9 W! j$ w, a+ Z+ p  y* z  另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。/ p( Y6 b& e! _- w, |
程序代码
. o8 W) |; S( n  r6 a( K! ~; w<div id="pagebody"><!--页面主体-->3 D- p# D; H8 u3 D
    <div id="sidebar"><!--侧边栏-->& O# C# N8 G5 R1 c
    </div>) n1 T8 b  [1 H+ P$ v- r
    <div id="mainbody"><!--主体内容-->
8 S5 v: W+ o( r1 e: `! _    </div>0 L5 n# Y$ f1 N) J, |& h" W
</div>
  t1 v' u1 K5 I: F% P  h  以上是页面主体部分,我们在css.css中添加以下样式:* p6 k- `/ p; F9 p+ K+ `9 V
程序代码
5 k: N- E" [7 |+ g- G8 d3 w& U#pagebody {
" g* x/ m; ?# }) \1 x+ V% U    width:730px; /*设定宽度*/
) t0 e+ N8 M" w5 P- r    margin:8px auto; /*居中*/
7 r7 t0 K- R( V" o+ Y}
0 M& A( L- p# O  ^% ^#sidebar {. V- @) l. o4 Y- I+ o9 c
    width:160px; /*设定宽度*/
0 [3 _1 t. y6 n0 H5 j4 z) P5 T( g    text-align:left; /*文字左对齐*/- l( L. U, [# q5 d7 P+ }
    float:left; /*浮动居左*/
& |) j. m5 G' V* y    clear:left; /*不允许左侧存在浮动*/' T6 ]* q& j: M: }
    overflow:hidden; /*超出宽度部分隐藏*/2 j/ t; ?- H0 b0 B
}$ Z0 D+ g. T$ K9 H+ X: j3 g8 R- @
#mainbody {
2 ~1 a( x3 c6 H% r7 J    width:570px;# ?5 q6 y6 n( X% N) T* E2 t4 n4 o
    text-align:left;
1 a- x, f6 H8 p* s/ N- Z    float:right; /*浮动居右*/, }" f. ^" x1 I% u
    clear:right; /*不允许右侧存在浮动*/
! R6 h7 d; v- N; h& Z9 v4 @    overflow:hidden
1 d, F& I3 J7 o& N; B/ t5 G4 W}6 P+ R3 U( X9 x& z
  为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:! \6 v& Z, L8 p& c/ X
程序代码
4 ?8 @% X, i8 `2 M$ Mborder:1px solid #E00;6 ^+ s7 R- u  J
height:200px
2 j' H1 ?, F; t% d) ^. A  X  保存预览效果,可以发现这两个层完美的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160+2(border)+570+2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。8 `8 |6 y3 U; S
/ T. e; b: A- \$ }% l4 l+ N+ |/ d

& k1 N& M8 Q' k* c5 }5 x$ M5 e5 p6 k1 n( V( }' M+ B; J1 j
而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。1 ^( S$ v/ C6 `6 K! n

6 Y) h  J( E! o, P' t  CSS中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
太小气了啊,想复制一下,居然有干扰码
鄙人的芝麻小站关了...
小乌乌,,用采集嘛...嘿嘿..我都从你那里采集好些了.
怨去吹箫,狂来说剑,两样销魂味。
返回列表