DIV+CSS一行三列布局的網頁_層和布局特效
一個比較常用的用DIV+CSS布局的網頁，包括頭部、中間、一行三列布局、導航條、頁面底部等，如果你正在用CSS布局一個網頁，那么這段代碼正好你能用得上，這種布局方式現在比較常用。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>一個常用的純CSS布局的網頁</title> <style type="text/css"> * { font-size:12px; font-family:verdana; margin:0px; padding:0px; } a { text-decoration:none; } #header,#footer { width:85%; margin:0 auto; height:50px; } #header { height:70px; margin-top:5px; border:solid 1px #000; 1122123<img src=>2244234background:url() _fcksavedurl=>2244234background:url() no-repeat right -20px; } #header h1 { line-height:40px; } #body { position:relative; width:85%; margin:3px auto; height:100%; word-wrop:break-word; word-break:break-all; } #sidebar { position:absolute; left:0; top:0; width:200px; } #right { width:240px; position:absolute; right:0; top:0; } #center { margin:0 241px 0 201px; } #body,#sidebar,#right,#center,#footer{height:750px;border:solid 1px #000;} #footer { height:50px; } #body { border:none; } #nav ul { float:left; width:600px; list-style-type:none; border-bottom:solid 6px #6666CC; } #nav ul li { float:left; } #nav li a { display:block; text-decoration:none; text-align:center; width:50px; padding:5px; } #nav li a:hover { background:#66c; color:#fff; font-weight:bold; } dt { border-bottom:dotted 1px #000066; border-top:dotted 1px #006; } dt.first { border-top:none; } dt { padding:8px 0px 8px 4px; } dd a{ display:block; text-indent:20px; padding:10px; } dd a:hover { font-weight:bold; color:#000; background:#66FFCC; } </style> </head> <body> <div id="header"> <h1>title</h1> <div id="nav"> <ul> <li><a href="/">HOME</a></li> <li><a href="#1">ASP</a></li> <li><a href="#1">PHP</a></li> <li><a href="#1">JSP</a></li> <li><a href="http://mb5u.com">ASP.NET</a></li> <li><a href="#1">VB</a></li> <li><a href="#1">VC</a></li> <li><a href="http://mb5u.com">DELPHI</a></li> <li><a href="#1">AJAX</a></li> <li><a href="#1">SOFT</a></li> </ul> </div> </div> <div id="body"> <div id="sidebar"> <dl> <dt class="first">分類</dt> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> </dl> <dl> <dt>鏈接</dt> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> </dl> <dl> <dt>dt</dt> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> <dd><a href="#1">link</a></dd> </dl> </div> <div id="center">center</div> <div id="right"> right </div> </div> <div id="footer"> footer </div> </body> </html>
。