常见的网页布局一
效果圖：
網頁的具體換分為：
先使用一個大的DIV，讓其居中，再往大的DIV里面添加其他的東西,簡化如下：
<body><div id="container"><div id="header">導航圖片</div><div id="nav">導航欄目</div><div id="content"><div id="con_left">左邊內容</div><div id="con_right">右邊內容</div></div><div id="bottom">CopyRight© 2012-2013</div></div></body>具體的html代碼:
<body><div id="container"><div id="header">導航圖片</div><div id="nav"><ul><li class="nav_li"><a href="#" class="nav_href">返回首頁</a></li><li class="nav_li"><a href="#" class="nav_href">搖滾音樂</a></li><li class="nav_li"><a href="#" class="nav_href">另類電影</a></li><li class="nav_li"><a href="#" class="nav_href">聯系我們</a></li><li class="nav_li"><a href="#" class="nav_href">網站導航</a></li><li class="nav_li"><a href="#" class="nav_href">網站幫助</a></li><li class="nav_li"><a href="#" class="nav_href">網站導航</a></li><li class="nav_li"><a href="#" class="nav_href">網站幫助</a></li><li class="nav_li"><a href="#" class="nav_href">網站導航</a></li><!--一個css中可以加載多個類，用空格來隔開--><li class="nav_li nav_last"><a href="#" class="nav_href">網站幫助</a></li></ul></div><div id="content"><div id="con_left"><dl class="article_list index_l_article"><dt><span>通知信息</span></dt><dd><a href="#" class="article_href">關于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd></dl><dl class="article_list index_l_article"><dt><span>意見建議</span></dt><dd><a href="#" class="article_href">關于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd></dl><dl class="article_list index_l_article"><dt><span>交流互動</span></dt><dd><a href="#" class="article_href">關于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd></dl></div><div id="con_right"><dl class="article_list index_r_article"><dt><span>通知信息</span></dt><dd><a href="#" class="article_href">關于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd></dl><dl class="article_list index_r_article"><dt><span>意見建議</span></dt><dd><a href="#" class="article_href">關于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd></dl><dl class="article_list index_r_article"><dt><span>交流互動</span></dt><dd><a href="#" class="article_href">關于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd></dl><dl class="article_list index_r_article"><dt><span>通知信息</span></dt><dd><a href="#" class="article_href">關于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關于西游記的通知信息</a></dd></dl></div></div><div id="bottom">CopyRight© 2012-2013</div></div></body>css代碼:
<style type="text/css">* {padding: 0px;margin: 0px;font-size: 12px;}/*僅僅只有IE可以居中body {text-align:center;}*/#container {width: 1100px;/*僅僅只有IE之外的瀏覽器可以居中margin:auto;*//*以下三個操作才是推薦使用的居中方式*/position: absolute;left: 50%;margin-left: -550px;}/*** 設置頭部圖片的背景*/#header {height: 50px;background: #33F;}/*** 設置導航欄的信息*/#nav {border-bottom: 1px solid #88A;height: 30px;border: 1px solid #229;}/*** 利用float：將導航欄水平顯示*/#nav ul {list-style: none;}li.nav_li {float: left;width: 100px;font-size: 12px;color: #621;text-align: center;border-right: 1px solid #339;height: 30px;}/*當使用了包含的操作符之后，它的加載時間比使用class的加載時間要低，所以如果此時再來定義一個class的樣式，不會把使用包含的樣式覆蓋掉*/#nav ul li a {position: relative;top: 8px;/*此時如果設置了該顏色的之后，nav中的a的所有的顏色都是f00color:#f00;*/}li.nav_last {border: none;}a.nav_href:link, a.nav_href:visited {text-decoration: none;color: #125;}a.nav_href:hover {text-decoration: underline;color: #a43;}#content {/*將兩端的float清除，否則對于IE以外的瀏覽器而言，設置了float的元素會不再占用空間，下面的元素會飄上去*/clear: both;float: left;margin-top: 4px;}/*************************主頁內容中的文章列表樣式*******************************/dl.article_list {border: 1px solid #999;margin-top: 4px;}dl.article_list dt {height: 30px;background: #228;color: #ff0;font-weight: bold;}dl.article_list dt span {position: relative;font-size: 14px;top: 5px;left: 5px;}dl.article_list dd {height: 30px;background: url("point.jpg") no-repeat;background-position: 12px 12px;border-bottom: 1px dotted #aaa;}dl.article_list dd a {position: relative;left: 25px;top: 8px;}a.article_href:link, a.article_href:visited {text-decoration: none;color: #555;}a.article_href:hover {text-decoration: underline;color: #a33;}#con_left {float: left;width: 250px;}#con_right {float: left;width: 845px;}dl.index_l_article {width: 240px;}dl.index_r_article {float: left;width: 393px;margin-left: 20px;*margin-left: 10px;}#bottom {height: 30px;width: 1100px;border-top: 1px solid #999;float: left;margin-top: 10px;clear: both;text-align: center;}</style>?
轉載于:https://www.cnblogs.com/zhangbaowei/p/4750180.html
總結
- 上一篇： gta5线下骷髅马位置 Rockstar
- 下一篇： 悠悠人生怎么快速升级