返回列表 回复 发帖

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

四、页面制作(1)----用好border和clear$ u# K5 t7 ^0 Q7 S, i& t. F

8 G7 F% {9 G' Q  由于找工作找房子的原因,隔了这么久才能开始写教程,心里感觉很对不起一直在关注本站的朋友,今天是找到房子的第二天,于是赶快继续写教程。
. V8 ]7 z; ]5 O2 s5 Q  z
4 c/ r2 G7 L$ c3 U2 `  这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。" n# u$ s5 c) a2 y8 ~) b+ J
$ l3 \/ r) d( B4 l9 Z& f+ b
  首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></td>中加入这么一段就可以了,你可以试试:* A- {, B, K) K  ?
  <div style="border-bottom:1px dashed #ccc"></div>" }$ M; t9 I+ B5 H* G

7 a7 N3 L/ }- i! k9 t" t  大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。$ n$ B+ d5 ^8 ^9 |
程序代码6 y2 x" P; t4 J* g1 Z  E+ ~# F; O
<div id="banner"></div>* ~+ y) B/ d' w' u& I1 D$ r3 h
  以上代码便可以实现设计草图中的banner,在css.css中加入以下样式:. P8 D: \4 t# H0 F/ n" z) T% ]
程序代码
6 o1 O. X( r$ y& W8 I; W8 X#banner {
4 V! G2 R# ^8 r( ~8 W% G2 T    background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
9 d2 y; ~5 a2 W+ x. H    width:730px; /*设定层的宽度*/
! u1 H, D8 V- w  _5 ~) @    margin:auto; /*层居中*/+ a7 N8 ^8 P, u# N6 V$ P
    height:240px; /*设定高度*/" R5 i, [% A' Q' `$ l3 Y
    border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
9 r  X. o6 n# H    clear:both /*清除浮动*/
0 p0 h$ y5 m; m' i}
; b" u" T. g: F* j4 o! _2 i  通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。
0 x' O; s$ ?# w, w; F  U2 {% G: w/ K
  另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。
( D( Z3 y( P$ ^8 y  d! H4 _程序代码6 K, I& `: S. \2 N( T- ~
<div id="pagebody"><!--页面主体-->
8 ?" u& I; ?+ b0 M# W$ H    <div id="sidebar"><!--侧边栏-->
+ a4 L" m3 Q. N( [, p& Y( m, u    </div>& P  H0 L  \2 n6 D7 B
    <div id="mainbody"><!--主体内容-->) Y2 p4 {0 b: C& |/ P
    </div>" u8 n) b) |; m: i1 [- o
</div>
7 e( u* O+ t4 K' x, P  m  以上是页面主体部分,我们在css.css中添加以下样式:
! {5 c$ T& {5 k. T% J3 j) b程序代码
' p: D* g8 S, j#pagebody {
) H+ F, ]) N; t: W& a    width:730px; /*设定宽度*/
- z! X" t( r% S# K4 X    margin:8px auto; /*居中*/
4 `) @. E& d, f! {8 U2 ~+ ]4 r}0 @. g& Q6 t; A0 `
#sidebar {
' L  L1 w/ s! x9 W    width:160px; /*设定宽度*/
2 [" ^. ~5 `5 S- G: f7 O/ E    text-align:left; /*文字左对齐*/8 K6 [- J( P! A
    float:left; /*浮动居左*/8 b; o7 {6 Z8 }/ Y
    clear:left; /*不允许左侧存在浮动*/) _) p7 e* l, u% D
    overflow:hidden; /*超出宽度部分隐藏*/' W8 d1 j! t% ]' b$ S
}
4 V- q2 m* z5 p" b: w9 u- b, V#mainbody {; A# `2 ?* ]  ?/ ~
    width:570px;
* W' b0 f8 K8 Z  [8 p    text-align:left;8 O; S4 l# Q( R0 C
    float:right; /*浮动居右*/; T2 }+ ]/ w. p
    clear:right; /*不允许右侧存在浮动*/) r4 N( |: l' S/ A! S" t7 m+ Y6 ]! g
    overflow:hidden3 X" N/ \3 W7 ^% n
}. t" C( W  i6 W2 H( e
  为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:
5 J% l& s2 q1 ]8 X: C程序代码
3 m' Q- V( z( Q* n: N9 b7 m. e  Iborder:1px solid #E00;
1 ^, ~: u2 S6 Q. H( Wheight:200px- e( V. c+ |5 m: D9 V5 e0 A
  保存预览效果,可以发现这两个层完美的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160+2(border)+570+2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。8 _# Q. _5 n  R: I/ U
, X" P2 a$ ]  m; K
- g/ S3 M1 I! }* A
# C" b, D5 }9 Q, w! e, H
而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。
. S# u5 {, R$ i
5 o$ U6 \6 E9 N$ [% e  CSS中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
太小气了啊,想复制一下,居然有干扰码
鄙人的芝麻小站关了...
小乌乌,,用采集嘛...嘿嘿..我都从你那里采集好些了.
怨去吹箫,狂来说剑,两样销魂味。
返回列表