html5+Css3做⼀个婚纱⽹页<!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: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{
.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;
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;
网页float是什么意思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:" >套系原价9999元现价 4999元</a></dd>
</dl>
</div>