html5+Css3 做一个婚纱网页

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">XXXXXXXXXXXXXa>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">最新活动 ACTIVITYdiv>
    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">最新动态 NEWSdiv>
    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:">XXXa>h1>
                <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
            div>
            <div class="hui1you">
                <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXXa>h1>
                <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
            div>
        div>
        <div class="hui2">
            <div class="hui2zuo">
                <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXXa>h1>
                <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
            div>
            <div class="hui2you">
                <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXXa>h1>
                <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>p>
                <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXXa>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:615685472p><br>
            <p>地址:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXp>
        div>
    div>
div>

body>
html>

你可能感兴趣的:(html5/Css3)