html文档
</head>
<body>
<div class="box">
<div class="top">
<img src="img/banner.jpg" />
</div>
<div class="nav">
<ul>
<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="aside">
<img src="img/login.jpg"/>
<p>用户：
<input type="text" />
</p>
<p>密码：
<input type="password" />
</p>
<input type="button" value="登录"/>
<button>注册</button>
<a href="#">忘记密码</a>
<img src="img/category.jpg"/>
<h5>用途</h5>
<ul>
<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>
<h5>花材</h5>
<ul>
<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>
<h5>价格</h5>
<ul>
<li><a href="#">100~200元</a></li>
<li><a href="#">200~300元</a></li>
<li><a href="#">300~400元</a></li>
<li><a href="#">400~500元</a></li>
<li><a href="#">500~600元</a></li>
<li><a href="#">600~800元</a></li>
<li><a href="#">800元以上</a></li>
</ul>
</div>
<div class="section">
<div class="section_top">
<img src="img/latest.jpg"/>
<a href="#"><img src="img/new1.jpg" class="img1"/></a>
<a href="#"><img src="img/new2.jpg" class="img1"/></a>
<a href="#"><img src="img/new3.jpg" class="img1"/></a>
</div>
<div class="section_mid">
<img src="img/recommend.jpg"/>
<div class="block">
<dt><a href="#"><img src="img/flower1.jpg" class="img2"/></a>
<dd><a href="#">幸福的味道</a></dd>
<dd><a href="#">¥288元</a></dd>
</dt>
</div>
<div class="block">
<dt><a href="#"><img src="img/flower2.jpg" class="img2"/></a>
<dd><a href="#">阳光守护你</a></dd>
<dd><a href="#">¥300元</a></dd>
</dt>
</div>
<div class="block">
<dt><a href="#"><img src="img/flower3.jpg" class="img2"/></a>
<dd><a href="#">温情永远</a></dd>
<dd><a href="#">¥268元</a></dd>
</dt>
</div>
<div class="block">
<dt><a href="#"><img src="img/flower4.jpg" class="img2"/></a>
<dd><a href="#">爱无界</a></dd>
<dd><a href="#">¥318元</a></dd>
</dt>
</div>
<div class="block">
<dt><a href="#"><img src="img/flower5.jpg" class="img2"/></a>
<dd><a href="#">亲亲宝贝</a></dd>
<dd><a href="#">¥368元</a></dd>
</dt>
</div>
<div class="block">
<dt><a href="#"><img src="img/flower6.jpg" class="img2"/></a>
<dd><a href="#">相信是缘</a></dd>
<dd><a href="#">¥188元</a></dd>
</dt>
</div>
<div class="block">
<dt><a href="#"><img src="img/flower7.jpg" class="img2"/></a>
<dd><a href="#">水晶童话</a></dd>
<dd><a href="#">¥198元</a></dd>
</dt>
</div>
<div class="block">
<dt><a href="#"><img src="img/flower8.jpg" class="img2"/></a>
<dd><a href="#">天使之爱</a></dd>
<dd><a href="#">¥268元</a></dd>
</dt>
</div>
</div>
<div class="section_bot">
<img src="img/new.jpg"/>
<div class="block">
<dt><a href="#"><img src="img/flower9.jpg" class="img2"/></a>
<dd><a href="#">粉色迷情</a></dd>
</dt>
</div>
<div class="block">
<dt><a href="#"><img src="img/flower10.jpg" class="img2"/></a>
<dd><a href="#">海岸的优雅</a></dd>
</dt>
</div>
<div class="block">
<dt><a href="#"><img src="img/flower11.jpg" class="img2"/></a>
<dd><a href="#">百年地中海</a></dd>
</dt>
</div>
<div class="block">
<dt><a href="#"><img src="img/flower12.jpg" class="img2"/></a>
<dd><a href="#">爱要说出口</a></dd>
</dt>
</div>
</div>
<div class="footer">
<img src="img/tips.jpg"/>
<div class="footer0">
<a href="#">>各种鲜花所代表的含义</a><br />
<a href="#">>养花与养生之道</a><br />
<a href="#">>花香的味道</a><br />
<a href="#">>种花与送花</a>
</div>
<div class="footer0">
<a href="#">>花的喜怒哀乐与人的各种感觉</a><br />
<a href="#">>每天清晨的第一缕阳光</a><br />
<a href="#">>世界各地关于送花的习俗</a><br />
<a href="#">>手捧一束鲜花的等待</a>
</div>
</div>
</div>
</div>
</body>
</html>
css文档
.box{
917px;
height: 1050px;
background-color: #ffd8d9;
margin: 20px auto;
position: relative;
}
.top{
700px;
height: 120px;
margin: auto;
}
.nav{
700px;
height: 33px;
margin: auto;
}
.nav>ul{
padding: 0;
margin: 0;
}
.nav>ul>li{
list-style: none;
float: left;
line-height: 33px;
text-align: center;
display: inline-block;
98px;
height: 33px;
border: 1px solid #FFF;
background-image: linear-gradient(0deg,#fff 0%,#fdc7c9 100%);
}
.nav li:hover{
background-image: linear-gradient(0deg,#fdc7c9 0%,#fa3d42 100%);
cursor: pointer;
}
.nav li:hover>a{
color: #FFFFFF;
}
a{
text-decoration: none;
color: #000;
font-size: 14px;
}
a:hover{
color: #fd7276
}
.aside{
180px;
height: 850px;
background-color: #FFF;
margin-top: 3px;
margin-left: 108px;
float: left;
border-radius: 10px;
}
.aside>img{
height: 50px;
180px;
}
.aside>p{
height: 15px;
margin-top: 0px;
margin-left: 10px;
}
[type="text"]{
100px;
border: none;
border-bottom: 1px solid #000;
}
[type="password"]{
100px;
border: none;
border-bottom: 1px solid #000;
}
[type="button"]{
margin-left: 10px;
}
h5{
display: inline-block;
150px;
height: 20px;
margin: 5px 15px;
background-color: #ffd8d9;
}
.aside>ul{
margin: -5px -27px;
}
.aside>ul li{
list-style-image: url(img/icon1.gif);
border-bottom: 1px dashed #aaa;
margin: 2px 15px;
135px;
}
.section{
518px;
height: 848px;
background-color: #ffd8d9;
border-top-left-radius: 19px;
border-top-right-radius: 18px;
margin-top: 3px;
margin-left: 2px;
float: left;
}
.section_top{
520px;
height: 150px;
background-color: #ffd8d9;
margin-top: 3px;
}
.img1{
margin-right: -1px;
}
.img1:hover,.img2:hover{
position: relative;
top: -2px;
right: -2px;
border: 1px solid #FF0000;
}
.img2{
margin-top: 10px;
margin-left: 5px;
}
.section_mid{
518px;
height: 350px;
background-color: #fff;
}
.block{
106px;
height: 150px;
margin-left: 18px;
float: left;
}
.block dd{
font-size: 14px;
text-align: center;
margin-left: 0px;
}
.section_bot{
518px;
height: 200px;
background-color: #fff;
margin-top: 5px;
}
.footer{
518px;
height: 135px;
background-color: #fff;
margin-top: 5px;
}
.footer0{
230px;
height: 80px;
float: left;
margin-left: 28px;
}
效果图
