CSS+DIV练手—鲜花展
这是第四个了,没有别的,高兴了就练练手,积累积累技巧。
界面:
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"/> </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"/></div> </div> <div id="main"> <div id ="news"> <img src="new1.jpg"><img src="new2.jpg"><img src="new3.jpg"> </div> <div id="recommend"> <ul> <li><img src="flower1.jpg"/></br>幸福的味道</br>$288元</li> <li><img src="flower2.jpg"/></br>幸福的味道</br>$288元</li> <li><img src="flower3.jpg"/></br>幸福的味道</br>$288元</li> <li><img src="flower4.jpg"/></br>幸福的味道</br>$288元</li> <li><img src="flower5.jpg"/></br>幸福的味道</br>$288元</li> <li><img src="flower6.jpg"/></br>幸福的味道</br>$288元</li> <li><img src="flower7.jpg"/></br>幸福的味道</br>$288元</li> <li><img src="flower8.jpg"/></br>幸福的味道</br>$288元</li> </ul> <br> </div> <div id="new"> <ul> <li><img src="flower9.jpg"/><br>粉色迷情</li> <li><img src="flower10.jpg"/><br>粉色迷情</li> <li><img src="flower11.jpg"/><br>粉色迷情</li> <li><img src="flower12.jpg"/><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做出的网页很精简嘛。