我爱电脑技术论坛 » 网站建设 » Div+CSS布局入门教程二

炉火纯青 发表于 2008-4-21 16:10

Div+CSS布局入门教程二

关于以上CSS的说明（详细请参考CSS2.0中文手册，网上有下载）：
C#Z`p
D)x
f[$h4_Iu^ fZ 　　1、请养成良好的注释习惯，这是非常重要的； 9mT3i |3Zo9r
D1m.v1WR{.Y({
　　2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；
5a[sWW7MC#n+\
A2| ?2G ]S5z} k_ 　　3、讲解一些常用的CSS代码的含义：
bb"u6URG,_Ms ?R&b,N}'Fd%yA
　　font:12px Tahoma；
6a9w Cjl/h0H 　　这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式； X@$F,MZ'H gM"iW
G)p z4J%jmc7C
　　margin:0px； %kU
@[E^#F
　　也使用了缩写，完整的应该是： 0x CT*t*zm:l+\

3ye]7w'gC)\)|.Y 　　margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px )@ v1A8MwjQ/io4F$f
　　或 f `xT
x["o
　　margin:0px 0px 0px 0px
2z `mK {L aVu&Q+sYWQt
　　顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
l]5R _I]+GQ0@K 　　以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，
8|$F:s!Wm)?!{.ai W6P2W2TIlg
　　另外还有以下几种写法：
^fxx&C+| 　　margin:0px auto；
m-lV7@4O!n4B 　　说明上下边距为0px，左右为自动调整；
Z/{4c
@M,y1?*tT 　　我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的， j vaJ
m
　　只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
S.e6`Y9YC? 2]![lk
r
　　text-align:center M ]|2d-i6~
　　文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。 EL/k [:j;GQv#y]
m,B2H#K3\b
　　background:#FFF yBK/a7Gr
　　设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
-HX9s#XP 　　background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式： 1r
R.kb%rX
　　background:#ccc url('bg.gif') top left no-repeat； ^(b dfU5z-h
　　表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
\*yL*deC6U U 　　top left T eHv:j_#kuU(R[
　　表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
p"QLxe pHc7b2v4l 　　top/right/left/bottom/center
%CE$G.m/@1j&{)j$@ 　　用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用 d9Y l4X8s
m;Dw2I-c3_
　　background:url('bg.gif') 20px 100px; 2V%SP\(T O;J%D$Q^
　　表示X座标为20像素，Y座标为100像素的精确定位； #[v
X-jN
　　repeat/no-repeat/repeat-x/repeat-y {&P1O*D;J ]fD(s}c
　　分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。 M8C;w.U2m M'X
V!nuZMb y
　　height / width / color
)cYO&d@"t 　　分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
guY*l Q^3[ 4、如何使页面居中？ VIb8hv?"?+yJ$Z&Z

s\i9D-Vo 　　大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？ wf;]BxU
　　是因为我们在#container中使用了以下属性：
P| ]8|$@| 　　margin:0 auto; %wbV,{2p;n(S
R v h+q
　　按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
l6M v#y,}7y ? 　　如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
6v3G;I5E~0Y0@] 　　通过margin:auto我们就可以轻易地使层自动居中了。
6_-nG5E,H*lO(o q0e'EN(Xv]@b`$O
　　5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。

}s3{6sE ct
bG/T| Ds/t/}bu7D3j T 　　当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。 arWI[
r5k)\+e&U^(E
　　在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：
%g{+`+l(L&px\ 9^ vH6Isq3K b
z ]5n"j+B0K+[jfp
　　/*基本信息*/ e*E };~9M-r])mFs
　　body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} 9Jmb E;B|p
　　a:link,a:visited {font-size:12px;text-decoration:none;} LRI8TfzZ+aSH
　　a:hover{}
v/xi)d}G8WSEl} W 'P'Sc;^5p u_&B6G
　　/*页面层容器*/
J%\_Z
m 　　#container {width:800px;margin:10px auto}
#G-WG){BPf?e 　　样式说明： 'JrgR+_7QsB-f

n+d)zo1]0IS9~ q 　　a:link,a:visited {font-size:12px;text-decoration:none;} ~G1}\
M9D$CO
　　a:hover {} 6o-T|6P T jei-R

H5? L(p*F3r e 　　这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。
Y(wVgu"S|1H Ba6Z#V8aW{
　　#container {width:800px;margin:10px auto} B)Jb?}i

0{ mU4^b7K#m+Do 　　指定整个页面的显示区域。 LR
{Xh)jj
　　width:800px指定宽度为800像素，这里根据实际所需设定。
3e(]X6Wd 　　margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。
TD%I3^-o2M {9u[ 　　上一章中我们讲过，对层的margin属性的左右边距设置为auto可以让层居中显示。 :db7EV7|G~t
iR/HE's8M
　　接下来，我们开始制作TOP部分，TOP部分包括了LOGO、菜单和Banner，首先我们要做的就是对设计好的图片进行切片，以下是在FW下完成的切片：+ys8l;hy?
[attach]19032[/attach]
}6e}LR _^a Bpn6Z-c
　　我将TOP部分切片为两部分，第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色，这里我于是将这一部分保存为GIF格式，调色板选择为精确，选择Alpha透明度，色版为白色(此处颜色应与背景色相同)，导出为logo.gif，图像宽度为800px。
EXu+`F4I%v 8D)|
gS4k
　　到这里，有的朋友就说了，* 为什么要使用GIF格式？使用JPEG不是更好吗？
PsSI)WD i 　　因为GIF格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。 pv4f nPH)y-t
4\/])Ay#nZ
　　* 接下来的Banner部分还能使用GIF格式吗？ )C.Hp5D U b+Y \
　　答案是不能，因为Banner部分是一个细致的图片，如果使用GIF格式颜色会有太大的损失，所以必须使用JPEG格式，将文件导出为banner.jpg。 c
V:X*Fv Cn*r:v

1Gg+AEwT 　　* 合理的切片是非常之重要的，因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。
C,Uq.\ Py!n &}1~9Rnodb
　　切好片后，我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下：
]7p
dPdE5^ b,r rl"t,]:jo1R ^y"S
　　＜div id="menu"> .S#U0s4~{)TDT-H
　　　＜ul>
#SA*[/n7s 　　　　＜li>＜a href="#">首页＜/a>＜/li>
-}.N:ULJ Zy)u7?;s 　　　　＜li class="menuDiv">＜/li>
M:tC!c;N 　　　　＜li>＜a href="#">博客＜/a>＜/li>
~'s n^0z 　　　　＜li class="menuDiv">＜/li> 3egH6EQm5a/P2v/u
　　　　＜li>＜a href="#">设计＜/a>＜/li>
4f"yl"IS!i"d 　　　　＜li class="menuDiv">＜/li>
7Z_&gC2q7yC!?I ZM 　　　　＜li>＜a href="#">相册＜/a>＜/li> 5KCG%JajEx$nEt
　　　　＜li class="menuDiv">＜/li>
SP$IA7|
　　　　＜li>＜a href="#">论坛＜/a>＜/li> 3Q:uFs)R4U%D7Qn
　　　　＜li class="menuDiv">＜/li>
{0WAbr~]4U
　　　　＜li>＜a href="#">关于＜/a>＜/li> &jxa6|o1GR@q!M
　　　＜/ul>
H&Zi!M1n6b5I 　　＜/div>
j'W/kX0|aUg 　　＜div id="banner"> *[1@E7R+e"Y;q/U
　　＜/div> :v I U(_X/K&s-T9x
　　为什么要这么写呢，因为对菜单使用列表＜li>形式，可以在以后方便对菜单定制样式。
6mJ}I!EoP $IA7t`9pV7X ~f
　　而为什么要添加以下代码呢？
tU~0jNFcO1_
d"Rf 　　＜li class="menuDiv">＜/li>
3k`KL2j0}K;fp9Vqz 　　插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。 6NkT)mi G0QH"{
d%_ P P[
　　然后我们在css.css中再写入以下样式： 6B
O,Ob+L
g

+ex9sh\$b3^ 　　/*页面头部*/ }(E{.wp!\(l6Y
　　#header {background:url(logo.gif) no-repeat}
&Xj.?.F's0s6Fd-? 　　样式说明： I.j1I9p DZ!}
　　#header {background:url(logo.gif) no-repeat} )DUZUX4v\6xp3?s$]
　　给页面头部分加入一个背景图片LOGO，并且不作填充。

查看完整版本: Div+CSS布局入门教程二