2007-05

初学div+css之布局

Jason at 14:24

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程序看来又要更新了，增加一个上传源代码功能。

Categories:		web标准
Tags:		布局
Actions:		Comments (24) \|

Comments

May 22 2007 , 14:29

升级无极限

下一秒 | Top

May 22 2007 , 14:30

谈不上升级
只是为了让自己在使用时更方便

幻想曲 | Top

May 22 2007 , 14:54

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

icejune | Top

May 22 2007 , 15:15

看来都朝着标准进行了！！
我是先接触 CSS 然后才向 .net 发展的
和幻想不一样啊嘿嘿

neoayi | Top

May 22 2007 , 15:37

[quote=icejune]
呵呵，我先不客气地指出一下几点，希望以后注意：
1.注意缩进。否则别人看起来会很困难，甚至你自己以后也会看不懂架构... ...
[/quote]
#center{margin:0 241px 0 201px;}可以缩写成#center{margin:0 241px;}
这?行么?一个是241一个是201啊
谢谢指正:D

幻想曲 | Top

May 22 2007 , 15:43

看花眼了,呵呵

icejune | Top

May 22 2007 , 17:30

#body,#sidebar,#right,#center,#footer{height:750px;border:solid 1px #000;}
#footer
{
height:50px;
}
//你看你这个footer有2个height,有些id的定义重复,还有一些你可以简写
建议不要使用#body
我一般都这样就可以了
body {
color:#000;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
margin:0;
padding:0;
}
----------
*
{
font-size:12px;
font-family:verdana;
margin:0px;
padding:0px;
}//
*{margin:0;padding:0;}没有在这个里面+font-size的,难道你要所有的文字大小都是12px.我个人一般是写在body里面

PS:你的这个评论的框能+宽点吗?我在firefox下觉得留言很不方便