當(dāng)前位置：
首頁(yè) >
常见的网页布局一
發(fā)布時(shí)間：2023/12/31
42
豆豆
效果圖：
網(wǎng)頁(yè)的具體換分為：
先使用一個(gè)大的DIV，讓其居中，再往大的DIV里面添加其他的東西,簡(jiǎn)化如下：
<body><div id="container"><div id="header">導(dǎo)航圖片</div><div id="nav">導(dǎo)航欄目</div><div id="content"><div id="con_left">左邊內(nèi)容</div><div id="con_right">右邊內(nèi)容</div></div><div id="bottom">CopyRight© 2012-2013</div></div></body>具體的html代碼:
<body><div id="container"><div id="header">導(dǎo)航圖片</div><div id="nav"><ul><li class="nav_li"><a href="#" class="nav_href">返回首頁(yè)</a></li><li class="nav_li"><a href="#" class="nav_href">搖滾音樂(lè)</a></li><li class="nav_li"><a href="#" class="nav_href">另類電影</a></li><li class="nav_li"><a href="#" class="nav_href">聯(lián)系我們</a></li><li class="nav_li"><a href="#" class="nav_href">網(wǎng)站導(dǎo)航</a></li><li class="nav_li"><a href="#" class="nav_href">網(wǎng)站幫助</a></li><li class="nav_li"><a href="#" class="nav_href">網(wǎng)站導(dǎo)航</a></li><li class="nav_li"><a href="#" class="nav_href">網(wǎng)站幫助</a></li><li class="nav_li"><a href="#" class="nav_href">網(wǎng)站導(dǎo)航</a></li><!--一個(gè)css中可以加載多個(gè)類，用空格來(lái)隔開(kāi)--><li class="nav_li nav_last"><a href="#" class="nav_href">網(wǎng)站幫助</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">關(guān)于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd></dl><dl class="article_list index_l_article"><dt><span>意見(jiàn)建議</span></dt><dd><a href="#" class="article_href">關(guān)于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd></dl><dl class="article_list index_l_article"><dt><span>交流互動(dòng)</span></dt><dd><a href="#" class="article_href">關(guān)于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</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">關(guān)于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd></dl><dl class="article_list index_r_article"><dt><span>意見(jiàn)建議</span></dt><dd><a href="#" class="article_href">關(guān)于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd></dl><dl class="article_list index_r_article"><dt><span>交流互動(dòng)</span></dt><dd><a href="#" class="article_href">關(guān)于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd></dl><dl class="article_list index_r_article"><dt><span>通知信息</span></dt><dd><a href="#" class="article_href">關(guān)于西游記的通知信息坎坎坷</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</a></dd><dd><a href="#" class="article_href">關(guān)于西游記的通知信息</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;*//*以下三個(gè)操作才是推薦使用的居中方式*/position: absolute;left: 50%;margin-left: -550px;}/*** 設(shè)置頭部圖片的背景*/#header {height: 50px;background: #33F;}/*** 設(shè)置導(dǎo)航欄的信息*/#nav {border-bottom: 1px solid #88A;height: 30px;border: 1px solid #229;}/*** 利用float：將導(dǎo)航欄水平顯示*/#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;}/*當(dāng)使用了包含的操作符之后，它的加載時(shí)間比使用class的加載時(shí)間要低，所以如果此時(shí)再來(lái)定義一個(gè)class的樣式，不會(huì)把使用包含的樣式覆蓋掉*/#nav ul li a {position: relative;top: 8px;/*此時(shí)如果設(shè)置了該顏色的之后，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清除，否則對(duì)于IE以外的瀏覽器而言，設(shè)置了float的元素會(huì)不再占用空間，下面的元素會(huì)飄上去*/clear: both;float: left;margin-top: 4px;}/*************************主頁(yè)內(nèi)容中的文章列表樣式*******************************/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>?
轉(zhuǎn)載于:https://www.cnblogs.com/zhangbaowei/p/4750180.html
總結(jié)
- 上一篇： gta5线下骷髅马位置 Rockstar
- 下一篇： ECSHOP 支付宝发货确认接口，记录支