这是第四个了，没有别的，高兴了就练练手，积累积累技巧。
界面：
CSS+DIV源码：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><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></head><body><div id="container"> <div id="banner"> <img src="banner.jpg"/ 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><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="#">百合花</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 id="leftbottom"><img src="leftbottom.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ></div> </div> <div id="main"> <div id ="news"> <img src="new1.jpg" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><img src="new2.jpg" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><img src="new3.jpg" alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" > </div> <div id="recommend"> <ul> <li><img src="flower1.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ></br>幸福的味道</br>$288元</li> <li><img src="flower2.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ></br>幸福的味道</br>$288元</li> <li><img src="flower3.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ></br>幸福的味道</br>$288元</li> <li><img src="flower4.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ></br>幸福的味道</br>$288元</li> <li><img src="flower5.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ></br>幸福的味道</br>$288元</li> <li><img src="flower6.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ></br>幸福的味道</br>$288元</li> <li><img src="flower7.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ></br>幸福的味道</br>$288元</li> <li><img src="flower8.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ></br>幸福的味道</br>$288元</li> </ul> <br> </div> <div id="new"> <ul> <li><img src="flower9.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><br>粉色迷情</li> <li><img src="flower10.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><br>粉色迷情</li> <li><img src="flower11.jpg"/ alt="CSS+DIV练手?鲜花展_html/css_WEB-ITnose" ><br>粉色迷情</li> <li><img src="flower12.jpg"/ 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></body></html>CSS+DIV做出的网页很精简嘛。
