div+css设计一个首页（包括菜单） 

文章来源：http://www.52css.com/article.asp?id=185

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./css/master.css" />
</head>
<body class="about">
 <div id="page-container">
    <div id="main-nav">
      <ul>
        <li id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></li>
        <li id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></li>
        <li id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></li>
        <li id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></li>
      </ul>
    </div> 
    <div id="header"><h1><img src="images/general/logo_enlighten.gif" width="236" height="36" alt="Enlighten Designs" border="0" /></h1></div> 
    <div id="sidebar-a">
        <div class="padding">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
        Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
        Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
        euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
        Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
        purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
        </div>
    </div> 
    <div id="content">
        <h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2>
        <p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in 
        front and back end development. To view some of the web sites we have created view our 
        portfolio.</p>
        <p>We are currently undergoing a 'face lift', so if you have any questions or would 
        like more information about the services we provide please feel free to contact us.</p>
        <h2><img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /></h2>
        <p>Phone: (07) 853 6060<br />
        Fax: (07) 853 6060<br />
        Email: <a href="mailto:info@enlighten.co.nz" >info@enlighten.co.nz</a><br />
        P.O Box: 14159, Hamilton, New Zealand</p>
        <p><a href="http://css.jorux.com/wp-admin/post.php#" >More contact information…</a></p>
    </div> 
    <div id="footer">
      <div id="altnav">
        <a href="http://css.jorux.com/wp-admin/post.php#" >About</a> - 
        <a href="http://css.jorux.com/wp-admin/post.php#" >Services</a> - 
        <a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a> - 
        <a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a> - 
        <a href="http://css.jorux.com/wp-admin/post.php#" >Terms of Trade</a>
        Copyright © Enlighten Designs Powered by <a href="http://www.enlightenhosting.com/" >Enlighten Hosting</a> and
        <a href="http://www.vadmin.co.nz/" >Vadmin 3.0 CMS</a>
      </div>
    </div>
 </div>
</body>
</html>

 

 

html,body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    font-size: 12px;
    color: #666666;
    background: #ffffff;
}

.hidden {
display: none;
}
#page-container{
    width: 760px;
    margin: auto;
}
/* IE5 Mac Hack \*/ 
#main-nav { padding-left: 11px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */
#main-nav ul { margin: 0; padding: 0; }
#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#about,
#main-nav li#about a { width: 71px; background-image: url(../images/about.jpg); }
#main-nav li#services,
#main-nav li#services a { width: 84px; background-image: url(../images/service.jpg); }
#main-nav li#portfolio,
#main-nav li#portfolio a { width: 95px; background-image: url(../images/Portfolio.jpg); }
#main-nav li#contact,
#main-nav li#contact a { width: 106px; background-image: url(../images/contact.jpg); }
#main-nav li a:hover {
background-position: 0 -50px;
}

#header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}

#header h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}

#sidebar-a {
float: right;
width: 280px;
line-height: 18px;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 280px;
line-height: 18px;
}
#content .padding {
padding: 25px;
}
#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
}
#footer #altnav {
width: 350px;
float: right;
text-align: right;
}
h1 {
margin: 0;
padding: 0;
}

#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

菜单图片如下：通过background-position来切换3个图片：

 

 

posted @ 2014-02-10 13:04  柠檬Cool  阅读(512)  评论(0)    收藏  举报