返回列表 回复 发帖

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

四、页面制作(1)----用好border和clear# P: Z9 N: D" y( A" e% l
$ M. ?' N& B% u& K+ p% p
  由于找工作找房子的原因,隔了这么久才能开始写教程,心里感觉很对不起一直在关注本站的朋友,今天是找到房子的第二天,于是赶快继续写教程。
& H, W% n) T& A) \8 ^# L! ^' a! Y2 V  z6 j7 g
  这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。
0 Y( ~0 [7 X7 f* Q: _7 o
9 C& O' l4 C" [  m, F/ [  首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></td>中加入这么一段就可以了,你可以试试:- g! ~) x' M. q5 J5 F$ h  d
  <div style="border-bottom:1px dashed #ccc"></div>
) B3 q- i% o6 i2 c
5 v% z, F* ~+ {4 X; o  大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。3 l8 w( K2 I, M: f
程序代码
7 ]0 V: e# I; i" c0 n, v2 X9 o0 ^<div id="banner"></div>
* p0 d1 q" v% O4 ]  以上代码便可以实现设计草图中的banner,在css.css中加入以下样式:
* q9 a2 R* ]: G9 G0 i( F( o8 ~# T4 e程序代码
1 `5 F- E( m8 _& p#banner {1 q. g6 z5 D; ]6 P
    background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/7 {; b% k; W5 _4 Q, v" ^$ v6 [
    width:730px; /*设定层的宽度*/9 w& R0 c1 L7 Q1 t
    margin:auto; /*层居中*/9 N5 ]& Q# O: y0 |7 a
    height:240px; /*设定高度*/1 F/ u& X0 a- F* s& _4 X
    border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
( j! P+ r" T! p; a3 d* [    clear:both /*清除浮动*/
* e) H$ D( B3 A7 \& \% D: n}, d) u% C8 X" t9 @* y5 R& @
  通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。" u- P) j0 b) a$ i! m  b  A
. X- k1 p0 V5 k! a7 f3 @
  另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。& Q  j, E. X6 T2 L( h
程序代码
% g! x2 E; F1 V3 x' U; ~% d9 t: X<div id="pagebody"><!--页面主体-->: i" Q8 u; L  p8 `/ e: k$ s/ Q
    <div id="sidebar"><!--侧边栏-->& h- q5 c) ^4 t8 n, Y1 v
    </div>
1 P. Q2 K) `$ L  n    <div id="mainbody"><!--主体内容-->
9 v- g! x7 C2 C' y* t    </div>: A1 z' n$ n4 z4 ~$ r
</div>
% B, G: R7 W) Y5 c  以上是页面主体部分,我们在css.css中添加以下样式:
0 Z% H% \$ H! Y. r! F* F& g程序代码$ S) @3 P, X8 |. ?# x
#pagebody {( W  k! t0 T8 s$ N4 |
    width:730px; /*设定宽度*/
' U, z) p* l. e. `6 _. @    margin:8px auto; /*居中*/
( f) g6 U8 `6 L/ P+ `3 B: U' O}
5 ]: N/ K' _# D#sidebar {
9 b' Q/ e, K0 }" S3 l5 V, p    width:160px; /*设定宽度*/: E' v) P% z5 y  l
    text-align:left; /*文字左对齐*/- Q* `6 K  [4 M. a  N  ?
    float:left; /*浮动居左*/
; _( _& F' o; M: }5 u) a1 A9 ^" C    clear:left; /*不允许左侧存在浮动*/
* D* r0 m* u" H7 f/ ~    overflow:hidden; /*超出宽度部分隐藏*/
8 M# U+ U2 v" K+ ^- H+ z}
2 r) L7 ]9 j+ [' k) _#mainbody {, j' ]7 o1 x) K
    width:570px;
9 F( d) \9 J2 _    text-align:left;8 y1 t% |: ]5 `& E" t* p" C
    float:right; /*浮动居右*/
6 y; g6 V  b+ T1 v+ F    clear:right; /*不允许右侧存在浮动*/
  ^9 l( e' @+ A% F" Y, p    overflow:hidden
4 u9 v  k6 o- x& Z5 B/ v6 n9 w9 d- M}
2 x$ ?' Q, ]5 `8 S: |9 m, h  为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:
; @$ @4 C0 R, c4 S/ k( @, }, f9 S程序代码
2 j+ t: X4 }" M. d  ?1 Sborder:1px solid #E00;
$ v/ ~* C* ?" [% B: w# J! Zheight:200px
* O6 C' Q6 f1 n* P  保存预览效果,可以发现这两个层完美的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160+2(border)+570+2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。
; k8 ]/ u5 @2 }3 }/ d6 C* w3 k
: h- v& {0 L% q# }9 r! d/ S& f1 T5 E  U

) o+ Y* `2 r" i, O5 o# O而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。- Z$ y5 g3 K5 ?) f5 k5 A2 ?/ B
( P: I% j; M- i! D
  CSS中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
太小气了啊,想复制一下,居然有干扰码
鄙人的芝麻小站关了...
小乌乌,,用采集嘛...嘿嘿..我都从你那里采集好些了.
怨去吹箫,狂来说剑,两样销魂味。
返回列表