- 排版分析
- CSS代码
- HTML代码
- 效果展示
- 主界面效果
- end
排版分析
CSS代码
body{background-color:#ffd8d9;margin:1px 0px 0px 0px;padding:0px;text-align:center;font-size:12px;font-family:Arial, Helvetica, sans-serif;
}
#container{position:relative;margin:0px auto 0px auto;width:700px;text-align:left;
}#globallink{margin:0px; padding:0px;
}
#globallink ul{list-style:none;padding:0px; margin:0px;
}
#globallink li{float:left; text-align:center;width:100px;
}
#globallink a{display:block;padding:9px 6px 11px 6px;background:url(button1.jpg) no-repeat;margin:0px;
}
#globallink a:link, #globallink a:visited{color:#630002;text-decoration:none;
}
#globallink a:hover{color:#FFFFFF;text-decoration:underline;background:url(button1_bg.jpg) no-repeat;/* 替换背景图片 */
}#left{width:180px;float:left;background:#FFFFFF url(leftbottom.jpg) no-repeat bottom; /* 下端圆角 */margin:1px 0px 0px 0px;
}
#login{background: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 form input.text{border-bottom:1px solid #000000;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;text-decoration:underline;
}#category{background: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{list-style:none;margin:0px;padding:5px 22px 15px 22px;
}
#category ul li{padding:2px 0px 2px 16px;border-bottom:1px dashed #999999;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
}
#latest{background:url(latest.jpg) no-repeat;padding:35px 0px 0px 0px;
}
#latest img{border:none;padding-left:1px;
}
#recommend{background:url(recommend.jpg) no-repeat;margin:5px 0px 0px 0px;padding:35px 0px 0px 0px;background-color:#FFFFFF;
}
#recommend br,#new br, #tips 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{background:url(new.jpg) no-repeat;margin:5px 0px 0px 0px;padding:35px 0px 0px 0px;background-color:#FFFFFF;
}#tips{background:url(tips.jpg) no-repeat;margin:5px 0px 0px 0px;padding:35px 0px 0px 0px;background-color:#FFFFFF;
}
#tips ul{list-style:none;margin:0px;padding:5px 5px 5px 30px;
}
#tips ul li{background:url(icon2.gif) no-repeat 5px 6px;padding:1px 0px 1px 12px;float:left;width:220px; /* 指定宽度 */
}
#tips ul li a:link,#tips ul li a:visited{color:#222222;text-decoration:none;
}
#tips ul li a:hover{color:#d20005;text-decoration:underline;
}HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>鲜花满屋</title>
<link href="19.css" rel="stylesheet" type="text/css"></head>
<body>
<div id="container"><div id="banner"><img src="banner.jpg"></div><div id="globallink"><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><div id="main"><div id="latest"><a href="#"><img src="new1.jpg"></a><a href="#"><img src="new2.jpg"></a><a href="#"><img src="new3.jpg"></a></div><div id="recommend"><ul><li><a href="#"><img src="flower1.jpg"><br>幸福的味道</a><br>￥288元</li><li><a href="#"><img src="flower2.jpg"><br>阳光守护你</a><br>￥300元</li><li><a href="#"><img src="flower3.jpg"><br>温情永远</a><br>￥268元</li><li><a href="#"><img src="flower4.jpg"><br>爱无界</a><br>￥318元</li><li><a href="#"><img src="flower5.jpg"><br>亲亲宝贝</a><br>￥368元</li><li><a href="#"><img src="flower6.jpg"><br>相信是缘</a><br>￥188元</li><li><a href="#"><img src="flower7.jpg"><br>水晶童话</a><br>￥198元</li><li><a href="#"><img src="flower8.jpg"><br>天使之爱</a><br>￥268元</li> </ul><br> </div><div id="new"><ul><li><a href="#"><img src="flower9.jpg"><br>粉色迷情</a></li><li><a href="#"><img src="flower10.jpg"><br>海岸的幽雅</a></li><li><a href="#"><img src="flower11.jpg"><br>百年地中海</a></li><li><a href="#"><img src="flower12.jpg"><br>爱要说出口</a></li> </ul><br> </div><div id="tips"><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><br> </div></div>
</div>
</body>
</html>效果展示
主界面效果
end
谢谢您的阅读！
