CSS+DIV设计布局实例.ppt

CSS+DIV布局实例 例5：实例 第一步：构思，下面是构思好的具体界面布局图 仔细分析该图，图片大致分为以下几个部分： （index01.html） 第二步：写入整体结构建 首先建文档index.htm和css.css index.htm： 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=“css.cssrel=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/aaa_01.gif) 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=menu_css.css“ 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;