polo 360

作者: 清歌扶酒_6258 | 来源:发表于2018-06-10 21:52 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>POLO360</title>
        <link rel="stylesheet" type="text/css" href="aaa.css"/>
    </head>
    <body>
        <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="logo.png" alt="logo" />
                </a>
            </div>
        </div>
        <div class="banner w">
            <img src="banner01.png" alt="图片" />
            <div class="pointerDiv">
                <a href="#"></a>
                <a class="active" href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>
        <div class="content w clearfix">
            <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
            <div class="pl">
                <h2>Perfect Logic</h2>
                <p class="p1">All you want your website to do.</p>
                <div class="imgDiv">
                    <img src="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 class="imgDiv">
                    <img src="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 class="imgDiv">
                    <img src="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>
        <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="rss.png" /></a>
                    <a href="#"><img src="fb.png" /></a>
                    <a href="#"><img src="in.png" /></a>
                    <a href="#"><img src="yt.png" /></a>
                    <a href="#"><img src="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="#">
                    <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="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="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="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>
        <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>
        
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{
    background: url(bd-bg.png) repeat-x;
}
ul li{ list-style-type: none; }
.clearfix:before,
.clearfix:after{
    content: "";
    display: table;
    clear: both;
}
.clearfix{
    zoom:1;
}
.w{
    width: 940px;
    margin: 0 auto;
}
.header{
        padding-top: 37px;
        padding-bottom: 46px;
}
.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: #a1a1a1;
    text-decoration: underline;
}
.nav p{
    color: #b7b7b7;
    font: 11px tahoma;
}
.banner{    
    height: 356px;
    background: url(banner-bg.png) no-repeat bottom center;
    position: relative;
}
.pointerDiv{
    position: absolute;
    top: 314px;
    left: 15px;
}
.pointerDiv a{
    float: left;
    width: 17px;
    height: 17px;
    margin-left: 4px;
    background:url(sprite.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover{
    background:url(sprite.png) no-repeat -27px 0px;
}
.content h1{
    text-align: center;
    font: bold 24px Georgia;
    padding: 6px 0 20px 0;
    margin-bottom: 38px;
    background: url(line.png) no-repeat bottom center;
}
.content .pl , .content .cs , .content .uc,
.contact .sc , .contact .co , .contact .nu
{

    float: left;
    width: 300px;
}


.content .cs , .contact .co {
    margin: 0 20px;
}


.content h2{
    color: #11719e;
    font: 21px Georgia;
}

.content .p1{
    color: #8c8c8c;
    font: 12px Helvetica;
}


.content .imgDiv{
    width: 299px;
    height: 190px;
    background: url(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(sprite.png) no-repeat 0px -70px;
    
    text-decoration: none;

    color: #016999;
    font: 12px/40px Helvetica ;

    text-indent: 1em;

    margin-bottom: 35px;
}


.contact{
    background: url(line.png) no-repeat top center;
}



.contact .txt{
    width: 276px;
    height: 33px;
    line-height: 33px;

    background: url(input.png) no-repeat;
    
    _background-attachment: fixed;
    
    
    border: none;
    

    padding: 0px 10px;
    margin: 0px 0px 16px;
}

.contact .tarea{
    width: 276px;
    height: 114px;
    background: url(textarea.png) no-repeat;
    
    _background-attachment: fixed;

    border: none;
    
    overflow: auto;
    
    resize: none;
    
    
    padding: 10px;
    margin: 0;
}

.contact .btn{
    width: 163px;
    height: 32px;
    background: url(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: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{
    font: bold 18px/1 "gill sans mt";
    
    padding: 34px 0px 10px;
    
}


.sc .txt{
    
    margin-top: 15px;
    
    _margin-top: 18px;
    margin-bottom: 0px;
}



.nu p{
    color: #444;
    font: 12px/1 helvetica;
    height: 58px;
    
    _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;
}


.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;
        display: inline;
}



image.png

相关文章

  • Polo 360

    Polo 360 HTML css样式

  • polo 360

  • polo 360

    效果如下: 代码: 布局,架构 css

  • polo 360

  • 369

    polo360 HOM...

  • 2018-08-30

    POLO360 HOME Back to home...

  • polo360

    效果·如下 QQ图片20180610200631.png QQ图片20180610200707.png

  • polo360

    就算跌倒,也要豪迈的笑

  • Polo360

    reset.css style.css

  • 360首页

    样式代码: body{ background-image: url(../img/polo360.png); ...

网友评论

      本文标题:polo 360

      本文链接:https://www.haomeiwen.com/subject/nxmqeftx.html