下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
<!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>brand789品牌导购网</title> <style type="text/css"> <!-- body { font-family: Arial,Helvetica,Verdana,Sans-serif; font-size: 12px; color: #666666; background: #ffffff; } html,body { margin: 0; padding: 0; } #page-container { width: 760px; margin: 0 auto; } /* Main Navigation */ #main-nav { height: 50px; } #main-nav ul { margin: 0; padding: 0; list-style-type: none;} /* IE5 Mac Hack \*/ #main-nav { padding-left: 11px; } /*/ #main-nav { padding-left: 11px; overflow: hidden; } /* End Hack */ #main-nav li { float: left; } #main-nav li a { display: block; height: 0px !important; height /**/:50px; /* IE 5/Win hack */ padding: 50px 0 0 0; overflow: hidden; background-repeat: no-repeat; } #main-nav li a:hover { background-position: 0 -50px; } #main-nav li#about,#main-nav li#about a { width: 71px; background-image: url(image/about2.jpg); } #main-nav li#services,#main-nav li#services a { width: 84px; background-image: url(image/service2.jpg); } #main-nav li#portfolio,#main-nav li#portfolio a { width: 95px; background-image: url(image/product2.jpg); } #main-nav li#contact,#main-nav li#contact a { width: 106px; background-image: url(image/contactus2.jpg); } body.about li#about,body.about li#about a,body.services li#services,body.services li#services a,body.portfolio li#portfolio,body.portfolio li#portfolio a,body.contact li#contact,body.contact li#contact a { background-position: 0 -100px; } #header { height: 150px; background: #db6d16; background-image: url(image/about1.jpg); } #header h1 { margin: 0; padding: 0; float: right; margin-top: 57px; padding-right: 31px; /*注意:细心的你可能会发现我们使用了padding-right而不是margin-right,这是因为IE的怪毛病不少,它会在不定的地方无法正确显示margin-right/left属性,所以使用了padding(间隙,Dreamweaver中又被称为填充)属性。 作者提示:希望大家在以后的css编写过程中,尽量使用padding属性,以免造成浏览器调试麻烦。 */ } #sidebar-a { float: right; width: 280px; line-height: 18px; } #content { margin-right: 280px; line-height: 18px; } #content { padding: 25px; } #sidebar-a .padding { padding: 25px; } #content .padding { padding: 25px; } #footer { clear: both; height: 66px; font-family: Tahoma,Arial,Sans-serif; font-size: 10px; color: #c9c9c9; border-top: 1px solid #efefef; padding: 13px 25px; line-height: 18px; } #footer a { color: #c9c9c9; text-decoration: none; } #footer a:hover { color: #db6d16; } h1 { margin: 0; padding: 0; } #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; } #footer #altnav { width: 350px; float: right; text-align: right; } --> </style> </head> <body class="about"> <div id="page-container"> <div id="main-nav"> <ul> <li id="about"><a href="about.html" >About</a></li> <li id="services"><a href="service.html" >Services</a></li> <li id="portfolio"><a href="Portfolio.html" >Portfolio</a></li> <li id="contact"><a href="contact.html" >ContactUs</a></li> </ul> </div> <div id="header"> <h1><img src="image/logo_enlighten.gif" width="236" height="36" border="0"/></h1> </div> <div id="sidebar-a"> <div class="padding"> <h2>品牌导购网</h2>http://www.brand789.com 专注于集合品牌在线商城网址,收集品牌淘宝商城网站,官方商城网站,QQ商城网站 名牌导购网,名品导购,淘宝商城导购 网址之家,品牌之家,</div> </div> <div id="content"> <div class="padding"> <h2><img src="image/about.gif" alt="about" width="54" height="14" /></h2> <h2>品牌导购网</h2> http://www.brand789.com 专注于集合品牌在线商城网址,收集品牌淘宝商城网站,官方商城网站,QQ商城网站 名牌导购网,名品导购,淘宝商城导购 网址之家,品牌之家, <p> </p> <h2><img src="image/contactus.gif" alt="contact us" width="98" height="14" /></h2> <h2>品牌导购网</h2> http://www.brand789.com 专注于集合品牌在线商城网址,收集品牌淘宝商城网站,官方商城网站,QQ商城网站 名牌导购网,名品导购,淘宝商城导购 网址之家,品牌之家, <p> </p> </div></div> <div id="footer"> <div id="altnav"> <a href="http://www.brand789.com" title="品牌导购网" >About</a> - <a href="http://www.brand789.com" title="品牌导购网" >Services</a> - <a href="http://www.brand789.com" title="品牌导购网" >Portfolio</a> - <a href="http://www.brand789.com" title="品牌导购网" >Contact Us</a> - <a href="http://www.brand789.com" title="品牌导购网" >Terms of Trade</a> </div> Copyright © Enlighten Designs Powered by <a href="http://www.brand789.com" title="品牌导购网" >Enlighten Hosting</a> and <a href="http://www.brand789.com" title="品牌导购网" >Vadmin 3.0 CMS</a></div> </div> </body> </html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。