HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>满屋花</title>
<link rel="stylesheet" href="Full of flowers.css">
</head>
<body>
<div id="all">
<div id="head">
<div id="banner"></div>
<div id="menu">
<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>
<div id="middle">
<div id="left">
<div id="yhdl"></div>
<div id="user">
<p>用户: <input type="text"></p>
<p>密码: <input type="password"></p>
</div>
<form action="#">
<div id="zc">
<p><input type="submit" name="log in" value="登录" >
<input type="submit" name="register" value="注册">
<a href="#">忘记密码</a></p>
</div>
</form>
<div id="classify"></div>
<div id="category">
<h4>种类</h4>
<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>
</div>
<div id="Boutique">
<h4>花材</h4>
<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>
</div>
<div id="value">
<h4>价格</h4>
<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="#">400~800元</a></li>
<li><a href="#">800元以上</a></li>
</ul>
</div>
<div id="bottom"></div>
</div>
<div id="right">
<div id="latest"></div>
<div id="bzkx">
<a href="#"><img src="./imgs/new1.jpg" alt="新品上市"></a>
<a href="#"><img src="./imgs/new2.jpg" alt="大酬宾"></a>
<a href="#"><img src="./imgs/new3.jpg" alt="超值优惠"></a>
</div>
<div id="recommend"></div>
<div id="xhtj">
<ul>
<li>
<img src="./imgs/flower1.jpg" alt="幸福的味道">
<p><a href="#">幸福的味道</a></p>¥288元
</li>
<li>
<img src="./imgs/flower2.jpg" alt="阳光守护你">
<p><a href="#">阳光守护你</a></p>¥300元
</li>
<li>
<img src="./imgs/flower3.jpg" alt="温情永远">
<p><a href="#">温情永远</a></p>¥268元
</li>
<li>
<img src="./imgs/flower4.jpg" alt="爱无界">
<p><a href="#">爱无界</a></p>¥318元
</li>
<li>
<img src="./imgs/flower5.jpg" alt="亲亲宝贝">
<p><a href="#">亲亲宝贝</a></p>¥368元
</li>
<li>
<img src="./imgs/flower6.jpg" alt="相信是绿">
<p><a href="#">相信是绿</a></p>¥188元
</li>
<li>
<img src="./imgs/flower7.jpg" alt="水晶童话">
<p><a href="#">水晶童话</a></p>¥198元
</li>
<li>
<img src="./imgs/flower8.jpg" alt="天使之爱">
<p><a href="#">天使之爱</a></p>¥268元
</li>
</ul>
</div>
<div id="new"></div>
<div id="xpss">
<ul>
<li>
<img src="./imgs/flower9.jpg" alt="粉色迷情">
<p><a href="#">粉色迷情</a></p>
</li>
<li>
<img src="./imgs/flower10.jpg" alt="海岸的优雅">
<p><a href="#">海岸的优雅</a></p>
</li>
<li>
<img src="./imgs/flower11.jpg" alt="百年地中海">
<p><a href="#">百年地中海</a></p>
</li>
<li>
<img src="./imgs/flower12.jpg" alt="爱要说出口">
<p><a href="#">爱要说出口</a></p>
</li>
</ul>
</div>
<div id="tips"></div>
<div id="xhdg">
<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>
</div>
</div>
</div>
</div>
</body>
</html>
CSS代码
*{
margin: 0 auto;
padding: 0;
color: black;
list-style: none;
text-decoration: none;
font-size: 13px;
border: 0px;
}
body{
background-color: #ffd8d9;
}
/* 整体 */
#all{
width: 700px;
height: 700px;
}
/* 头部 */
#head{
width: 700px;
height: 153px;
}
/* 横幅 */
#banner{
background: url(./imgs/banner.jpg) no-repeat;
width: 700px;
height: 120px;
}
/* 菜单 */
#menu li{
width: 100px;
height: 33px;
float: left;
line-height: 33px;
text-align: center;
}
#menu a:link{
background: url(./imgs/button1.jpg) no-repeat;
width: 100px;
height: 33px;
float: left;
}
#menu a:hover{
background: url(./imgs/button1_bg.jpg) no-repeat;
color: white;
}
/* 中间 */
#middle{
width: 700px;
height: 445px;
margin-top: 2px;
}
/* 左侧 */
#left{
width: 180px;
height: 790px;
background-color: white;
float: left;
}
#bottom{
margin-top: 60px;
width: 180px;
height: 16px;
background: url(./imgs/leftbottom.jpg) no-repeat;
}
/* 用户登录 */
#yhdl{
background: url(./imgs/login.jpg) no-repeat;
width: 180px;
height: 50px;
}
#user{
margin-top: 8px;
margin-left: 25px;
}
#user input {
width: 95px;
border-bottom: 1px solid black;
}
#zc{
margin-left: 25px;
margin-top: 4px;
}
#zc input{
width: 35px;
height: 20px;
border: 1px solid black;
background-color:linen;
}
#zc a:hover{
color: red;
}
/* 鲜花分类 */
#classify{
width: 180px;
height: 50px;
background: url(./imgs/category.jpg) no-repeat;
}
#category h4{
width: 150px;
height: 20px;
padding-left: 5px;
padding-top: 1px;
margin-top: 5px;
background-color: pink;
}
#category ul{
margin-left: 15px;
}
#category li,#Boutique li{
background:url(./imgs/icon1.gif) no-repeat 2px;
padding-left: 10px;
margin-left: 1px;
margin-top: 2px;
width: 140px;
border-bottom: 1px dashed black;
}
#Boutique h4,#value h4{
width: 150px;
height: 20px;
padding-left: 5px;
padding-top: 1px;
margin-top: 15px;
background-color: pink;
}
#Boutique li,#value li{
background:url(./imgs/icon1.gif) no-repeat 2px;
padding-left: 10px;
margin-left: 15px;
margin-top: 2px;
width: 140px;
border-bottom: 1px dashed black;
}
/* 右侧 */
#right{
width: 518px;
height: 1000px;
float: right;
}
/* 本站快讯 */
#latest{
background: url(./imgs/latest.jpg) no-repeat;
width: 518px;
height: 33px;
}
/* 鲜花推荐 */
#recommend{
background: url(./imgs/recommend.jpg) no-repeat;
width: 518px;
height: 33px;
margin-top: 5px;
}
#xhtj{
text-align: center;
background-color: white;
width: 518px;
height: 315px;
}
#xhtj li, #xpss li{
float: left;
margin: 5px;
padding-left: 5px;
padding-top: 5px;
}
/* 链接 */
#xhtj a:link,#xpss a:link{
color: grey;
}
#xhtj a:hover,#xpss a:hover,#xhtg a:hover,#xhdg a:hover{
color: red;
text-decoration: underline;
}
#category a:hover,#Boutique a:hover,#value a:hover{
color: red;
}
/* 新品上市 */
#new{
background: url(./imgs/tips.jpg) no-repeat;
width: 518px;
height: 33px;
margin-top: 5px;
}
#xpss{
text-align: center;
background-color: white;
width: 518px;
height: 140px;
}
/* 鲜花导购 */
#tips{
background: url(./imgs/tips.jpg) no-repeat;
width: 518px;
height: 33px;
margin-top: 5px;
}
#xhdg{
background-color: white;
width: 518px;
height: 90px;
}
#xhdg li{
background: url(./imgs/icon2.gif) no-repeat;
width: 218px;
line-height: 5px;
display: inline-block;
margin-left: 30px;
margin-top: 10px;
padding-left: 5px;
}
