polo 360的代码

作者: 白s圣诞节 | 来源:发表于2018-10-28 20:07 被阅读0次

polo 360的代码
360首页
Polo 360
polo 360
polo 360
polo 360
HTML/CSS制作网页
369
2018-08-30
polo360

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