网页大作业宠物家园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网页成品
