CSS+DIV练手?鲜花展_html/css_WEB-ITnose

这是第四个了，没有别的，高兴了就练练手，积累积累技巧。

界面：

CSS+DIV源码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>css练手</title><style type="text/css">body{	margin:0px;	padding:0px;	font-family:Arial, Helvetica, sans-serif;	font-size:12px;	background-color:#FFD8D9;}#container{	position:relative;	margin:0px auto 0px auto;	width:700px;	text-align:left;}#navigation{	width:700px;	height:33px;	margin:0px;	padding:0px;}#navigation ul{	list-style:none;	margin:0px;	padding:0px;}#navigation ul li{    text-align:center;	float:left;	margin:0px;	padding:0px;	width:100px;}#navigation ul li a{	display:block;	background:url(button1.jpg) no-repeat;	padding:9px 6px 11px 6px;}#navigation ul li a:link,#navigation ul li a:visited{	color:black;	text-decoration:none;}#navigation ul li a:hover{	background:url(button1_bg.jpg) no-repeat;	color:white;}#left{	width:180px;	float:left;	background:#FFFFFF url(leftbottom.jpg) no-repeat bottom; /* 下端圆角 */	margin:1px 0px 0px 0px;}#login{	background:#FFFFFF url(login.jpg) no-repeat;	padding:55px 0px 10px 0px;}#login form{	padding:0px; margin:0px;}#login p {	margin: 0px;	text-align: left;	padding: 5px 0px 0px 25px;}#login p input{	font-family:Arial, Helvetica, sans-serif;	font-size:12px;}#login .text{	border:none;	border-bottom:1px solid black;	padding: 0px;	width: 90px;}#login .btn{	border: 1px solid black;    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;	text-decoration:underline;}#category{	background:#FFFFFF url(category.jpg) no-repeat;	padding: 55px 0px 40px 0px;}#category h4{	margin: 0px 18px 0px 18px;	padding: 3px 0px 1px 5px;	background-color: #FFD1D1;	font-size:12px;}#category ul{	margin: 0px;	padding: 5px 22px 15px 22px;	list-style:none;}#category ul li{	padding: 2px 0px 2px 16px;	border-bottom: 1px dashed #999;	background: url(icon1.gif) no-repeat 5px 7px;}#category ul li a:link, #category ul li a:visited{	color:#000000;	text-decoration:none;}#category ul li a:hover{	color:#666666;	text-decoration:underline;}#main{	float:left;	width:518px;	margin:1px 0px 0px 2px;}#news{	background:url(latest.jpg) no-repeat;	padding:35px 0px 0px 0px;}#news img{	border:none;	padding-left:1px;}#recommend{	background:url(recommend.jpg) no-repeat;	margin:3px 0px 0px 0px;	padding:35px 0px 0px 0px;	background-color:#FFFFFF;}#recommend br,#new br, #guid 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;}#new{	background:url(new.jpg) no-repeat;	margin:3px 0px 0px 0px;	padding:35px 0px 0px 0px;	background-color:#FFFFFF;}#guid{   	background:url(tips.jpg) no-repeat;	margin:3px 0px 0px 0px;	padding:35px 0px 0px 0px;	background-color:#FFFFFF;}#guid ul{	list-style:none;	margin:0px;	padding:5px 5px 5px 30px;}#guid ul li{	background:url(icon2.gif) no-repeat 5px 6px;	padding:1px 0px 1px 12px;	float:left;	width:220px;	}</style><div id="container">	 <div id="banner">    	<img  src="/static/imghwm/default1.png" data-src="banner.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" >    </div>     <div id="navigation">    	<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>        <br>    </div>    <div id="left">		<div id="login">			<form>				<p>用户: <input type="text" class="text"></p>				<p>密码: <input type="text" 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 id="span-用途-span"><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 id="span-花材-span"><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 id="span-价格-span"><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 id="leftbottom"><img  src="/static/imghwm/default1.png" data-src="leftbottom.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ></div>	</div>   <div id="main">          <div id="news">        	<img  src="/static/imghwm/default1.png" data-src="new1.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><img  src="/static/imghwm/default1.png" data-src="new2.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><img  src="/static/imghwm/default1.png" data-src="new3.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" >       </div>      <div id="recommend">          <ul>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower1.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower2.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower3.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower4.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower5.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower6.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower7.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower8.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" >幸福的味道$288元</li>          </ul>          <br>        </div>           <div id="new">    	 <ul>          <li>
<img  src="/static/imghwm/default1.png" data-src="flower9.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><br>粉色迷情</li>            <li>
<img  src="/static/imghwm/default1.png" data-src="flower10.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><br>粉色迷情</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower11.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><br>粉色迷情</li>               <li>
<img  src="/static/imghwm/default1.png" data-src="flower12.jpg" class="lazy" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><br>粉色迷情</li>     	 </ul>      	 <br>        </div>      <div id="guid">    	<ul>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>                <li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>		</ul>          <br>     </div>      </div>
</div>

CSS+DIV做出的网页很精简嘛。