一个简单的页面
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>我的鲜花网店</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <!--主容器--> <div id="container"> <!--banner--> <div id="banner"> <!--banner图片,img转换为块状元素--> <img id="banner_img" src="images/banner.jpg"/> <!--导航--> <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="userlogin"> <img src="images/login.jpg" /> <form> <p> <span>用户：</span><input type="text" class="text"/> </p> <p> <span>密码：</span><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="flower_class"> <img src="images/category.jpg"/> <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="flash_flower"> <img src="images/latest.jpg"/> <ul> <li><a href="#"><img src="images/new1.jpg"/></a></li> <li><a href="#"><img src="images/new2.jpg"/></a></li> <li><a href="#"><img src="images/new3.jpg"/></a></li> </ul> </div> <!--鲜花推荐--> <div id="recommend_flower"> <img src="images/recommend.jpg"/> <ul> <li><a href="#"><img src="images/flower1.jpg"/><span class="span1">幸福的味道</span></a><span class="span2">￥288元</span></li> <li><a href="#"><img src="images/flower2.jpg"/><span class="span1">阳光守护你</span></a><span class="span2">￥300元</span></li> <li><a href="#"><img src="images/flower3.jpg"/><span class="span1">温情永远</span></a><span class="span2">￥268元</span></li> <li><a href="#"><img src="images/flower4.jpg"/><span class="span1">爱无界</span></a><span class="span2">￥318元</span></li> <li><a href="#"><img src="images/flower5.jpg"/><span class="span1">亲亲宝贝</span></a><span class="span2">￥368元</span></li> <li><a href="#"><img src="images/flower6.jpg"/><span class="span1">相信是缘</span></a><span class="span2">￥188元</span></li> <li><a href="#"><img src="images/flower7.jpg"/><span class="span1">水晶童话</span></a><span class="span2">￥198元</span></li> <li><a href="#"><img src="images/flower8.jpg"/><span class="span1">天使之爱</span></a><span class="span2">￥268元</span></li> </ul> </div> <!--新品上市--> <div id="market_flower"> <img src="images/new.jpg"/> <ul> <li><a href="#"><img src="images/flower9.jpg"/><span>粉色迷情</span></a></li> <li><a href="#"><img src="images/flower10.jpg"/><span>海岸的优雅</span></a></li> <li><a href="#"><img src="images/flower11.jpg"/><span>百年地中海</span></a></li> <li><a href="#"><img src="images/flower12.jpg"/><span>爱要说出口</span></a></li> </ul> </div> <!--鲜花导购--> <div id="guide_flower"> <img src="images/tips.jpg"/> <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> </div> </div> </div> </body> </html>
/*initialise*/ html,body,div,ul,li,img,form,input,p,h4,span,a{ margin:0px; padding:0px;} img { border:none;} #container{ width:700px; margin:0px auto; background-color:#FFD8D9; overflow:hidden;} body { background-color:#FFD8D9;} /*banner*/ #banner { width:700px; height:155px; overflow:hidden;} #banner img { display:block; width:698px; height:120px; border:1px solid #FFF;} #banner ul{ display:block; width:700px; height:33px; float:left; list-style:none;} #banner li { display:block; width:100px; height:33px;line-height:33px; float:left; background:url(../images/button1.jpg) no-repeat;} #banner li a { display:block; width:100px; height:33px; line-height:33px; color:#630002; font-size:12px; text-align:center; text-decoration:none;} #banner li a:hover { color:#FFF; text-decoration:underline; background:url(../images/button1_bg.jpg) no-repeat;} /*left*/ #left { width:180px; float:left; margin-top:2px; background-color:#FFF; display:inline;} #left img { display:block; width:180px; height:50px;} /*userlogin*/ #userlogin form { font-size:12px} #userlogin form input.text { width:90px; border-top:none; border-left:none; border-right:none; border-bottom:1px solid #000;} #userlogin p { width:180px; display:block; height:30px; line-height:30px; text-align:center;} #userlogin form input.btn { background-color:#FFF; border:1px solid #000;} #userlogin p a { color:#333333; text-decoration:none; font-size:12px;} #userlogin p a:hover { color:#000088; text-decoration:underline;} /*flower_class*/ #flower_class{ overflow:hidden;} #flower_class h4 { display:block; background-color:#FFD1D1; width:144px; height:20px; margin-left:18px; font-size:12px; line-height:20px; margin-top:10px;} #flower_class h4 span { margin-left:8px;} #flower_class ul { display:block; width:144px; margin-left:18px; font-size:12px; margin-right:18px; } #flower_class li { display:block; width:144px; height:18px; line-height:18px; border-bottom:1px dotted #999; margin-top:2px; background:url(../images/icon1.gif) no-repeat 10px 6.5px;} #flower_class li a { color:#000; text-decoration:none; margin-left:25px;} #flower_class li a:hover { color:#666666; text-decoration:underline;} /*main*/ #main { margin-top:2px; width:518px; margin-left:2px; display:inline; float:left;} /*flash_flower:本站快讯*/ #flash_flower { overflow:hidden; background-color:#FFF;} #flash_flower img { display:block; width:518px; height:33px;} #flash_flower ul { display:block; width:518px; list-style:none; } #flash_flower li { display:block; width:170px; margin-left:2px; float:left; background-color:#FFD8D9;} #flash_flower a { display:block; width:170px;} #flash_flower a img { display:block; width:170px; height:107px; border:none;} /*recommend_flower:鲜花推荐*/ #recommend_flower { margin-top:5px; overflow:hidden; background-color:#FFF;} #recommend_flower img { display:block; width:518px; height:33px;} #recommend_flower ul { display:block; width:518px; list-style:none; } #recommend_flower li { display:block; width:106px; float:left; margin-left:18.5px;} #recommend_flower a { display:block; width:106px;} #recommend_flower li img { display:block; width:106px; height:106px;} #recommend_flower li a { font-size:12px; line-height:30px; text-align:center; color:#666666; text-decoration:none;} #recommend_flower li a:hover { color:#D20005; text-decoration:underline;} #recommend_flower .span2{ line-height:30px; font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:center; display:block; width:106px; height:30px;} /*market_flower: 新品上市*/ #market_flower { margin-top:5px; overflow:hidden; background-color:#FFF;} #market_flower img { display:block; width:518px; height:33px;} #market_flower ul { display:block; width:518px; list-style:none; } #market_flower li { display:block; width:106px; float:left; margin-left:18.5px;} #market_flower a { display:block; width:106px;} #market_flower li img { display:block; width:106px; height:106px;} #market_flower li a { font-size:12px; line-height:30px; text-align:center; color:#666666; text-decoration:none;} #market_flower li a:hover { color:#D20005; text-decoration:underline;} /*guide_flower:鲜花导购*/ #guide_flower { margin-top:5px; overflow:hidden; background-color:#FFF; height:130px;} #guide_flower img { display:block; width:518px; height:33px;} #guide_flower ul { display:block; width:518px; list-style:none; } #guide_flower li { display:block; width:259px; height:20px; float:left; background:url(../images/icon2.gif) no-repeat 20px 6px;} #guide_flower li a { display:block; width:229px; height:20px; line-height:20px; font-size:12px; text-decoration:none; color:#000; text-align:left; margin-left:30px;} #guide_flower li a:hover { color:#D20005; text-decoration:underline;}