网页大作业宠物家园html网页成品
效果图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>宠物家园</title> <style> *{ padding:0; margin:0; } body{ font-family: '微软雅黑'; background:#f3f3f3; } a{ text-decoration: none; } ul li{ list-style: none; } .wrap{ width:1000px; margin:0 auto; padding:10px 0px; background:#fff; } .left{ float:left; } .right{ float:right; } .clear{ clear:both; } .header{ margin:10px 0px; } .logo{ margin-left:5px; } .top{ margin-right:10px; } .nav{ background:#94688c; height:48px; } .nav .menu ul li{ color:#fff; line-height: 48px; float:left; text-align: center; } .nav .menu ul li a{ color:#fff; display: block; margin:0px 15px; } .form{ margin-right:10px; } .form input{ height:24px; line-height: 24px; margin-top:10px; } .box01,.box02{ width:300px; margin:10px; } .box01 .z-1,.box02 .z-1{ padding:5px; line-height: 24px; border:1px solid #6eb265; } .box03 .z-2 ul li{ float:left; margin:10px; } #footer{ padding:20px 0px; text-align: center; color:#fff; margin-top:15px; background:#94688c } </style> </head> <body> <div class="wrap"> <div class="header"> <div class="logo left"> <img src="images/logo.png"> </div> <div class="right top"> <span>网站注册 |</span> <span>设为首页 |</span> <span>加入收藏</span> </div> <div class="clear"></div> </div> <div class="nav"> <div class="menu left"> <ul> <li><a href="index.html">首页</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 class="form right"> <form> <input type="text"> <button><img src="images/index_10.jpg"></button> </form> </div> <div class="clear"></div> </div> <div class="banner"> <img src="images/banner.jpg"> </div> <div class="box"> <div class="box01 left"> <div class="bt"><img src="images/index_10.jpg"></div> <div class="z-1"> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>宠物第二季高级精英培训活动</p> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>美国养犬俱乐部评年度最佳犬类摄影</p> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>第十五届亚洲宠物展即将盛大开幕</p> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>杭州宠物文化节宠物迷们的狂欢节</p> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>第十一届中国国际水族用品展览会</p> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>德国牧羊犬保姆叼奶盖喂小羊羔</p> </div> </div> <div class="box02 left"> <div class="bt"><img src="images/index_12.jpg"></div> <div class="z-1"> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>怎样给宠物犬注射疫苗?</p> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>专家教你如何让狗狗学会优雅用餐</p> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>拉布拉多真菌性皮肤病需注意</p> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>有关狗狗的生理知识你知道多少</p> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>学会怎样保养狗狗的牙齿和眼睛</p> <p><img src="images/index_19jpg" width="5" height="8" alt=""/>夏季警惕狗狗的体外寄生虫</p> </div> </div> <div class="box03 right"> <div class="bt"><img src="images/index_14.jpg"></div> <div class="z-2"> <ul> <li><img src="images/c1.jpg"></li> <li><img src="images/c2.jpg"></li> <li><img src="images/c3.jpg"></li> <li><img src="images/c4.jpg"></li> </ul> </div> </div> <div class="clear"></div> </div> <div id="footer"> <p>地址:北京市朝阳区樱花街甲2号邮编:100029电话:010-64281256</p> <p>版权所有:宠物家园京备123456号</p> </div> </div> </body> </html>
①本站所有成品淘宝购买需确认收货并好评后发货;
②所有作品如需修改需另加费用;
③所有作品没有任何人的姓名学校之类信息;
④请务必确认网页是您需要的,源码具有可复制性,所以无法退换!
⑤每份网页都可以更换内容,费用50元起,如需更换内容请联系客服!
dw网页设计 » 网页大作业宠物家园html网页成品
②所有作品如需修改需另加费用;
③所有作品没有任何人的姓名学校之类信息;
④请务必确认网页是您需要的,源码具有可复制性,所以无法退换!
⑤每份网页都可以更换内容,费用50元起,如需更换内容请联系客服!
dw网页设计 » 网页大作业宠物家园html网页成品