CSS+DIV设计布局实例.ppt.ppt

CSS+DIV布局实例
例5:实例
第一步:构思,下面是构思好的具体界面布局图
仔细分析该图,图片大致分为以下几个部分:
Header层
Pagebody层
Footer层
Sidebar层
Mainbody层
()
Header层
Pagebody层
Footer层
Sidebar层
Mainbody层
container层
第二步:写入整体结构建

:
HEAD CODE
<link href=""rel="stylesheet" type="text/css"/>
BODY CODE
<div id="container">此处显示 id "container" 的内容
<div id="header">
此处显示 id “header”的内容
</div>
<div id="pagebody">
此处显示 id “pagebody”的内容
<div id="sidebar">
此处显示 id "sidebar" 的内容</div>
<div id="mainbody">
此处显示 id "mainbody" 的内容</div>
</div>
<div id="footer">
此处显示 id “footer”的内容
</div>
</div>
()
第三步:页面顶部Header层制作
HEAD CODE
<link href=“"rel="stylesheet" type="text/css"/>
CSS CODE
body {font-size:12px;/*字号为12像素大小*/
font-family:Tahoma;/*字体为Tahoma格式*/
margin:0px;/*说明body部分对上右下左边距为0像素*/
text-align:center;/*文字对齐方式为居中*/
background:#FFF;/*设置背景色为白色*/ }
#container {width: 800px;}
#header {background:url(images/) no-repeat;
height:72px;
text-align:center; }
#search {text-align:left;
float: right;
margin: 20px 50px 0 0; }
BODY CODE
<div id="header">
<div id="search">
<form action="" method="get" id="sea1">
<input name="sea2" type="text" />
<input name="" type="button" value="search" />
</form>
</div></div>
()
第四步:页面中部Pagebody层制作
HEAD CODE
<link href="“ rel="stylesheet" type="text/css"/>
CSS CODE
#pagebody {width:800px;
height:320px;}
#sidebar { width: 200px; /*设定宽度*/
text-align: left; /*文字左对
float: left; /*浮动居左*/
clear: left; /*不允许左侧存在浮动*/
overflow: hidden; /*超出宽度部分隐藏*/
margin: 20px 0 0 40px;}
#mainbody {width: 520px;
text-align: left;
float: right; /*浮动居右*/
clear: right; /*不允许右侧存在浮动*/
overflow: hidden;
margin: 20px 30px 0 0px;
border-left: 2px dashed #868587;}
#mbup {font-size:13px;
font-family:Tahoma;
margin:0 0 0 20px;
text-align:left;}
#mbdown {font-size:13px;
font-family:Tahoma;
margin:30px 0 0 20px;
text-align:left;}
.img {margin-right:1em;
float:left;}
BODY COD