html5+Css3 做一个婚纱网页

来源:互联网 发布:相片合成软件 编辑:程序博客网 时间:2024/03/29 16:01
<!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>