Web页面设计——POLO页面实践

秃头的毛睿

于 2020-10-05 23:01:31 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/108934129

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入清空所有样式的样式文件-->
    <link rel="stylesheet" type="text/css" href="../TOOLS/CSS/reset.css">
    <link rel="stylesheet" type="text/css" href="CSS/page-index.css">
</head>

<body>
    <div class="header wth">
        <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(2).png" alt="网站的Logo">
            </a>
        </div>
    </div>


    <div class="banner wth">
        <img id="banner_img" src="img\Banner_Img.png" alt="这是一个图片" width="100%">
    </div>


    <div class="content wth clearfix">
        <h1>Lorem ipsum dolor sit amet,consectetur adipisicing elit</h1>
        <div class="first">
            <h2>Perfect Logic</h2>
            <p class="div_p1">Are you want your website to do</p>
            <div class="imgDiv">
                <img src="img\er.jpg" alt="图片">
            </div>
            <p class="div_p2">I’ve seen things you people wouldn’t believe. Attack ships on fire off the shoulder of
                Orion. I watched C-beams glitter in the dark near the Tannhauser Gate. All those moments will be lost in
                time like tears in rain. Time to die.</p>
            <a href="#" class="buta">了解更多=></a>
        </div>
        <div class="second">
            <h2>Complete Solution</h2>
            <p class="div_p1">A tool anything and everything you can think</p>
            <div class="imgDiv">
                <img src="img\sna.jpg" alt="图片">
            </div>
            <p class="div_p2">Night gathers, and now my watch begins. It shall not end until my death. I shall take no
                wife, hold no lands, father no children. I shall wear no crowns and win no glory. I shall live and die
                at my post. I am the sword in the darkness. I am the watcher on the walls.</p>
            <a href="#" class="buta">了解更多=></a>
        </div>
        <div class="third">
            <h2>Uber Culture</h2>
            <p class="div_p1">Fresh Modern and ready for future</p>
            <div class="imgDiv">
                <img src="img\yi.jpeg" alt="图片">
            </div>
            <p class="div_p2">It was the best of times, it was the worst of times, it was the age of wisdom, it was the
                age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of
                Light.</p>
            <a href="#" class="buta">了解更多=></a>
        </div>
    </div>

    <div class="contact wth clearfix">
        <div class="diyi">
            <h2>Social Connection</h2>
            <p class="P_1">Never allow yourself to get discouraged and think that your life is insignificant and can’t
                make a change.</p>
            <div class="XiaoTubiao">
                <a href="#" class="mar"><img src="img\ditu.png" alt=""></a>
                <a href="#" class="mar"><img src="img\shipin.png" alt=""></a>
                <a href="#" class="mar"><img src="img\zhuye.png" alt=""></a>
                <a href="#" class="mar"><img src="img\ziliao.png" alt=""></a>
                <a href="#" class="mar"><img src="img\cart.png" alt=""></a>
            </div>
            <h2 class="nl">Newsletter</h2>
            <p class="P_1">Some of us get dipped in flat, some in satin, some in gloss. But every once in a while you
                find someone who's iridescent, and when you do, nothing will ever compare.</p>
            <input type="text" class="txt" placeholder="">
            <button type="submit" class="sub_btn">提交</button>
        </div>
        <div class="dier">
            <h2>Contact</h2>
            <form action="#">
                <input type="text" class="txt" placeholder="username">
                <input type="text" class="txt" placeholder="password">
                <textarea class="tarea" placeholder="message"></textarea>
                <button type="submit" class="sub_btn">提交</button>
            </form>
        </div>
        <div class="disan">
            <h2>News Updates</h2>
            
                <img src="img\MR (1).png" alt="" width="80px">
                <p>Diligence is the mother of good plough deep while shuggards sleep，you will have corn to sell and to
                    keep.( America)</p>
            
            
                <img src="img\MR (3).png" alt="" width="80px">
                <p>Four short words sum up what has lifted most successful individuals above the crowd: a little bit
                    more.</p>
            
            
                <img src="img\MR (5).png" alt="" width="80px">
                <p id="JiYa">Truth needs no colour; beauty，no pencil. </p>
                <button type="submit" class="sub_btn">提交</button>
        </div>
    </div>

    <div class="footer">
        <div class="wth">
            <p class="copy"> Copyright 2010.Studio VIVROCKS.All Rights Reserved</p>
            <p>Site Power by Wordpress . Design and Developed by VIVROCKS.</p>
            <p><a href="#">Home</a>|<a href="#">About</a>|<a href="#">Products</a>|<a href="#">Address</a>|<a href="#">Services</a>|<a href="#">Contact</a></p>
            <p><a href="#">Privary Policy</a> |<a href="#">Terms of use</a></p>
        </div>
    </div>
</body>

</html>

/*解决高度塌陷问题*/
.clearfix:before,
.clearfix::after{
    content: "";
    display: table;
    clear: both;
}


body{
    background: url(../img/bd-bgt.png) repeat-x;
    /*height: 1000px;*/
}

/*宽度样式设置*/
.wth{
    width: 940px;
    margin: 0 auto;
}
/*头部的样式*/
.header{
    /*background-color: brown;*/
    padding-top: 37px;
    padding-bottom: 46px;
}
.logo{
    margin-left: 18px;
}

/*导航栏的设置*/
.nav{
    float: right;
}
.nav li{
    float: left;
    margin-top: 20px;
    padding: 0 10px 8px;
    border-left: 1px #d6d6d6 dotted;
}
.nav a{
    color: #666;
    font: bold 14px Georgia;
    text-decoration: none;
}
.nav p{
    color: #b7b7b7;
    font: 11px tahoma;
}
.nav a:hover{
    color: #a1a1a1;
    text-decoration: underline;
}
.content{
}
.content h1{
    text-align: center;
    font: bold 24px Georgia;
    padding: 6px 0 20px 0;
    margin-bottom: 38px;
}
.first 
{
    
    margin-left:12px;
    width: 300px;
    height: 500px;
    float: left;
    /*background-color: blue;*/
} 
.second 
{
    margin-left:12px;
    width: 300px;
    height: 500px;
    float: left;
    /*background-color: brown;*/
}
.third
{
    margin-left:12px;
    width: 300px;
    height: 500px;
    float: left;
    /*background-color: cadetblue;*/
}

.content h2{
    color: #11719e;
    font:21px Georgia;
}
.div_p1{
    color: #8c8c8c;
    font :12px Helvetica;
}
.div_p2{
    height: 90px;
    color: #3e3e3e;
    font: 13px Helvetica;
}
.content img{
    width: 100%;
    height: 100%;
}
.imgDiv{
    width: 299px;
    height: 202px;
    margin: 16px 0 10px 0px;
}
.buta{
    font:30px black;
    height: 50px;
    width: 150px;
}
.diyi 
{
    
    margin-left:12px;
    width: 300px;
    height: 500px;
    float: left;
    /*background-color: blue;*/
} 
.dier
{
    margin-left:12px;
    width: 300px;
    height: 500px;
    float: left;
    /*background-color: brown;*/
}
.disan
{
    margin-left:12px;
    width: 300px;
    height: 500px;
    float: left;
    /*background-color: cadetblue;*/
}
.txt{
    width: 286px;
    height: 33px;
    /*background: url(../img/shurukuang.png) no-repeat;*/
    border:  #8c8c8c 5px solid;
    border-radius: 15px;
    margin: 15px 0 15px;
}
.tarea{
    width: 286px;
    height: 134px;
    border:  #8c8c8c 5px solid;
    border-radius: 15px;
    margin: 10px 0 10px;
}
.contact h2{
    color: #444;
    font:28px/1 georgia;
    border-bottom: 1px dashed #d3d3d3;
    padding: 30px 0px 10px;
    margin-bottom: 10px;
}
.sub_btn{
    height: 40px;
    width: 150px;
    font: 24px Helvetica;
    color: white;
    font-weight: 900;
    margin-top: 10px;
    border: white 3px solid;
    background-color: #666;
    border-radius: 10px;
    /*设置鼠标的指针是小手*/
    cursor: pointer;
}
.P_1{
    color: #444;
    font: 12px Helvetica;
}
.mar{
    margin-right: 4px;
}
.XiaoTubiao img{
    margin-top: 20px;
    width: 50px;
}
.nl{
    margin-top: 50px;
}
.diyi .txt{
    margin: 0;
    margin-top:7px;
    margin-bottom: 5px;
}
.disan p{
    color: #444;
    font: 12px/1  helvetica;
    height: 80px;
    margin-top: 15px;
    border-bottom: 1px dashed #d3d3d3;
}
.disan img{
    float: left;
    margin-right: 8px;
}
#JiYa{
    margin-bottom: 40px;
}
.footer{
    height: 173px;
    background: #333;
    border-top: 10px solid #4c4c4c;
}
.footer a,.footer p{
    color: #999;
    font:11px Helvetica;
}
.footer .copy{
    float: right;
}
.footer p{
    margin-left: 8px;
    margin-right: 23px;
    margin-bottom: 6px;
}
.footer .wth{
    padding-top: 18px;
}
.footer a:hover{
    color: #cccaca;
    text-decoration: underline;
}

秃头的毛睿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web页面设计——POLO页面实践

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  <lin.
复制链接

扫一扫