一个网页设计时,我们可以将一个页面设置为头部,中间,和底部三部分; 头部有分为店招(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结构的清晰,剥离结构和表现的混沌状态,对于表现的重用和方便管理修改。