html5+Css3 作一個婚紗網頁

時間 2019-12-06 標籤 html5+css3 html css 一個婚紗網頁
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>婚紗</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .inner{
            width: 1100px;
            margin: 0 auto;
        }
        .clear:after{
            content: "\200B";
            display: block;
            clear: both;

        }
        a{
            text-decoration: none;
        }
        .logo{
            display: block;
            float: left;
            margin-top: 19px;
            margin-bottom: 24px;
        }
        .tell{
            width: 246px;
            height: 74px;
            float: right;
            padding-left: 20px;
            background: url("../img/tel.png") no-repeat left top;
        }
        .z{
            font-size: 15px;
            color: #666;
        }
        .zz{
            font-size: 25px;
            color: #999;
        }
        .xia{
            margin-top: 15px;
            margin-left: 5px;
        }
        .nav{

        }
        .nav ul li{
            width: 125px;
            height: 18px;
            margin: 0 2px;
            float: left;
            list-style: none;
            text-align: center;
            line-height:18px;
            border-left: 1px dashed #666666;
            border-right: 1px dashed #666666;
        }
        .nav ul li a:link{color: black}
        .nav ul li a:hover{color: blue}

        .zui{
            position: relative;
            margin-top: 40px;
        }
        .zui p{
            width: 100%;
            height: 1px;
            background: red;
        }
        .huo{
            width:360px;
            height: 40px;
            line-height: 40px;
            color: red;
            font-size: 27px;
            text-align: center;
            background: #fff;
            position: absolute;
            left: 50%;
            top:-20px;
            margin-left:-180px;
            border-right: 2px solid red;
            border-left: 2px solid red;

        }
        .zi{
            position: relative;
            top: 40px;
        }
        .p1{
            text-align: center;
        }
        .p2{
            text-align: center;
        }
        .tu1{
            width: 1100px;
            height: 255px;
            position: relative;
            top: 69px;
        }
        .tuzuo{
            float: left;
            width: 541px;
            height: 254px;

        }
        .tuyou{
            float: right;
            width: 541px;
            height: 254px;
        }
        .tu2{
            width: 1100px;
            height: 290px;
            position: relative;
            top: 200px;
        }
        .d1{
            float: left;

        }
        .d2{
            float: left;
            margin-left: 20px;
        }
        .d3{
            float: left;
            margin-left: 20px;
        }
        .d4{
            float: right;
        }
        .tai{
            position: relative;
            top: 240px;
        }
        .tai p{
            width: 100%;
            height: 2px;
            background: red;
        }
        .dong{
            width:360px;
            height: 40px;
            line-height: 40px;
            color: red;
            font-size: 27px;
            text-align: center;
            background: #fff;
            position: absolute;
            left: 50%;
            top:-20px;
            margin-left:-180px;
            border-right: 2px solid red;
            border-left: 2px solid red;
        }
        .zi1{
            position: relative;
            top: 280px;
        }
        .p3{
            text-align: center;
        }
        .p4{
            text-align: center;
        }
        .inner1{
            position: absolute;
            top: 1670px;
            width: 1100px;
            height: 363px;

        }
        .hui1{
            width: 1099px;
            height: 167px;

        }
        .hui1zuo{
            float: left;
            width: 540px;
            height: 166px;
            background: #f1f1f1;
        }
        .hui1you{
            float: right;
            width: 540px;
            height: 166px;
            background: #f1f1f1;
        }
        .hui2{
            position: relative;
            top: 28px;
            width: 1099px;
            height: 167px;

        }
        .hui2zuo{
            float: left;
            width: 540px;
            height: 166px;
            background: #f1f1f1;
        }
        .hui2you{
            float: right;
            width: 540px;
            height: 166px;
            background: #f1f1f1;
        }
        .hui1zuo p a:link{color: black}
        .hui1zuo p a:hover{color: red}

        .hui1you p a:link{color: black}
        .hui1you p a:hover{color: red}

        .hui2zuo p a:link{color: black}
        .hui2zuo p a:hover{color: red}

        .hui2you p a:link{color: black}
        .hui2you p a:hover{color: red}
        .tai1{
            position: relative;
            top: 727px;
        }
        .tai1 p{
            width: 100%;
            height: 2px;
            background: #999;
        }
        .dong1{
            width:360px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            left: 50%;
            top:-20px;
            margin-left:-180px;
        }
        .ziti{
            margin-left: 80px;
            font-size: 30px;
        }
        .inner2{
            width: 1100px;
            height: 120px;
            position: absolute;
            top: 2170px;

        }
        .san{
            height: 33px;
        }
        .hang{
            margin-top: 10px;
            height: 78px;
        }
        .img1{
            margin-left: 528px;
        }
        .hang p{
            font-size: 15px;
            line-height: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="inner">
    <header class="clear">
        <img src="img/logo.png" class="logo">
        <div class="tell">
            <p class="z">全國聯繫電話</p>
            <p class="xia"><a href="#" class="zz">XXXXXXXXXXXXX</a></p>
        </div>
    </header>
    <div class="nav">
        <ul class="clear">
            <li>
                <a href="">網站首頁</a>
            </li>
            <li><a href="">關於咱們</a></li>
            <li><a href="">做品展現</a></li>
            <li><a href="">最新活動</a></li>
            <li><a href="">視頻特輯</a></li>
            <li><a href="">新聞動態</a></li>
            <li><a href="">聯繫咱們</a></li>
            <li><a href="">在線留言</a></li>
        </ul>
    </div>
    <div class="tupian">
        <img src="img/banner.gif">
    </div>
    <div class="zui">
        <p></p>
        <div class="huo">最新活動 ACTIVITY</div>
    </div>
    <div class="zi">
        <p class="p1">XX婚紗攝影品牌機構，咱們是一羣90後的創做團隊，致力打造高端外景婚紗品牌。讓你的精彩無處不在</p>
        <p class="p2">
            Xiao Rui wedding photography brand institutions, we are a group of 90 creative team, is committed to creating high-end
        </p>
    </div>
    <div class="tu1">
        <div class="tuzuo">
            <a href="javascript:"><img src="img/responsive_11.gif" ></a>
        </div>
        <div class="tuyou">
            <a href="javascript:"><img src="img/responsive_13.gif" ></a>
        </div>
    </div>
    <div class="tu2">
        <div class="d1">
            <dl>
                <dt><a href="javascript:"><img src="img/responsive_19.gif"></a></dt>
                <dd><a href="javascript:" style="margin-left: 30px;color: black">套系原價9999元 現價 4999元</a></dd>
            </dl>
        </div>
        <div class="d2">
            <dl>
                <dt><a href="javascript:"><img src="img/responsive_21.gif"></a></dt>
                <dd><a href="javascript:" style="margin-left: 13px;color: black">套系原價24999元 現價 12900元</a></dd>
            </dl>
        </div>
        <div class="d3">
            <dl>
                <dt><a href="javascript:"><img src="img/responsive_16.gif"></a></dt>
                <dd><a href="javascript:" style="margin-left: 20px;color: black">套系原價16999元 現價 8888元</a></dd>
            </dl>
        </div>
        <div class="d4">
            <dl>
                <dt><a href="javascript:"><img src="img/responsive_18.gif"></a></dt>
                <dd><a href="" style="margin-left: 30px;color: black">套系原價9999元 現價 4999元</a></dd>
            </dl>
        </div>
    </div>
    <div class="tai">
        <p></p>
        <div class="dong">最新動態 NEWS</div>
    </div>
    <div class="zi1">
        <p class="p3">魅力婚紗攝影會所-通往幸福的大門一生的幸福，一開始就幸福無比</p>
        <p class="p4">
            Xiao Rui wedding photography brand institutions, we are a group of 90 creative team, is committed to creating high-end
        </p>
    </div>
    <div class="inner1">
        <div class="hui1">
            <div class="hui1zuo">
            <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXX</a></h1>
                <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
            </div>
            <div class="hui1you">
                <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXX</a></h1>
                <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
            </div>
        </div>
        <div class="hui2">
            <div class="hui2zuo">
                <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXX</a></h1>
                <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
            </div>
            <div class="hui2you">
                <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXX</a></h1>
                <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p>
            </div>
        </div>
    </div>
    <div class="tai1">
        <p></p>
        <div class="dong1">
            <img src="img/bot_03.png">
            <font class="ziti" face="蘇新詩卵石體">魅力攝影|精心麗質</font>
        </div>
    </div>
    <div class="inner2">
        <div class="san">
            <img class="img1" src="img/bot_07.png">
            <img src="img/bot_09.png">
            <img src="img/bot_11.png">
        </div>
        <div class="hang">
            <p>版權全部（C）2014-2017XX攝影有限公司 滬ICP備09001000號</p><br>
            <p>全國免費熱線：400-888-6666 海口電話：0898-88*1211 0898-88*12211 QQ:615685472</p><br>
            <p>地址：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        </div>
    </div>
</div>

</body>
</html>