div比傳統上的table要難控制多了
這裡做的是一個常見的3列布局
| header | ||
| left | content | right |
| footer | ||
css部份寫得不是很精簡，歡迎大家評批指正，指點指點這個正在初學階段的菜鳥 ^_^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title> new document </title><br /><meta name="generator" content="editplus" /><br /><meta name="author" content="" /><br /><meta name="keywords" content="" /><br /><meta name="description" content="" /><br /><style type="text/css"><br />*<br />{<br />font-size:12px;<br />font-family:verdana;<br />margin:0px;<br />padding:0px;<br />}<br />a<br />{<br />text-decoration:none;<br />}<br />#header,#footer<br />{<br />width:85%;<br />margin:0 auto;<br />height:50px;<br />}<br />#header<br />{<br />height:70px;<br />margin-top:5px;<br />border:solid 1px #000;<br />background:url(http://www.lemongtree.com/12.gif) no-repeat right -20px;<br />}<br />#header h1<br />{<br />line-height:40px;<br />}<br />#body<br />{<br />position:relative;<br />width:85%;<br />margin:3px auto;<br />height:100%;<br />word-wrop:break-word;<br />word-break:break-all;<br />}<br />#sidebar<br />{<br />position:absolute;<br />left:0;<br />top:0;<br />width:200px;<br />}<br />#right<br />{<br />width:240px;<br />position:absolute;<br />right:0;<br />top:0;<br />}<br />#center<br />{<br />margin:0 241px 0 201px;<br />}<br />#body,#sidebar,#right,#center,#footer{height:750px;border:solid 1px #000;}<br />#footer<br />{<br />height:50px;<br />}<br />#body<br />{<br />border:none;<br />}<br />#nav ul<br />{<br />float:left;<br />width:600px;<br />list-style-type:none;<br />border-bottom:solid 6px #6666CC;<br />}<br />#nav ul li<br />{<br />float:left;<br />}<br />#nav li a<br />{<br />display:block;<br />text-decoration:none;<br />text-align:center;<br />width:50px;<br />padding:5px;<br />}<br />#nav li a:hover<br />{<br />background:#66c;<br />color:#fff;<br />font-weight:bold;<br />}<br />dt<br />{<br />border-bottom:dotted 1px #000066;<br />border-top:dotted 1px #006;<br />}<br />dt.first<br />{<br />border-top:none;<br />}<br />dt<br />{<br />padding:8px 0px 8px 4px;<br />}<br />dd a{<br />display:block;<br />text-indent:20px;<br />padding:10px;<br />}<br />dd a:hover<br />{<br />font-weight:bold;<br />color:#000;<br />background:#66FFCC;<br />}<br /></style><br /></head><br /><body><br /><div id="header"><br /><h1>title</h1><br /><div id="nav"><br /><ul><br /><li><a href="#1">link</a></li><br /><li><a href="#1">link</a></li><br /><li><a href="#1">link</a></li><br /><li><a href="#1">link</a></li><br /><li><a href="#1">link</a></li><br /><li><a href="#1">link</a></li><br /><li><a href="#1">link</a></li><br /><li><a href="#1">link</a></li><br /><li><a href="#1">link</a></li><br /><li><a href="#1">link</a></li><br /></ul><br /></div><br /></div><br /><div id="body"><br /><div id="sidebar"><br /><dl><br /><dt class="first">分類</dt><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /></dl><br /><dl><br /><dt>連結</dt><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /></dl><br /><dl><br /><dt>dt</dt><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /><dd><a href="#1">link</a></dd><br /></dl><br /></div><br /><div id="center">center</div><br /><div id="right"><br />right<br /></div><br /></div><br /><div id="footer"><br />footer<br /></div><br /></body><br /></html><br />
ps.Blog程式看來又要更新了，增加一個上傳原始碼功能。
文章來源:http://www.lemongtree.com/Archives/730.aspx
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
