html

首先，引入reset.css用来清除浏览器的默认样式

<link rel="stylesheet" type="text/css" href="css/reset-min.css"/>

引入page-index.css 设置主页的样式

<link rel="stylesheet" type="text/css" href="css/page-index.css"/>

下面完成body标签的内容 header部分:

<!--创建头部div header--> <!--header开始--> <div class="header w"> <!-- 创建一个导航条 --> <ul class="nav"> <li> <a href="#">HOME</a> <p>Back to home</p> </li> <li> <a href="#">PRODUCTS</a> <p>What we have for you</p> </li> <li> <a href="#">SERVICES</a> <p>Things we do</p> </li> <li> <a href="#">BLOG</a> <p>Follow our updates</p> </li> <li> <a href="#">CONTACT</a> <p>Ways to reach us</p> </li> </ul> <!-- 在div中设置logo --> <div class="logo"> <a href="#" title="一个非常非常好的网站"> <img src="img/logo.png" alt="网站的logo" /> </a> </div> </div> <!--header结束-->

对应的格式：

/*设置logo的位置*/ .logo{ margin-left: 15px;//设置外边距15px } /* * 设置导航条 */ .nav{ /*设置向右浮动*/ float: right; /*设置一个上外边距*/ margin-top: 22px; } .nav li{ /*设置向左浮动*/ float: left; /*设置左右内边距*/ padding: 0 10px 8px; /*设置左边框*/ border-left: 1px #d6d6d6 dotted; } /*设置导航条中的超链接*/ .nav a{ /*设置字体颜色*/ color: #666; /*设置字体*/ font: bold 14px Georgia; /*去除下划线*/ text-decoration: none; } /*设置超链接的移入效果*/ .nav a:hover{ color: #a1a1a1; text-decoration: underline; } /* * 设置导航中的小标题 * 在chrome浏览器中字体最小支持到12px * 1-11都显示为12px */ .nav p{ /*字体颜色*/ color: #b7b7b7; /*字体大小*/ font: 11px tahoma; }

banner部分：

<!--banner开始--> <div class="banner w"> <img src="img/banner/banner01.png" alt="这是一个图片" /> <!-- 创建一个div，用于放置导航按钮 --> <div class="pointerDiv"> <a href="#"></a> <a class="active" href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> </div> <!--banner结束-->

对应的格式：

/* * 设置banner */ .banner{ /*设置高度*/ height: 356px; /*设置背景*/ background: url(../img/banner-bg.png) no-repeat bottom center; /*开启一个相对定位*/ position: relative; } /*设置导航按钮*/ .pointerDiv{ /*开启绝对定位*/ position: absolute; /*为导航点进行定位*/ top: 314px; left: 15px; } .pointerDiv a{ /*设置a浮动*/ float: left; /*设置宽度和高度*/ width: 17px; height: 17px; /*设置一个左外边距*/ margin-left: 4px; background:url(../img/sprite.png) no-repeat; } /*设置超链接的hover*/ .pointerDiv .active, .pointerDiv a:hover{ background:url(../img/sprite.png) no-repeat -27px 0px; }

Content部分：

<!--content开始--> <div class="content w clearfix"> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1> <!-- 放置内容的三个div --> <div class="pl"> <h2>Perfect Logic</h2> <p class="p1">All you want your website to do.</p> <!-- 创建图片的div --> <div class="imgDiv"> <img src="img/pic/pic1.jpg" alt="小男孩" /> </div> <p class="p2"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt </p> <a class="lm" href="#">Learn More</a> </div> <div class="cs"> <h2>Complete Solution</h2> <p class="p1">A tool anything and everything you can think</p> <!-- 创建图片的div --> <div class="imgDiv"> <img src="img/pic/pic2.jpg" alt="小女孩" /> </div> <p class="p2"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem. </p> <a class="lm" href="#">Learn More</a> </div> <div class="uc"> <h2>Uber Culture</h2> <p class="p1">Fresh. Modern and ready for future</p> <!-- 创建图片的div --> <div class="imgDiv"> <img src="img/pic/pic3.jpg" alt="大绿球" /> </div> <p class="p2"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> <a class="lm" href="#">Learn More</a> </div> </div> <!--content结束-->

对应的格式：

/*设置content部分*/ .content h1{ /*设置文本居中*/ text-align: center; /*设置字体*/ font: bold 24px Georgia; /*设置上内边距*/ padding: 6px 0 20px 0; /*设置一个下外边距*/ margin-bottom: 38px; /*设置背景*/ background: url(../img/line.png) no-repeat bottom center; } /* * 中间的三个div */ .content .pl , .content .cs , .content .uc, .contact .sc , .contact .co , .contact .nu { /*向左浮动*/ float: left; width: 300px; } /* * 给div添加左右边距 */ .content .cs , .contact .co { margin: 0 20px; } /*设置div中的标题*/ .content h2{ color: #11719e; font: 21px Georgia; } .content .p1{ color: #8c8c8c; font: 12px Helvetica; } /*设置图片div*/ .content .imgDiv{ width: 299px; height: 190px; background: url(../img/img-bg.png) no-repeat; /*设置上下外边距*/ margin: 16px 0px 10px 0px; /*设置水平居中*/ text-align: center; /*设置上内边距*/ padding-top: 12px; } /*设置第二个段落*/ .content .p2{ height: 92px; color: #3e3e3e; font: 13px Helvetica; word-spacing: 2px; } /** * 设置按钮的样式 */ .content .lm{ /*设置块元素*/ display: block; /*设置宽和高*/ width: 163px; height: 40px; /*设置背景*/ background: url(../img/sprite.png) no-repeat 0px -70px; /*设置下划线*/ text-decoration: none; /*设置文字*/ color: #016999; font: 12px/40px Helvetica ; /*设置文字的缩进*/ text-indent: 1em; /*设置下外边距*/ margin-bottom: 35px; }

contract、footer部分：

<!--contact开始--> <div class="contact w clearfix"> <!-- 创建三栏div --> <div class="sc"> <h2>Social Connection</h2> <!-- 设置段落 --> <p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p> <!-- 设置小图标的div --> <div class="icon"> <a href="#"><img src="img/rss.png" /></a> <a href="#"><img src="img/fb.png" /></a> <a href="#"><img src="img/in.png" /></a> <a href="#"><img src="img/yt.png" /></a> <a href="#"><img src="img/tw.png" /></a> </div> <h2 class="nl">Newsletter</h2> <p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p> <!-- 创建一个表单 --> <form action="#"> <input class="txt" type="text" placeholder="your email address" /> <button class="btn">Subscribe</button> </form> </div> <!-- 联系栏中间 --> <div class="co"> <!-- 创建一个标题 --> <h2>Contact</h2> <!-- 创建一个表单 --> <form action="#"> <!-- 在文本框和文本域中可以通过placeholder来指定提示文字（水印） 这个属性在IE8及以下的浏览器中不支持，如果要兼容IE8需要使用JS --> <input class="txt" type="text" placeholder="your name" /> <input class="txt" type="text" placeholder="your email address" /> <textarea class="tarea" placeholder="message"></textarea> <button class="btn">Send it</button> </form> </div> <div class="nu"> <h2>News Updates</h2> <p> <img src="img/pic/1.gif"/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> <img src="img/pic/2.gif"/> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p> <p class="no-margin"> <img src="img/pic/3.gif"/> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium. </p> <button class="btn">Visit our Blog</button> </div> </div> <!--contact结束--> <!--footer开始--> <div class="footer"> <div class="w"> <p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p> <p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p> <p><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Products</a> | <a href="#">Services</a> | <a href="#">Contact</a></p> <p><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p> </div> </div> <!--footer结束--> <!-- 处理ie6的png问题 --> <!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script> <script type="text/javascript">DD_belatedPNG.fix("div,img,a,h1");</script> <![endif]--> </body> </html>

contract、footer尾部对应的css格式：

/*设置背景*/ .contact{ background: url(../img/line.png) no-repeat top center; } /** * 设置联系栏中的表单项 */ .contact .txt{ width: 276px; height: 33px; line-height: 33px; /* * 设置背景图片 */ background: url(../img/input.png) no-repeat; /*单独为IE6设置一个背景不随元素滚动*/ _background-attachment: fixed; /* * 去除默认边框 */ border: none; /*去除默认的内边距*/ padding: 0px 10px; margin: 0px 0px 16px; } .contact .tarea{ width: 276px; height: 114px; background: url(../img/textarea.png) no-repeat; /*单独为IE6设置一个背景不随元素滚动*/ _background-attachment: fixed; /* * 去除默认边框 */ border: none; /* * 去除滚动条 */ overflow: auto; /* * 设置文本域不能调整大小 */ resize: none; /* * 去除默认内外边距 */ padding: 10px; margin: 0; } .contact .btn{ width: 163px; height: 32px; background: url(../img/sprite.png) no-repeat 0px -27px; border: none; /* * 去除默认内外边距 */ padding: 0; margin: 11px 0px 23px; /*设置字体*/ color: white; font: 13px Georgia; /*设置文字的位置*/ text-align: left; text-indent: 1em; /* * cursor可以用来设置鼠标指针的样式 */ cursor:pointer ; } /* * 设置标题 */ .contact h2{ color: #444; font: 18px/1 georgia; /** * 设置下边框 */ border-bottom: 1px dashed #d3d3d3; /* * 设置内边距 */ padding: 44px 0px 10px; /*设置一个下外边距*/ margin-bottom: 15px; } /*设置联系栏左侧*/ .sc .p1{ color: #444; font: 12px/1 Helvetica; } /*设置小图标*/ .sc .icon{ /*设置字体大小为0，去除空格*/ font-size: 0; /*设置上外边距*/ margin-top: 4px; } .sc .icon a{ margin-right: 6px; } /*设置左侧的第二个标题*/ .sc .nl{ font: bold 18px/1 "gill sans mt"; /*设置内边距*/ padding: 34px 0px 10px; } /*设置左侧的表单项*/ .sc .txt{ /*设置上外边距*/ margin-top: 15px; /*为ie6设置上外边距*/ _margin-top: 18px; margin-bottom: 0px; } /*设置联系栏右侧*/ .nu p{ color: #444; font: 12px/1 helvetica; height: 58px; /*单独为IE6设置一个高度*/ _height: 60px; /** * 设置下边框 */ border-bottom: 1px dashed #d3d3d3; margin-bottom: 14px; padding-bottom: 9px; } .nu .no-margin{ margin-bottom: 0px; } .nu img{ /*设置向左浮动*/ float: left; margin-right: 8px; } .nu .btn{ _margin-left: -1em; } /*设置底部*/ .footer{ height: 173px; background: #333; /*设置上边框*/ border-top: 10px solid #4c4c4c; } /* * 设置底部的文字的样式 */ .footer a , .footer p{ color: #999; font: 11px Helvetica ; text-decoration: none; } /* * 设置a元素的hover */ .footer a:hover{ color: #cccaca; text-decoration: underline; } .footer p{ margin-left: 8px; margin-right: 23px; margin-bottom: 6px; } .footer .w{ padding-top:18px ; } .footer .copy{ float: right; /*处理双倍边距的bug*/ display: inline; }