DIV+CSS布局快速入门.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,PHP+MYSQL,动态网页设计,主讲人：张瑞林,联系方式：,Email:12590,1/9/2026,DIV+CSS,布局快速入门,理解,CSS,盒子模型,DIV+CSS,布局快速入门,1.,构思（页面整体外观）,2.,勾画（,PhotoShop,或,FireWorks,）,3.,分解,4.,画出页面布局,5.,构建整体,DIV,结构,6.,编写基本,CSS,代码,7.,对每一个部分进行详细制作,DIV+CSS,布局快速入门,1.,构思（页面整体外观）,网页设计第一步就是构思，构思好了，一般来说还需要用PhotoShop,或,FireWorks,等图片处理软件将需要制作的界面布局简单的构画出来,DIV+CSS,布局快速入门,2.,勾画,DIV+CSS,布局快速入门,3.,分解,DIV+CSS,布局快速入门,4.,画出页面布局,5.,构建整体,DIV,结构,Body,#container,#header,#pagebody,#sidebar,#mainbody,#footer,6.,编写基本,CSS,代码,body,font:12px Tahoma;margin:0px;text-align:center;background:#FFF;,/*,页面层容器*,/,#container,width:100%,/*,页面头部*,/,#Header,width:800px;margin:0 auto;height:100px;background:#FFCC99,/*,页面主体*,/,#PageBody,width:800px;margin:0 auto;height:400px;background:#CCFF00,/*,页面底部*,/,#Footer,width:800px;margin:0 auto;height:50px;background:#00FFFF,/*,基本信息*,/,#Sidebar margin:5px;width:160px;height:300px;border:1px solid green;,float:left,;,#MainBody margin:5px;width:510px;height:300px;border:1px solid#000;,float:right,;,6.,编写基本,CSS,代码,常用的,CSS,代码的含义,font,:12px Tahoma,；这里使用了缩写，完整的代码应该是：,font-size:12px;font-family:Tahoma,；说明字体为,12,像素大小，字体为,Tahoma,格式；,margin,:0px,；也使用了缩写，完整的应该是：,margin-top:0px;margin-right0px;margin-bottom:0px;margin-left:0px,或,margin:0px 0px 0px 0px,顺序是 上,/,右,/,下,/,左，你也可以书写为,margin:0(,缩写,),；以上样式说明,body,部分对上右下左边距为,0,像素，如果使用,auto,则是自动调整边距，,另外还有以下几种写法：,margin:0px auto,；,说明上下边距为,0px,，左右为自动调整；,6.,编写基本,CSS,代码,常用的,CSS,代码的含义,text-align,:center,文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。,background,:#FFF,设置背景色为白色，这里颜色使用了缩写，完整的应该是,background:#FFFFFF,。,background,可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：,background:#ccc url(bg.gif)top left no-repeat,；,表示：使用,#CCC(,灰度色,),填充整个层，使用,bg.gif,做为背景图片，,top left,表示图片位于当前层的左上端，,no-repeat,表示仅显示图片大小而不填充满整个层。,top/right/left/bottom/center,用于定位背景图片，分别表示 上,/,右,/,下,/,左,/,中；还可以使用,background:url(bg.gif)20px 100px;,表示,X,座标为,20,像素，,Y,座标为,100,像素的精确定位；,repeat/no-repeat/repeat-x/repeat-y,分别表示 填充满整个层,/,不填充,/,沿,X,轴填充,/,沿,Y,轴填充。,6.,编写基本,CSS,代码,如何使页面居中？,将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？是因为我们在,#container,中使用了以下属性：,margin:0 auto;,按照前面的说明，可以知道，表示上下边距为,0,，左右为自动，因此该层就会自动居中了。如果要让页面居左，则取消掉,auto,值就可以了，因为默认就是居左显示的。通过,margin:auto,我们就可以轻易地使层自动居中了。,7.,编写各部份详细的,CSS,代码,当我们写好了页面大致的,DIV,结构后，我们就可以开始细致地对每一个部分进行制作了。,/*,基本信息*,/,body,font:12px Tahoma;margin:0px;text-align:center;background:#FFF;,a:link,a:visited,font-size:12px;text-decoration:none;,a:hover,/*,页面层容器*,/,#container,width:800px;margin:10px auto,对层的,margin,属性的左右边距设置为,auto,可以让层居中显示,7.,编写各部份详细的,CSS,代码,首页,博客,设计,相册,论坛,关于,TOP,部份菜单代码,/*,基本信息*,/,body font:12px Tahoma;margin:0px;text-align:center;background:#FFF;,a:link,a:visited font-size:12px;text-decoration:none;,a:hover,/*,层容器*,/,#container width:800px;height:600px;margin:10px auto,/*,头部*,/,#header background:url(logo.gif)no-repeat,#menu padding:20px 20px 0 0,#menu ul float:right;list-style:none;margin:0px;,#menu ul li float:left;display:block;line-height:30px;margin:0 10px,#menu ul li a:link,#menu ul li a:visited font-weight:bold;color:#666,#menu ul li a:hover,.menuDiv width:1px;height:28px;background:#999,#banner background:url(banner.jpg)0 30px no-repeat;width:730px;margin:auto;height:240px;border-bottom:5px solid#EFEFEF;clear:both,/*,主体*,/,#PageBody width:800px;margin:0 auto;height:200px;border:1px solid red,/*,页脚*,/,#Footer width:800px;margin:0 auto;height:50px;border:1px solid#000,头部页面,