初学div+css之布局

2007-05

分类:Web标准,关键词:布局

已有 1,247 位领导视察,其中有 3 位领导做了批示.

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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <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; background:url(http://www.lemongtree.com/12.gif) 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="#1">link</a></li> <li><a href="#1">link</a></li> <li><a href="#1">link</a></li> <li><a href="#1">link</a></li> <li><a href="#1">link</a></li> <li><a href="#1">link</a></li> <li><a href="#1">link</a></li> <li><a href="#1">link</a></li> <li><a href="#1">link</a></li> <li><a href="#1">link</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>

ps.Blog程序看来又要更新了，增加一个上传源代码功能。

3 Responses

收起评论

下一秒五月 22 2007 , 15:29 #1

升级无极限
幻想曲五月 22 2007 , 15:30 #2

谈不上升级
只是为了让自己在使用时更方便
icejune 五月 22 2007 , 15:54 #3

呵呵，我先不客气地指出一下几点，希望以后注意：
1.注意缩进。否则别人看起来会很困难，甚至你自己以后也会看不懂架构... ...
2.注意缩写。比如你写的#center{margin:0 241px 0 201px;}可以缩写成#center{margin:0 241px;}
3.注意css的先后顺序。你的css写的比较杂乱无章，但如果你安排好先后顺序及合写属性的规则，你将省去很多不必要的代码。比如#footer，一共出现了三次，其实完全是不必要的。
愿你的css越写越熟练哦！