如何用DIV+CSS进行网页样式布局
在html网页编辑中，对于新手来讲，接触最多的就是div+css；那么如何使用div+css就行网页简单布局呢
操作方法
- 01
一个网页设计时，我们可以将一个页面设置为头部，中间，和底部三部分； 头部有分为店招（logo）和导航等 中间既内容部分，内容也可一个整体，也可左右分离， 底部来页面结尾，一般写版权信息，友情链接等
头部编辑
- 01
店招： <!doctype html> <html> <head> <meta charset="utf-8"> <title>淘宝助手网</title> <style> #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #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>
- 02
导航： <!doctype html> <html> <head> <meta charset="utf-8"> <title>淘宝助手网</title> <style> a,ul,li,div,span,td{ padding:0; margin:0;} #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } #nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;den} ul li{list-style: none;} #nav>ul>li{ float:left; margin-left: 50px; line-height:30px; } #nav>ul>li>a{ color:#FFF; font-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>
内容
- 01
<!doctype html> <html> <head> <meta charset="utf-8"> <title>淘宝助手网</title> <style> a,ul,li,div,span,td{ padding:0; margin:0;} #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } #nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;} ul li{list-style: none;} #nav>ul>li{ float:left; margin-left: 50px; line-height:30px; } #nav>ul>li>a{ color:#FFF; font-weight:900px} /*******===================头====================************/ #centre{ margin:0 auto; width:1200px; height:auto; } #centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;} #centreRight{ float: right; width:27%; height:400px;border: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>
底部
- 01
<!doctype html> <html> <head> <meta charset="utf-8"> <title>淘宝助手网</title> <style> a,ul,li,div,span,td{ padding:0; margin:0;} #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } #nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;} ul li{list-style: none;} #nav>ul>li{ float:left; margin-left: 50px; line-height:30px; } #nav>ul>li>a{ color:#FFF; font-weight:900px} /*******===================头====================************/ #centre{ margin:0 auto; width:1200px; height:auto; overflow: hidden } #centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;} #centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;} /***********==============内容===================*******/ #bottom{ margin:0 auto; width:1200px; height:200px; border:1px #333333 solid; margin-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>