模板無(wú)憂

每日更新|TOP排行榜|Tag標(biāo)簽|充值

無(wú)憂首頁(yè) 網(wǎng)頁(yè)模板程序模板建站教程視頻教程網(wǎng)頁(yè)特效圖標(biāo)素材字體下載站長(zhǎng)工具站長(zhǎng)問(wèn)答

網(wǎng)頁(yè)特效代碼模板無(wú)憂>網(wǎng)頁(yè)特效>層和布局特效代碼>

收藏分享查看評(píng)論層和布局

標(biāo)準(zhǔn)的CSS左中右3列布局_層和布局特效

查看演示效果

特效Tag：布局添加

挺符合標(biāo)準(zhǔn)的CSS左、中、右3列布局，好像加載時(shí)候是先顯示中欄，然后顯示兩側(cè)。不過(guò)這里先后順序不是重點(diǎn)，重點(diǎn)是如何在心中為你的網(wǎng)頁(yè)布局出一個(gè)大致的框架，用慣TABLE的人，往往不習(xí)慣用CSS，不過(guò)看到CSS布局竟然可以代碼這么少，一定會(huì)為CSS喝采的。

<!DOCTYPE html PUBLIC "-//W。3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>CSS左中右3列布局先顯示中欄內(nèi)容的方法</title>
</head>

<style>
body{font-size:12px;}
div{color:#fff}
#m{padding-left:150px}
#middle{position:absolute;background:red;width:498px;margin-right: auto;margin-left: auto; padding: 0px;}
#left{float:left;background:green;width:140px;}
#right{float:right;background:blue;width:140px}
#pagebox{width:800px;margin-right: auto;margin-left: auto; padding: 0px;color: #000;background:#ffa200;}
#header{BACKGROUND: #ffee22;HEIGHT: 60px;}
#logo {float:left;MARGIN: 2px 2px ;padding:0px;}
#footer{clear:both;background:#808080;color:#fff;height:60px;}
</style>
<body>
<div id="pagebox">
<div id="header">
<div id="logo"><a title="WEB2.0標(biāo)準(zhǔn)布局"  ><img alt="標(biāo)準(zhǔn)布局" src="/images/logo.gif"  border="0"/></a></div>
<p>Header</p>
</div>
<div id="m">
<div id="middle">
中欄<br />
<ul>
<li>
<a  target="_blank">很可怕的一個(gè)C#2008惡搞程序</a></li><li><a  target="_blank">25175 單項(xiàng)選擇考試系統(tǒng)ASP.net版 v1.0</a></li><li><a  target="_blank">C#圖片/相冊(cè)管理程序代碼</a></li><li><a  target="_blank">給VB的ListBox滾動(dòng)條皮膚添加圖片背景和漸變色</a></li><li><a  target="_blank">VB中的MsChart控件使用示例</a></li><li><a  target="_blank">J2me手機(jī)程序開(kāi)發(fā)環(huán)境的搭建教程 PDF</a></li><li><a  target="_blank">蜀山劍俠傳游戲J2ME手機(jī)版源代碼</a></li><li><a  target="_blank">VB語(yǔ)言參考及函數(shù)速查手冊(cè) CHM</a></li><li><a  target="_blank">簡(jiǎn)單坦克大戰(zhàn)J2ME手機(jī)版</a></li><li><a  target="_blank">AJAX仿Windows桌面菜單及圖標(biāo)的效果</a></li><li><a  target="_blank">《JavaScript 寶典》第四版 PDF</a></li>
</ul>
</div>
</div>

<div id="left">浮動(dòng)在#m{padding-left:150px}上Padding區(qū)域。
<h1>左欄</h1></div>
<div id="right">右欄<br></div>
<div id="footer">網(wǎng)頁(yè)底部</div>
</div>

<script language="javascript">
var l=document.getElementById("left").scrollHeight
var m=document.getElementById("middle").scrollHeight
var r=document.getElementById("right").scrollHeight
layoutHeight=Math.max(l,m,r)
document.getElementById("left").style.height=layoutHeight+"px"
document.getElementById("right").style.height=layoutHeight+"px"
document.getElementById("middle").style.height=layoutHeight+"px"
</script>
</body>
</html>

所屬頻道：層和布局特效/更新時(shí)間：2012-11-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)層和布局特效：

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索標(biāo)準(zhǔn)的CSS左中右3列布局
特效說(shuō)明：
層和布局模板-標(biāo)準(zhǔn)的CSS左中右3列布局。