首页CSS+DIV布局模板_div+css网页布局资源-CSDN文库

共2个文件

html：1个

jpg：1个

5星 · 超过95%的资源需积分: 17 98 浏览量 2011-09-16 11:14:34 上传评论收藏 2KB RAR 举报

【首页CSS+DIV布局模板】是一种常见的网页设计技术，它主要依赖于CSS（层叠样式表）和HTML中的<div>元素来实现页面的结构化和美化。这种布局方式相较于早期的表格布局，具有更高的灵活性、可维护性和搜索引擎优化效果。在CSS+DIV布局中，`<div>`元素作为容器，可以包裹其他HTML元素，如段落、图片、标题等，通过设置<div>的CSS样式，可以控制这些元素的位置、大小、颜色、字体等外观属性。这样的布局方式使得网页设计者能够更自由地调整网页的布局，而不必改动HTML结构。 CSS（层叠样式表）是网页设计的核心，它将样式和内容分离，提高了代码的可读性和重用性。在CSS中，我们可以定义各种规则，如选择器（如类选择器、ID选择器、元素选择器）、盒模型（包括内容、内边距、边框和外边距）、定位（如相对定位、绝对定位和固定定位）等，以实现对网页元素的精确控制。在“首页CSS+DIV布局模板”中，`home_page.html`很可能是整个布局的入口文件，包含了HTML结构。这个文件会使用<div>元素构建出首页的各个部分，如头部、导航栏、主要内容区域、侧边栏和页脚等，并通过引用外部CSS文件或者在<head>标签内写入内联样式，来应用相应的样式。 `smenu_a.jpg`可能是一个用于导航栏的背景图片。在CSS中，我们可以通过设置`background-image`属性为该图片，以及使用`background-repeat`、`background-position`和`background-size`等属性来调整其显示方式，以达到理想的视觉效果。例如，一个水平导航菜单可能会使用此图片作为每个链接的背景，通过浮动<div>元素和设置适当的宽度来实现水平排列。 "首页CSS+DIV布局模板"是一种现代网页设计的典型实践，它结合了HTML的结构化和CSS的美化功能，使网页设计更加灵活和高效。通过熟练掌握这一技术，开发者可以创建出响应式、易维护的网站，同时提升用户体验。在实际开发中，还需要考虑浏览器兼容性、性能优化和无障碍访问等问题，以确保网页在不同环境下都能正常工作。

资源推荐

资源详情

资源评论

收起资源包目录

通用首页CSS+DIV布局模板.rar （2个子文件）

smenu_a.jpg 524B

home_page.html 6KB

<!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=gb2312" /> <title>css+div+xhtml模板( 兼容IE 5.5, IE 6, IE 7, Firefox 2.0, Opera 9.20, Safari )</title> <meta name="description" content="designer:calent,e-mail:calent_zero@yahoo.com.cn" /> <style type="text/css"> *{padding:0; margin:0} body{font-size:12px; text-align:center; font-family:arial, sans-serif} a{color:#000; text-decoration:none} p{line-height:1.6em} #wrap{margin:0 auto; text-align:left; padding:0 5px} #wrap{width:910px; voice-family:"\"}\""; voice-family:inherit; width:900px} #wrap h1{font-size:14px; font-weight:normal; padding:5px; background:#f7f7f7} #top{height:60px; line-height:60px; border:1px solid #ccc; border-bottom:none; text-align:center; background:#f7f7f7} #nav{border:1px solid #ccc; height:25px; line-height:25px} #nav ul{border-top:none; list-style:none; text-align:center} #nav li{float:left; border-right:1px solid #ccc} #nav a{padding:0 16px; display:block} #nav a:hover{background:#f4f4f4} #board{padding:10px 0} #site-bar{float:right} #notice{color:red} #txt-ad{padding:6px; border:1px solid #ccc} .space{height:10px; overflow:hidden} #left{width:220px; float:left} #right{width:670px; float:right} #left h1,#right h1,#left ul,#right ul{border:1px solid #ccc} #left ul,#right ul{border-top:none; margin-bottom:10px; padding-left:20px; list-style:square} #left li,#right li{padding:3px 2px} #search{border:1px solid #ccc; padding:6px 10px; background:#f9f9f9} .hotwords{margin:5px 0} .smenu{padding-top:6px; padding-bottom:10px} .smenu a{padding:2px 13px 10px 13px} .smenu a:hover,.smenu_on{background:url(smenu_a.jpg) no-repeat center top} .hotwords{display:block} .input{width:560px} .hotwords{color:#F90} #right-row1{float:left;width:330px} #right-row2{float:right; width:330px} #link{clear:both; margin-bottom:10px; height:24px; line-height:24px; border:1px solid #ccc;padding:3px 6px} #link ul{list-style:none} #link li{float:left; padding-right:20px} #bottom{clear:left; border:1px solid #ccc; padding-left:6px; background:#f7f7f7} </style> </head> <body> <div id="wrap"> <div id="top">this is the top</div> <div id="nav"> <ul> <li><a href="#">first page</a></li> <li><a href="#">second page</a></li> <li><a href="#">third page</a></li> <li><a href="#">fourth page</a></li> <li><a href="#">fifth page</a></li> <li><a href="#">sixth page</a></li> <li><a href="#">last page</a></li> </ul> </div> <div id="board"> <div id="site-bar">☆ Add favorite  ☆ Add homepage</div> <div id="notice">★ notice: this is the notice of the site</div> </div> <div id="txt-ad">this is the adadvertisement of the site</div> <div class="space"></div> <div id="left"> <h1>column title one</h1> <ul> <li>the list of column title one</li> <li>the list of column title one</li> <li>the list of column title one</li> <li>the list of column title one</li> <li>the list of column title one</li> <li>the list of column title one</li> <li>the list of column title one</li> </ul> <h1>column title two</h1> <ul> <li>the list of column title two</li> <li>the list of column title two</li> <li>the list of column title two</li> <li>the list of column title two</li> <li>the list of column title two</li> <li>the list of column title two</li> <li>the list of column title two</li> </ul> <h1>column title three</h1> <ul> <li>the list of column title three</li> <li>the list of column title three</li> <li>the list of column title three</li> <li>the list of column title three</li> <li>the list of column title three</li> <li>the list of column title three</li> <li>the list of column title three</li> </ul> </div> <div id="right"> <div id="search"> <div class="smenu"><a href="#" class="smenu_on">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a></div> <input name="skey" class="input" type="text" id="skey" /><input name="submit" type="button" id="submit" value="Search" /> <span class="hotwords">hot keywords: free software money site sina sohu</span> </div> <div class="space"></div> <div id="right-row1"> <h1>right-row1 title one</h1> <ul> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> </ul> <h1>right-row1 title two</h1> <ul> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> <li>the list of right-row1 title</li> </ul> </div> <div id="right-row2"> <h1>right-row2 title one</h1> <ul> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> </ul> <h1>right-row2 title two</h1> <ul> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> <li>the list of right-row2 title</li> </ul> </div> </div> <div id="link"> <ul> <li>your link</li> <li>your link</li> <li>your link</li> <li>your link</li> <li>your link</li> </ul> </div> <div id="bottom"> <p>© 2008 cilin.net All Rights Reserved Design by calent </p> </div> </div> </body> </html>

评论收藏

内容反馈