```
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Polp360首页</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <!--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 class="logo"> <a href="#" title="这是一个非常漂亮的网站"> <img src="img/logo.png" alt="网站logo"> </a> </div> </div> <!--header开始--> <!--bender开始--> <div class="banner w"> <img src="img/banner/banner01.png" alt="这是一个Banner图片"> <div class="dian"> <a href="#"></a> <a class="active" href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> </div> <!--bender结束--> <!--内容ccentent开始--> <div class="content w clearfix"> <h1>Lorem ipsum dolor sit amet,consectetur adipisicing elit</h1> <!--放置内容的三个div--> <div class="pl"> <h2>Perfect Logic</h2> <p>All you want your wbsite to do.</p> <!--创建一个图片的div--> <div class="imgDiv"> <img src="img/pic/tup1.jpg" alt="小男孩"> </div> <p class="p2">Sed ut perspciatis unde omnis iste natus error sit voluptatem accusantium doloremque landantium, ,totam rem aperiam,eaque ipsa quae ab illo invenetore veritatis etquasi architecto beatae dicta sunt explicabo. </p > <a href="#" class="lm">Learn More</a> </div> <div class="cs"> <h2>Complete Solution</h2> <p> A tool anything and everything you can think 7</p> <!--创建一个图片的div--> <div class="imgDiv"> <img src="img/pic/tup2.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 href="#" class="lm">Learn More</a> </div> <div class="uc"> <h2>Uber Culture</h2> <p>Fresh. Modern and ready for future</p > <!--创建一个图片的div--> <div class="imgDiv"> <img src="img/pic/tup3.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 href="#" class="lm">Learn More</a> </div> </div> <!--内容centent结束--> <!--联系中栏--> <div class="contact w clearfix"> <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 class="icon"> <a href="#"><img src="img/wifi.png" alt=""></a> <a href="#"><img src="img/f.png" alt=""></a> <a href="#"><img src="img/in.png" alt=""></a> <a href="#"><img src="img/you.png" alt=""></a> <a href="#"><img src="img/t.png" alt=""></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 name"> <button class="btn">Send it</button> </form> </div> <!--联系栏中间--> <div class="co"> <h2>Contact</h2> <form action="#"> <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" alt=""> 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" alt=""> 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" alt=""> 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结束 -->
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script> <script type="text/javacript"> DD_belatedPNG.fix('div,img,a,h1);</script> <![endif]--> </body> </html> ``````/*设置body*/body{ background: url(../img/shang.png) repeat-x;}/*解决高度塌陷问题*/.clearfix:before,.clearfix:after{ content:" "; display:table; clear:both;}.clearfix{ zoom:1;}/*固定元素的宽度和居中*/
.w{ width: 940px; margin: 0 auto;}.header{
/*background-color: #bfa;*/ padding-top:37px; padding-bottom: 46px;}/*设置logo的位置*/
.logo{ margin-left: 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: #a5a4a4; text-decoration: underline;}.nav p{
color: #b7b7b7; font: 11px Tahoma;}/*header样式*//*设置Banner样式*/
.banner{ height: 356px; background: url(../img/yinying.png) no-repeat bottom center; position: relative;}/****************设置小圆点****************/
.dian{ position: absolute; top: 314px; left: 15px;}.dian a{
float: left; /*display: inline-block;*/ width: 17px; height: 17px; margin-left: 4px; background: url(../img/dian.png) no-repeat;}.dian .active,
.dian a:hover{ background: url(../img/dianzhu.png) no-repeat;}/****************设置内容centent****************/
.content h1{
text-align: center;/*文字居中*/ font: bold 24px Georgia; padding: 6px 0 20px 0; margin-bottom: 30px; background: url(../img/yinying2.png) no-repeat bottom center;}/*中间的三个div*/
/*.content{*/ /*background-color: red;*//*}*/.content .pl, .content .cs, .content .uc,.contact .sc, .contact .co, .contact .nu{ float: left; width: 300px; /*background-color: yellow;*/}.content .cs, .content .co{
margin: 0 20px;}.content h2{
color: #11719e; font: 21px Georgia;}.content .p1 {
color: #8c8c8c; font: 12px Helvetica;}/*设置图片div*/
.imgDiv{ width: 299px; height: 190px; background: url(../img/tupyy1.png) no-repeat; margin: 15px 0px; padding-top: 12px; text-align: center;/*内联元素可以像文字居中一样*/}.content .p2{
height: 92px; color: #3e3e3e; font: 13px Helvetica; word-spacing: 2px;}.content .lm{
display: block; width: 163px; height: 40px; background: url(../img/an1.png) no-repeat; color: #016999; font: 12px/40px Helvetica; text-indent: 1em; text-decoration: none; margin-bottom: 35px;}.contact{ background: url(../img/yinying2.png) no-repeat top center;}.contact .txt{
width: 276px; height: 33px; line-height: 33px; background: url(../img/kuang.png) no-repeat; _background-attachment: fixed; border: none; padding:0 10px; margin:0px 0px 16px;}/*谷歌使用*/@media screen and (-webkit-min-device-pixel-ratio:0) { .contact .tarea { display:block; }}.contact .tarea{ width: 276px; height: 114px; background: url(../img/wenbk.png) no-repeat; _background-attachment: fixed; border: none; overflow: auto;/*去除滚动条*/ /*设置文本域不能调整大小*/ resize: none; padding:10px; margin:0; /*display: block;*/}.contact .btn{
width: 163px; height: 32px; background: url(../img/an2.png) no-repeat; border: none; padding:0; margin:11px 0 23px; color:white; font:13px Georgia; text-align: left; text-indent:1em; /*给主表指针设置样式--设置成小手*/ 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{ font-size: 0; margin-top: 4px;}.sc .icon a{ margin-right: 6px;}.sc .nl{ color:#444; font:bold 18px/1 "Gill Sans MT"; padding:34px 0 10px;}.sc .txt{ margin-top: 15px; /*IE6*/ _margin-top: 18px; margin-bottom: 0px;}.nu img{ float:left; margin-right: 8px;}.nu p{ color:#444; font:12px/1 Heletica; _height:60px; height: 58px; border-bottom: 1px dashed #d3d3d3; margin-bottom: 15px; padding-bottom: 8px;}.nu .no-margin{ margin-bottom:0px;}
.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;}.footer a:hover{ color:#d1d2d2; text-decoration: underline;}.footer .copy{ float:right;}.footer p{ margin-left: 8px; margin-right: 60px; margin-bottom:10px;}.footer .w{ padding-top:18px;}```