可以分開寫
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>滿屋花</title>
<style type="text/css">
body{
background-color: #FFD8D9;
text-align:center;
font-size:12px;
margin:10px 0px 0px 0px;
padding:0px;
}
#title img{
width:700px ;
}
.container{
position:relative;
margin:0px auto;
width:800px;
text-align:left;
}
#bar{
margin:0px;
padding:0px;
}
#bar ul{
list-style:none;
padding:0px;
margin:0px;
}
#bar li{
text-align:center;
float:left;
width:100px;
}
#bar a{
display:block;
padding:9px 6px 11px 6px;
/*background:url(img/button_bar.jpg) no-repeat; */
/*漸變色*/
background: linear-gradient(180deg,#FFCED2,#FFF6F7,#FFFFFF);
margin:0px;
}
#bar a:link,#bar a:visited{
color:black;
text-decoration:none;
}
#bar a:hover{
color:blueviolet;
text-decoration:underline;
font-size: 12px;
}
#left{
width:180px;
float:left;
background:#FFFFFF url(leftbottom.jpg) no-repeat;
margin:10px 0px 0px 0px;
border-radius:20px ;
}
#login{
background:url(img/login.jpg) no-repeat;
padding:38px 0px 10px 0px;
}
#login form{
padding:0px;
margin:0px;
}
#login p{
margin:1px;
text-align:left;
padding:5px 0px 0px 25px;
}
#login form input.text{
border-bottom:1px solid black;
/*設置文本框的左右上的線沒有*/
border-left:none;
border-right:none;
border-top:none;
padding:0px;
width:90px;
}
#login form input.btn{
border:1px solid #000000;
background-color:#FFEFF0;
height:17px;
padding:0px;
}
#login p a:link,#login p a:visited{
color:#333333;
text-decoration:none;
}
#login p a:hover{
color:#000088;
texe-decoration:underline;
}
#category{
background:url(img/fenlei.jpg) no-repeat;
padding:50px 0px 35px 0px;
}
#category h4{
margin:0px 18px;
padding:3px 0px 1px 5px;
background-color: #FFD1D1;
font-size:12px;
}
#category ul{
list-style:none;
margin:0px;
padding:5px 22px 15px 22px;
}
#category ul li{
padding:2px 0px 2px 16px;
border-bottom:1px dashed red;
background:url(img/dian.gif) no-repeat 5px 7px;
}
#category ul li a:link , #category ul li a:visited{
color:black;
text-decoration:none;
}
#category ul li a:hover{
color:blue;
text-decoration:underline;
}
#right{
float:left;
width:520px;
margin:0px 0px 0px 1px;
}
#top{
border-radius:21px ;
background:pink url(img/new.jpg) no-repeat;
padding:20px 0px 0px 1px;
margin-left:0px;
margin-top: 10px;
margin-bottom: 10px;
}
#top img{
border:none;
padding-left:0px;
}
#top ul li{
/*去點*/
display: inline;
}
#top ul li img{
/*圖片太大就需要設置寬度*/
width: 157px;
}
#recommend{
border-radius:21px ;
background:url(img/recommend.jpg) no-repeat;
margin:5px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#ffffff;
margin-bottom: 20px;
}
#recommend br, #new br,#buttom br{
display:block;
clear:both;
margin:0px;
padding:0px;
}
#recommend ul , #new ul{
list-style:none;
margin:0px;
padding:5px 5px 5px 8px;
}
#recommend ul li,#new ul li{
text-align:center;
float:left;
width:125px;
}
#recommend ul li img , #new ul li img{
border:none;
margin:5px 0px 3px 0px;
padding:0px;
}
#recommend ul li a:link, #recommend ul li a:visited , #new ul li a:link,#new ul li a:visited{
color:#666666;
text-decoration:none;
}
#recommend ul li a:hover , #new ul li a:hover{
color:#D20005;
text-decoration:underline;
}
#new{
border-radius:21px ;
background:url(img/new.jpg) no-repeat;
margin:5px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF;
}
#buttom{
border-radius:25px ;
background:url(img/daogou.jpg) no-repeat;
margin:5px 0px 10px 0px;
padding:45px 0px 35px 0px;
background-color:#FFFFFF;
font-size: 15px;
margin-top: 10px;
}
#buttom ul{
list-style:none;
margin:0px;
padding:5px 5px 5px 30px;
}
#buttom ul li{
/*設置文字前面的箭頭 通過添加圖片來處理 */
background:url(img/jiantou.jpg) no-repeat 5px 6px;
padding:1px 0px 1px 12px;
float:left;
width:220px;
}
#buttom ul li a:link,#buttom ul li a:visited{
color:#222222;
text-decoration:none;
}
#buttom ul li a:hover{
color:#8A2BE2;
/*當鼠標放在文本上面的時候會顯示一根線*/
text-decoration:underline;
}
</style>
</head>
<body>
<div class="container">
<div id="title">
<img src="img/title.jpg">
</div>
<!--導航欄-->
<div id="bar">
<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">
<!--登錄表單-->
<div id="login">
<form>
<p>
用戶：<input type="text" name="" value="" class="text">
</p>
<p>
密碼：<input type="text" name="" value="" class="text"/>
</p>
<p>
<input type="button" class="btn" value="登錄"/>
<input type="button" class="btn" value="注冊"/><a href="#">忘記密碼</a>
</p>
</form>
</div>
<!--鮮花分類-->
<div id="category">
<h4><span>用途</span></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>
<li>
<a href="#">會議用花</a>
</li>
</ul>
<!--花材-->
<h4><span>花材</span></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><span>價格</span></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="top">
<ul>
<li><a href="#"><img src="img/new1.jpg"></a></li>
<li><a href="#"><img src="img/new2.jpg"></a></li>
<li><a href="#"><img src="img/new3.jpg"></a></li>
</ul>
</div>
<!--推薦部分-->
<div id="recommend">
<ul>
<li>
<a href="#"><img src="img/flower1.jpg"><br/>幸福的味道</a><br/>￥288元></li>
<li>
<a href="#"><img src="img/flower2.jpg"><br/>陽光守護你</a><br/>￥300元</li>
<li>
<a href="#"><img src="img/flower3.jpg"><br/>溫情永遠</a><br/>￥268元</li>
<li>
<a href="#"><img src="img/flower4.jpg"><br/>愛無界</a><br/>￥318元></li>
<li>
<a href="#"><img src="img/flower5.jpg"><br/>親親寶貝</a><br/>￥368元</li>
<li>
<a href="#"><img src="img/flower6.jpg"><br/>相信是緣</a><br/>￥188元</li>
<li>
<a href="#"><img src="img/flower7.jpg"><br/>水晶童話</a><br/>￥198元></li>
<li>
<a href="#"><img src="img/flower8.jpg"><br/>天使之愛</a><br/>￥268元</li>
</ul>
<br/>
</div>
<div id="new">
<ul>
<li>
<a href="#"><img src="img/flower9.jpg"><br/>粉色迷情</a>
</li>
<li>
<a href="#"><img src="img/flower10.jpg"><br/>海岸的優雅</a>
</li>
<li>
<a href="#"><img src="img/flower11.jpg"><br/>百年地中海</a>
</li>
<li>
<a href="#"><img src="img/flower12.jpg"><br/>愛要說出口</a>
</li>
</ul>
<br>
</div>
<div id="buttom">
<ul>
<li>
<a href="">各種鮮花所代表的含義</a>
</li>
<li>
<a href="#">花的喜怒哀樂與人的各種感覺</li>
<li>
<a href="#">養花與養生之道</li>
<li>
<a href="#">每天清晨的第一縷陽光</li>
<li>
<a href="#">花香的味道</li>
<li>
<a href="#">世界各地關於送花的習俗</li>
<li>
<a href="#">手捧一束鮮花的等待</li>
</ul>
<br>
</div>
</div>
</div>
</body>
</html>