前端知识polo360首页

作者: Pickupthesmokes | 来源:发表于2018-09-16 14:24 被阅读0次

前端知识polo360首页
Polo360首页
polo360首页
4.8 Polo360首页
369
2018-08-30
Web框架体系
作业（补）开班信息表-雪碧图-Polo360
面向开发人员的机器学习指南
2020-08-24

效果展示

Screenshot_2018-09-16 polo360.png

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>polo360</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div class="heard 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>
        <a href="#" alt="polo360">
        <img class="logo" src="img/logo.png" alt="logo">
        </a>
    </div>
    <div class="banner w">
        <img src="img/banner/banner.png" alt="banner01">
        <div class="pionterdiv">
            <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="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 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 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>
    <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/1.png" alt=""></a>
                <a href="#"><img src="img/2.png" alt=""></a>
                <a href="#"><img src="img/3.png" alt=""></a>
                <a href="#"><img src="img/4.png" alt="img/4.png"></a>
                <a href="#"><img src="img/5.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>
            <input class="txt" type="text" placeholder="your name">
            <button class="btn">Subscribe</button>
        </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" name="" id="" placeholder="message" cols="30" rows="10"></textarea>
                <button class="btn">Send it</button>
            </form>
        </div>
        <div class="nu">
            <h2>News Updates</h2>
            <p>
                <img src="img/pic/1.jpg" 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.jpg" 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.jpg" alt="">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>
    <!--[if IE 6]>
    <script 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>

css代码

body{
    background:url(../img/bd-bg.png) repeat-x;
    /* height: 3000px; */
}
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
    clear: both;
}
.clearfix{
    zoom:1;
}
.w{
    width: 940px;
    margin: 0 auto;
}
.heard{
    margin-bottom: 46px;
    margin-top: 37px;
    /* background-color: #cfa; */
}
.logo{
    margin-left: 15px;
}
.nav{
    float: right;
}
.nav li{
    float: left;
    padding: 0px 10px 8px;
    border-left: 1px #d6d6d6 dotted;
    margin-top: 21px;
}
.nav a{
    font: blod 14px Georgia;
    color: #666666;
    text-decoration: none;
    vertical-align: 50%;
}
.nav a:hover{
    color: #d8d8d8;
    text-decoration: underline;
}
.nav p{
    font:11px Tahoma;
    color: #b7b7b7;
}
.banner{
    height:356px;
    background:url(../img/bannershowdom.png) no-repeat bottom center;
    position: relative;
}
.pionterdiv{
    position: absolute;
    top: 314px;
    left: 15px;
}
.pionterdiv a{
    width: 17px;
    height: 17px;
    float: left;
    background:url(../img/pionter1.png) no-repeat;
    margin-left: 4px;
}
.pionterdiv .active,.pionterdiv a:hover{
    background:url(../img/pionter2.png) no-repeat;
}
/* .content{
    background-color: red;
} */
.content h1{
    text-align: center;
    font:bold 24px Georgia;
    padding: 6px 0px 20px 0px; 
    background:url(../img/line.png) no-repeat bottom center;
    margin-bottom: 30px;
}
.content .pl,.content .cs,.content .uc,.contact .sc,.contact .co,.contact .nu{
    float: left;
    width: 300px;
    /* height: 100px; */
    /* background-color: yellow; */
}
.content .cs,.content .co{
    margin: 0px 20px;
}
.content h2{
    color: #11719e;
    font:21px Georgia;
}
.content .p1{
    color: #8c8c8c;
    font:12px Helvetica;
}
.content .imgdiv{
    width: 299px;
    height: 190px;
    background:url(../img/img-bg.png) no-repeat;
    margin-top: 15px;
    margin-bottom: 15px;
    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/btn1.png) no-repeat;
    color: #016999;
    font: 12px/40px Helvetica;
    text-indent: 1em;
    text-decoration: none;
    margin-bottom: 35px;
}
.contact{
    background: url(../img/line.png) no-repeat top center;
}
/* .contact .sc, .contact .co, .contact .nu{
    height: 500px;
    background-color: yellow;
} */
.contact .txt{
    width: 276px;
    height: 33px;
    line-height: 33px;
    background: url(../img/kuang1.png) no-repeat;
    _background-attachment:fixed;
    border: none;
    padding:0px 10px;
    margin: 0px 0px 16px;
}
.contact .tarea{
    width: 276px;
    height: 114px;
    background: url(../img/kuang3.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/btn.jpg) ;
    border: none;
    padding: 0;
    margin: 0;
    margin: 11px 0px 23px;
    color: #fff;
    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;
}
.co{
    margin-right: 20px;
}
.sc{
    margin-right: 20px;
}
.sc .p1{
    color: #444;
    font: 12px/1 Helvetica;
}
.sc .icon{
    font-size: 0px;
    margin-top: 4px;
}
.sc .icon a{
    margin-right: 6px;
}
.sc .nl{
    color: #444;
    font: bold 18px/1 "Gill Sans MT";
    padding: 34px 0px 10px;
}
.sc .txt{
    margin-bottom:0px;
    margin-top: 15px;
}
.nu img{
    float: left;
    margin-right: 8px;
}
.nu p{
    color: #444;
    height: 58px;
    _height: 60px;
    font: 12px/1 Helvetica;
    border-bottom: 1px dashed #d3d3d3;
    margin-bottom: 15px;
    padding-bottom: 8px;
}
.nu .no-margin{
    margin-bottom: 0px;
}
.footer{
    height: 173px;
    background-color:#333;
    clear: both;
    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 .w{
    padding-top:18px;
}
.footer p{
    margin-left: 8px;
    margin-right: 24px;
    margin-bottom: 10px;
}