纯CSS实现的三列布局网页效果实例
2015-05-13 16:41
781 查看
本文实例讲述了纯CSS实现的三列布局网页效果。分享给大家供大家参考。具体分析如下:
这是一个比较常用的用DIV+CSS布局的网页,包括头部、中间、一行三列布局、导航条、页面底部等,如果你正在用CSS布局一个网页,那么这段代码正好你能用得上,这种布局方式现在比较常用。
希望本文所述对大家的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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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; background: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="#">ASP</a></li> <li><a href="#">PHP</a></li> <li><a href="#">JSP</a></li> <li><a href="#">ASP.NET</a></li> <li><a href="#">VB</a></li> <li><a href="#">VC</a></li> <li><a href="#">DELPHI</a></li> <li><a href="#">AJAX</a></li> <li><a href="#">SOFT</a></li> </ul> </div> </div> <div id="body"> <div id="sidebar"> <dl> <dt class="first">分类</dt> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> </dl> <dl> <dt>链接</dt> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> </dl> <dl> <dt>dt</dt> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> <dd><a href="#">link</a></dd> </dl> </div> <div id="center">center</div> <div id="right"> right </div> </div> <div id="footer"> footer </div> </body> </html>
希望本文所述对大家的div+css网页设计有所帮助。
相关文章推荐
- 网页布局:CSS实现一列二列三列和混合布局
- jquery+CSS实现的水平布局多级网页菜单效果
- jquery+CSS实现的水平布局多级网页菜单效果
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
- CSS实例:CSS实现的等高网页布局
- CSS实现网页布局(一列,两列,三列)
- 用CSS实现三列DIV等高布局以传达更好的视觉效果
- 第十天 div+css网页标准布局实例教程
- CSS实例(四):实现TabView(页签)效果
- jQuery+CSS实现的网页二级下滑菜单效果
- div+css网页标准布局实例教程(三)
- 简单的CSS网页布局--三列布局
- 实例:应用CSS实现表单form布局(博主:http://www.bm777.com/post/32.html)
- CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?
- 十天学会DIV+CSS第十天 div+css网页标准布局实例教程
- CSS网页制作布局实例教程
- CSS制作网页布局实例:隐藏input文字
- CSS_DIV学习记录2(用背景颜色实现一个网页的完整布局)
- 网页中三列自适应高度布局的实现
- 用hover配合position(纯css)实现网页动态效果