网页制作菜单CSS滑动门技术+div定位网页大布局

2015/08/07 40918
<!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, Helvetica, 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>&nbsp;</p>
<h2><img src="image/contactus.gif" alt="contact us" width="98" height="14" /></h2>
<h2>品牌导购网</h2>
http://www.brand789.com
    专注于集合品牌在线商城网址，收集品牌淘宝商城网站，官方商城网站，QQ商城网站 名牌导购网，名品导购，淘宝商城导购
    网址之家，品牌之家，
<p>&nbsp;</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>
代码片段
