当前位置：清风网络学院 → 网站建设 → Div+Css → 用DIV+CSS布局网页的一个实例HTML代码


	精品推荐


特别推荐

·初学者来看：学习网页技术CSS怎么入门？


热点TOP10

·背景图片居中显示(HTML,CSS技巧)

·CSS实例:让页脚保持在未满屏页面的底部

·CSS大师Eric采访实录

·CSS隐藏网页文字的几种常用方法

·国外译文：网页设计如何使用CSS的选择器模式？

·CSS注释、命名、继承性、样式排序等CSS技巧的小结

·CSS条状图表形式的实现方法

·CSS实现带背景图片的文字链接的方法

·CSS和XHTML经验：类目之间的竖线问题引发的讨论

·LI标签中内容超过长度后以省略号显示的方法

用DIV+CSS布局网页的一个实例HTML代码

日期：2007年10月19日作者：查看:[大字体中字体小字体]

<!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() 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>

[1] [2] 下一页

上一篇:支持IE6 IE7 Firefox的纯CSS的下拉菜单

下一篇:用DIV+CSS实现的网易首页滑动效果的标签

·我和一个偷尝禁果的女孩的故事

·QQ空间免费换皮肤代码

·为什么iexplore.exe在打开网页时CPU使用会100%？

·qq空间皮肤背景代码：QQ空间不用Q币更换主页皮肤方法

·QQ空间最新黄钻皮肤代码

·Photoshop CS3合成实例：人间天堂

·杀毒技巧系列:杀毒、防恶意代码、脚本病毒的不完全合集

·QQ空间透明flash代码

·如何在QQ空间加入播放器代码

·人生哲理：一个人最重要的是他的内心

	\| 帮助(？) \| 版权声明 \| 友情连接 \| 关于我们 \| 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved.	鄂ICP备05000083号Powered by:viphot