宠物主题网页 html源码 大作业
页面个数:5
使用技术:html+css
部分代码:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>宠物网站</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<div class="cont">
<div class="logo"><a href="#"><img src="images/logo.jpg" /></a></div>
<div class="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="list1.html">宠物出售</a></li>
<li><a href="list2.html">宠物零食</a></li>
<li><a href="siyang.html">宠物饲养</a></li>
<li><a href="liuyan.html">在线留言</a></li>
</ul>
</div>
</div>
</div>
<div id="banner">
<img src="images/banner.jpg" />
</div>
<div id="main">
<div class="gundong">
<marquee>欢迎来到我的网站</marquee>
</div>
<div class="fenlei">
<div class="title">
<span>宠物出售</span>
<a href="list.html"> 更多>> </a>
</div>
<ul>
<li>
<a href="#"><img src="images/chushou1.jpg" /></a>
<p>哈士奇</p>
<p><span>¥1000.00</span></p>
</li>
<li>
<a href="#"><img src="images/chushou2.jpg" /></a>
<p>金毛犬</p>
<p><span>¥1000.00</span></p>
</li>
<li>
<a href="#"><img src="images/chushou3.jpg" /></a>
<p>泰迪犬</p>
<p><span>¥1000.00</span></p>
</li>
<li>
<a href="#"><img src="images/chushou4.jpg" /></a>
<p>拉布拉多</p>
<p><span>¥1000.00</span></p>
</li>
<li>
<a href="#"><img src="images/chushou5.jpg" /></a>
<p>博美犬</p>
<p><span>¥1000.00</span></p>
</li>
<li>
<a href="#"><img src="images/chushou6.jpg" /></a>
<p>布偶猫</p>
<p><span>¥1000.00</span></p>
</li>
<li>
<a href="#"><img src="images/chushou7.jpg" /></a>
<p>英国短毛猫</p>
<p><span>¥1000.00</span></p>
</li>
<li>
<a href="#"><img src="images/chushou8.jpg" /></a>
<p>波斯猫</p>
<p><span>¥1000.00</span></p>
</li>
<li>
<a href="#"><img src="images/chushou9.jpg" /></a>
<p>苏格拉折耳猫</p>
<p><span>¥1000.00</span></p>
</li>
<li>
<a href="#"><img src="images/chushou10.jpg" /></a>
<p>挪威森林猫</p>
<p><span>¥1000.00</span></p>
</li>
</ul>
</div>
<div class="fenlei">
<div class="title">
<span>宠物零食</span>
<a href="list.html"> 更多>> </a>
</div>
<ul>
<li>
<a href="#"><img src="images/lingshi1.jpg" /></a>
<p>宠物火腿肠</p>
<p><span>¥96.00</span></p>
</li>
<li>
<a href="#"><img src="images/lingshi2.jpg" /></a>
<p>宠物犬鸡肉味犬粮</p>
<p><span>¥96.00</span></p>
</li>
<li>
<a href="#"><img src="images/lingshi3.jpg" /></a>
<p>宠物零食大礼包</p>
<p><span>¥96.00</span></p>
</li>
<li>
<a href="#"><img src="images/lingshi4.jpg" /></a>
<p>宠物犬牛肉粒</p>
<p><span>¥96.00</span></p>
</li>
<li>
<a href="#"><img src="images/lingshi5.jpg" /></a>
<p>宠物犬罐头</p>
<p><span>¥96.00</span></p>
</li>
<li>
<a href="#"><img src="images/lingshi6.jpg" /></a>
<p>宠物犬磨牙棒</p>
<p><span>¥96.00</span></p>
</li>
<li>
<a href="#"><img src="images/lingshi7.jpg" /></a>
<p>宠物猫罐头</p>
<p><span>¥96.00</span></p>
</li>
<li>
<a href="#"><img src="images/lingshi8.jpg" /></a>
<p>宠物猫小鱼干</p>
<p><span>¥96.00</span></p>
</li>
<li>
<a href="#"><img src="images/lingshi9.jpg" /></a>
<p>宠物猫三文鱼块</p>
<p><span>¥96.00</span></p>
</li>
<li>
<a href="#"><img src="images/lingshi10.jpg" /></a>
<p>宠物猫金枪鱼罐头</p>
<p><span>¥96.00</span></p>
</li>
</ul>
</div>
</div>
<div id="footer">
<p>宠物网站©版权所有</p>
</div>
</body>
</html>
效果截图:![](https://i-blog.csdnimg.cn/blog_migrate/4d9fcb1aefb7c2feef7eafd5595d4d4d.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/c97fe5854e1bdff6923ee4af78f770b6.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/47985ae29c0c12015bc9f979e4aa451e.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/78d7a68a35cad48cc1081eca7b3e230d.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/b46966a5a9ce975217d18a5c10654869.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/dad95af838b4e985c0dc8eae134e1a15.png)