以前对网页进行布局是总是使用大量的div嵌套 及时是很小的一块也嵌套div，今天看了腾讯CDC 的blog源代码，受到启发，一些小的部分的布局没有必要 嵌套div，使用position实现比较好。 以前使用的较少，现做一个例子练手，代码如下：
<!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>position-example</title> <style type=”text/css”> * { margin:0; padding:0; } .title { width:900px; height:100px; margin:20px auto; border:1px solid #ccc; position:relative; padding:10px; } .astar { width:43px; height:43px; padding:1px; border:1px solid #ccc; position:relative; float:left; } .astar img { border:none; } .line { background:repeat 0 0 #D7D7D7; width:1px; height:41px; margin:0 10px; display:inline; float:left; margin-top:4px; } .title h1 { font-size:14px; line-height:26px; height:26px; } .title p { font-size:12px; line-height:15px; height:15px; position:relative; } .tag { margin-left:3px; } .commtent { position:absolute; right:5px; top:5px; display:block; width:60px; height:26px; background:red; color:#FFF; font-weight:bold; padding:3px; text-decoration:none; } </style> </head> <body> <div> <a href=”#”><img src=”images/1.jpg” /></a> <i></i> <h1>This is a title</h1> <p> <a href=”#” >tag1</a> <a href=”#”>tag2</a> 2011-2-10 </p> <a href=”#”>comtents</a> <br /> <p>there are contents</p> <p>there are contents</p> </div> <div> <a href=”#”><img src=”images/1.jpg” /></a> <i></i> <h1>This is a title</h1> <p> <a href=”#” >tag1</a> <a href=”#”>tag2</a> 2011-2-10 </p> <a href=”#”>comtents</a> </div> <div> <a href=”#”><img src=”images/1.jpg” /></a> <i></i> <h1>This is a title</h1> <p> <a href=”#” >tag1</a> <a href=”#”>tag2</a> 2011-2-10 </p> <a href=”#”>comtents</a> </div> </body> </html>
点击 查看演示
本文原创，转载请注明出处：网站设计编程网
http://happysnail.org/blog/index.php/archives/448
