简述htmlDIV +CSS网页布局原理

html-css012

简述htmlDIV +CSS网页布局原理,第1张

方法/步骤

一个网页设计时，我们可以将一个页面设置为头部，中间，和底部三部分； 头部有分为店招（logo）和导航等

中间既内容部分，内容也可一个整体，也可左右分离，

底部来页面结尾，一般写版权信息，友情链接等

END

头部编辑

店招：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>淘宝助手网</title>

<style>

#top{ width:1200pxheight: automargin:0 autocolor:#FFF}

#logo{ width:100%height:100pxbackground: #003}

</style>

</head>

<body>

<div id="top">

<div id="logo">店招</div>

<div id="nav">导航</div>

</div>

<!--------头部------------>

<div id="centre">

<div id="centreLeft">内容左</div>

<div id="centreRight">内容右</div>

</div>

<!--------中间------------->

<div id="bottom">底部</div>

<!-----------底部---------------->

</body>

</html>

导航：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>淘宝助手网</title>

<style>

a,ul,li,div,span,td{ padding:0margin:0}

#top{ width:1200pxheight: automargin:0 autocolor:#FFF}

#logo{ width:100%height:100pxbackground: #003}

#nav{ width:100%height:30pxbackground:#300}

a{ text-decoration: nonedisplay:blockden}

ul li{list-style: none}

#nav>ul>li{ float:leftmargin-left: 50pxline-height:30px}

#nav>ul>li>a{ color:#FFFfont-weight:900px}

</style>

</head>

<body>

<div id="top">

<div id="logo">店招</div>

<div id="nav">

<ul>

<li><a href="" title="" target="_blank">淘宝</a></li>

<li><a href="" title="" target="_blank">图片</a></li>

<li><a href="" title="" target="_blank">视频</a></li>

<li><a href="" title="" target="_blank">资料下载</a></li>

<li><a href="" title="" target="_blank">视频下载</a></li>

</ul>

</div>

</div>

<!--------头部------------>

<div id="centre">

<div id="centreLeft">内容左</div>

<div id="centreRight">内容右</div>

</div>

<!--------中间------------->

<div id="bottom">底部</div>

<!-----------底部---------------->

</body>

</html>

END

内容

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>淘宝助手网</title>

<style>

a,ul,li,div,span,td{ padding:0margin:0}

#top{ width:1200pxheight: automargin:0 autocolor:#FFF}

#logo{ width:100%height:100pxbackground: #003}

#nav{ width:100%height:30pxbackground:#300}

a{ text-decoration: nonedisplay:block}

ul li{list-style: none}

#nav>ul>li{ float:leftmargin-left: 50pxline-height:30px}

#nav>ul>li>a{ color:#FFFfont-weight:900px}

/*******===================头====================************/

#centre{ margin:0 autowidth:1200pxheight:auto}

#centreLeft{ float:leftwidth:70%height:500pxborder:1px #333333 solid}

#centreRight{ float: rightwidth:27%height:400pxborder:1px #333333 solid}

</style>

</head>

<body>

<div id="top">

<div id="logo">店招</div>

<div id="nav">

<ul>

<li><a href="" title="" target="_blank">淘宝</a></li>

<li><a href="" title="" target="_blank">图片</a></li>

<li><a href="" title="" target="_blank">视频</a></li>

<li><a href="" title="" target="_blank">资料下载</a></li>

<li><a href="" title="" target="_blank">视频下载</a></li>

</ul>

</div>

</div>

<!--------头部------------>

<div id="centre">

<div id="centreLeft">内容左</div>

<div id="centreRight">内容右</div>

</div>

<!--------中间------------->

<div id="bottom">底部</div>

<!-----------底部---------------->

</body>

</html>

END

底部

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>淘宝助手网</title>

<style>

a,ul,li,div,span,td{ padding:0margin:0}

#top{ width:1200pxheight: automargin:0 autocolor:#FFF}

#logo{ width:100%height:100pxbackground: #003}

#nav{ width:100%height:30pxbackground:#300}

a{ text-decoration: nonedisplay:block}

ul li{list-style: none}

#nav>ul>li{ float:leftmargin-left: 50pxline-height:30px}

#nav>ul>li>a{ color:#FFFfont-weight:900px}

/*******===================头====================************/

#centre{ margin:0 autowidth:1200pxheight:autooverflow: hidden }

#centreLeft{ float:leftwidth:70%height:500pxborder:1px #333333 solid}

#centreRight{ float: rightwidth:27%height:400pxborder:1px #333333 solid}

/***********==============内容===================*******/

#bottom{ margin:0 autowidth:1200pxheight:200pxborder:1px #333333 solidmargin-top:20px}

/***********==============底部===================*******/

</style>

</head>

<body>

<div id="top">

<div id="logo">店招</div>

<div id="nav">

<ul>

<li><a href="" title="" target="_blank">淘宝</a></li>

<li><a href="" title="" target="_blank">图片</a></li>

<li><a href="" title="" target="_blank">视频</a></li>

<li><a href="" title="" target="_blank">资料下载</a></li>

<li><a href="" title="" target="_blank">视频下载</a></li>

</ul>

</div>

</div>

<!--------头部------------>

<div id="centre">

<div id="centreLeft">内容左</div>

<div id="centreRight">内容右</div>

</div>

<!--------中间------------->

<div id="bottom">底部</div>

<!-----------底部---------------->

</body>

</html>

这个要和javascript一起说，html是网页的结构，css是网页的外观，而javascript就是网页的行为，结构，外观，行为分离作为web开发的一般准则，最简单的一个例子，请看：

http://ucdchina.com/snap/8275

使用css的原因就是保持html结构的清晰，剥离结构和表现的混沌状态，对于表现的重用和方便管理修改。