![](https://i-blog.csdnimg.cn/direct/485ba974fb3b49e1b529c4461505d019.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慢芜湖满屋花</title>
<!-- 外部设置Css样式 -->
<link rel="stylesheet" href="css/top.css">
<link rel="stylesheet" href="css/right.css">
<link rel="stylesheet" href="css/left.css">
</head>
<body>
<!-- 整体 -->
<div id="main">
<div id="top">
<!-- 导航栏 -->
<div id="banner"></div>
<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 id="left">
<!-- id选择器,只有唯一一个名字 -->
<div id="login"></div>
<div id="user">
<!-- class选择器,可以有多个,用同样的样式 -->
用户:<input type="text" class="mima"><br>
密码:<input type="password" class="mima"><br>
<input type="button" value="登录" class="zhu">
<input type="reset" value="注册" class="zhu">
<a href="#">忘记密码</a>
</div>
<div id="category"></div>
<div id="xianhua">
<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>
<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>
<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="#">600-800元</a></li>
<li><a href="#">800元以上</a></li>
</ul>
</div>
</div>
<!-- 右边 -->
<div id="right">
<div id="right1">
<div id="latest"></div>
<img src="./imgs/new1.jpg" alt="">
<img src="./imgs/new2.jpg" alt="">
<img src="./imgs/new3.jpg" alt="">
</div>
<div id="right2">
<div id="recommend"></div>
<ul>
<li><img src="./imgs/flower1.jpg" alt=""><a href="#"><br>幸福的味道</a><br>¥288元</li>
<li><img src="./imgs/flower2.jpg" alt=""><a href="#"><br>阳光守护你</a><br>¥300元</li>
<li><img src="./imgs/flower3.jpg" alt=""><a href="#"><br>温情永远</a><br>¥268元</li>
<li><img src="./imgs/flower4.jpg" alt=""><a href="#"><br>爱无界</a><br>¥318元</li>
<li><img src="./imgs/flower5.jpg" alt=""><a href="#"><br>亲亲宝贝</a><br>¥368元</li>
<li><img src="./imgs/flower6.jpg" alt=""><a href="#"><br>相信是缘</a><br>¥188元</li>
<li><img src="./imgs/flower7.jpg" alt=""><a href="#"><br>水晶童话</a><br>¥198元</li>
<li><img src="./imgs/flower8.jpg" alt=""><a href="#"><br>天使之爱</a><br>¥268元</li>
</ul>
</div>
<div id="right3">
<div id="new"></div>
<ul>
<li><img src="./imgs/flower9.jpg" alt=""><a href="#"><br>亲亲宝贝</a></li>
</li> <li><img src="./imgs/flower10.jpg" alt=""><a href="#"><br>相信是缘</a></li>
<li><img src="./imgs/flower11.jpg" alt=""><a href="#"><br>水晶童话</a></li>
<li><img src="./imgs/flower12.jpg" alt=""><a href="#"><br>天使之爱</a></li>
</ul>
</div>
<div id="right4">
<div id="tips"></div>
<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>
</body>
</html>
/* 整体布局,导航栏 */
/* 设置所有标签统一的样式 */
*{
/* 外边距置零 */
margin:0px auto;
/* 内边距置零 */
padding: 0px;
/* 字体大小设置 */
font-size: 12px;
color: black;
/* 边框 */
border: none;
}
/* 背景颜色 */
body{
background-color: pink;
}
#main{
width: 700px;
}
/* 去除下划线 */
a{
text-decoration: none;
}
/* 去除列表符号 */
li{
list-style: none;
}
#banner{
width: 700px;
height: 120px;
background-image: url(../imgs/banner.jpg);
}
#top{
width: 700px;
}
#top a{
width: 100px;
/* 居中 */
text-align: center;
line-height: 33px;
background: url(../imgs/button1.jpg) no-repeat;
float: left;
}
#top a:hover{
background-image: url(../imgs/button1_bg.jpg);
}
/* :hover 是悬停在文字上的样式 */
#xianhua a:hover,#right2 a:hover,#right3 a:hover,#right4 a:hover{
color: aquamarine;
}
//左边的css样式
#left{
width: 180px;
margin-top: 2px;
background-color: white;
float: left;
}
#user{
width: 180px;
margin-left: 20px;
}
#login{
width: 180px;
height: 50px;
background-image: url(../imgs/login.jpg);
}
.mima{
width: 110px;
padding-top: 5px;
border-bottom: 1px solid black;
}
.zhu{
margin-top: 5px;
border: 1px solid black;
border-radius: 5px 5px;
}
.zhu:hover{
background-color: aqua;
}
/* 宽高指图片的宽高 */
#category{
width: 180px;
height: 50px;
background-image: url(../imgs/category.jpg);
}
#xianhua{
margin-top: 10px;
}
#xianhua h4{
width: 150px;
margin-top: 5px;
background-color: pink;
}
#xianhua a{
padding-left: 40px;
background: url(../imgs/icon1.gif) no-repeat 1px;
background-position: 20px 5px;
}
#xianhua li{
width: 150px;
margin-top: 10px;
border-bottom: 1px dashed black;
}
//右边的css样式
#right{
width: 518px;
float: left;
margin-left: 2px;
}
#right1{
width: 518px;
height: 150px;
float: left;
margin-top: 2px;
background-color: white;
}
#latest{
width: 518px;
height: 33px;
background-image: url(../imgs/latest.jpg);
}
#right2{
width: 518px;
float: left;
margin-top: 2px;
background-color: white;
}
#right2 li{
margin-top: 10px;
margin-left: 20px;
text-align: center;
color: grey;
float: left;
}
#recommend{
width: 518px;
height: 33px;
background-image: url(../imgs/recommend.jpg);
}
#right3{
width: 518px;
height: 180px;
float: left;
margin-top: 2px;
background-color: white;
}
#right3 li{
margin-top: 5px;
margin-left: 20px;
text-align: center;
float: left;
}
#new{
width: 518px;
height: 33px;
background-image: url(../imgs/new.jpg);
}
#right4{
width: 518px;
height: 180px;
float: left;
margin-top: 2px;
background-color: white;
}
#right4 a{
width: 200px;
margin-top: 10px;
margin-left: 40px;
float: left;
background: url(../imgs/icon2.gif) no-repeat 1px;
padding-left: 15px;
}
#tips{
width: 518px;
height: 33px;
background-image: url(../imgs/tips.jpg);
}