返回列表 回复 发帖

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

四、页面制作(1)----用好border和clear
9 o1 i9 K9 x7 G# Y% y5 w* z
- g1 d- q( y- }' r0 n/ _% b  由于找工作找房子的原因,隔了这么久才能开始写教程,心里感觉很对不起一直在关注本站的朋友,今天是找到房子的第二天,于是赶快继续写教程。+ L' I3 J, g7 ^& A4 A5 Y9 U3 V; g8 [8 H
$ d* l: T! H4 y& s
  这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。
1 u/ X$ e/ t, X4 J; q% b7 q6 m% ]( |/ k& u
  首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></td>中加入这么一段就可以了,你可以试试:6 E% Z0 H1 C' n0 X6 M% G
  <div style="border-bottom:1px dashed #ccc"></div>% g! P& K; L0 Q0 I# q% q' C* e
) f) m% n8 z# r, I$ r( x: a
  大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。( ?4 M3 D; ?4 x
程序代码: c, F6 D. W' ]7 M2 s: F% b
<div id="banner"></div># \/ A, m8 `3 D+ J
  以上代码便可以实现设计草图中的banner,在css.css中加入以下样式:% J+ Y2 m" }: J9 P
程序代码
0 X& X" b, m) s2 U& q# h#banner {
# a3 p3 ~1 S1 e" a: E% D    background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/2 D6 t+ Z0 I! J" w; b( \
    width:730px; /*设定层的宽度*/6 v: [5 `5 p- x
    margin:auto; /*层居中*/' ^8 M/ P0 K8 H0 |0 I/ V- a
    height:240px; /*设定高度*/
  C% U8 g  J: {& g    border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/# _. @9 b# r' J0 a6 h1 o( |! r
    clear:both /*清除浮动*/
: d" [; d+ L2 d  M; P" i4 }}1 K" V: W( [" B/ f
  通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。
& \5 y3 O- C/ T) Z, y
$ k0 z# `3 |5 {, m7 N5 R  另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。2 Q- t6 q+ F. d& W* |/ F
程序代码+ B& q; G) i% f5 T- h
<div id="pagebody"><!--页面主体-->3 Q5 v4 ?% `- ^
    <div id="sidebar"><!--侧边栏-->- ^& A" s1 y/ n. I% Q) F
    </div>
+ B; _. H0 `: e! U* G: E    <div id="mainbody"><!--主体内容-->
3 V( @8 o$ V7 B, `: W3 N    </div>5 ]6 D4 S0 }, g$ v1 i3 }% S
</div>+ a! h. w& c, b
  以上是页面主体部分,我们在css.css中添加以下样式:! I% Q. {; {# D" t! n: r
程序代码5 ^6 Y6 e& q0 M; E" a% O; C6 z
#pagebody {
, V$ K. x% m4 s6 K6 [% ~' F    width:730px; /*设定宽度*/+ D- k" T7 j2 i3 c  w8 J6 H" ], j
    margin:8px auto; /*居中*/
, L* a" [, ^' y}
7 U) z% ^: z* Y* o* K#sidebar {
& j+ W+ P- S/ M# S    width:160px; /*设定宽度*/
: G% w+ M6 E. m% x3 N0 P) y    text-align:left; /*文字左对齐*/
3 h1 E/ Z7 V- g5 Q    float:left; /*浮动居左*/( S+ D, a2 f# l8 N" E% [
    clear:left; /*不允许左侧存在浮动*// A, G9 L8 v; L' \: O4 i
    overflow:hidden; /*超出宽度部分隐藏*/3 D9 B! P; v8 g
}
0 I3 \) ~) k8 q' r#mainbody {  h- A5 w" q2 |( ^
    width:570px;7 G& r$ N6 E. _2 W; P/ M
    text-align:left;
4 P5 h* i- i) k) g$ b# Y# ~    float:right; /*浮动居右*/" G5 Q7 y' D, C% N( `7 a! G
    clear:right; /*不允许右侧存在浮动*/
* E. q1 c) h- l/ N) W/ l    overflow:hidden# k8 n) x1 A3 S! C- t
}
  V# ~6 d8 `, D. s) [! X9 x  为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:/ z" r3 n8 D* l7 I" {5 w
程序代码
* F4 R4 ]& [! R* v3 a3 R; ~border:1px solid #E00;
6 H" P0 C) E; Z- z1 T* c4 D: cheight:200px
- B7 k' j" _! B% w* ?  保存预览效果,可以发现这两个层完美的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160+2(border)+570+2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。( _+ `! g6 J% i9 S, z

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