用css网站布局之十步实录(精简)_css网站布局实录-优快云博客

总的网站构建如图：

网站布局：

最终的css.css文件如下：

#page-container {
width: 760px;
margin: auto;

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

html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}

#main-nav {
background: red;
height: 50px;
}
#header {

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

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

h1 {
margin: 0;
padding: 0;
}

#sidebar-a {
float: right;
width: 280px;
/*background: darkgreen;*/
line-height: 18px;

}
#sidebar-a .padding {
padding: 25px;
}

#content {
margin-right: 280px;
/*background: green;*/
line-height: 18px;

}
#content .padding {
padding: 25px;
}

#content h2 { /*去掉白色区域*/
margin: 0;
padding: 0;
padding-bottom: 15px;

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

}

#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
/*background: orange;*/
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;

}

#footer a { /*下划线消失*/
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
color: #db6d16;
}

#footer #altnav { /*文本向右对其*/
width: 350px;
float: right;
text-align: right;
}

/*导航*/
#main-nav { height: 50px; }
#main-nav ul { margin: 0; padding: 0; }

#main-nav { padding-left: 11px; }
#main-nav { padding-left: 11px; overflow: hidden; }

#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(images/nav/about.gif); } /*自己存得照片的位置*/
#main-nav li#services,
#main-nav li#services a { width: 84px; background-image: url(images/nav/services.gif); }
#main-nav li#portfolio,
#main-nav li#portfolio a { width: 95px; background-image: url(images/nav/portfolio.gif); }
#main-nav li#contact,
#main-nav li#contact a { width: 106px; background-image: url(images/nav/contact.gif); }

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;
}

body.about #header {
height: 150px;
background: #db6d16
url(images/nav/about.jpg);
}
body.services #header {
height: 150px;
background: #db6d16
url(images/nav/services.jpg);
}
body.portfolio #header {
height: 150px;
background: #db6d16
url(images/nav/portfolio.jpg);
}
body.contact #header {
height: 150px;
background: #db6d16
url(images/nav/contact.jpg);
}

最终的htm文件代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css.css";</style>
</head>
<body >
<div id="page-container">
<div id="main-nav">

<div class="about">
<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>
<div id="header"><h1><img src="images/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/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/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>

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 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>
</div>
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>