简单宠物网页设计作业静态HTML动物介绍网页作业 DW宠物网站模板下载大学生简单野生动物网页作品代码

📂文章目录

👨‍🎓网页题目
✍️网页描述
💠网页效果
⚙️ 代码实现
- 🧱HTML结构代码
🎁更多干货

👨‍🎓网页题目

🐕 宠物网页设计、🐼保护动物网页、🐋鲸鱼海豚主题、🐘保护大象、等网站的设计与制作。

✍️网页描述

🏷️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。

💠网页效果

在这里插入图片描述

⚙️ 代码实现

🧱HTML结构代码



<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Documenttitle>
<link href="css/style.css" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/css/style.css" type="text/css" rel="stylesheet" />
head>
<body>



<div id="top">
	<div id="top_nr">
    	<div id="top_left"><a href="#"><img src="images/logo.png" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/logo.png" />a>div>
        <div id="top_right">
        	<ul class="hui8">
            <li><a href="index.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/index.html">网站首页a>li>
            <li><a href="list.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/list.html">狗狗食品a>li>
            <li><a href="mao.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/mao.html">猫猫食品a>li>
            <li><a href="chong.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chong.html">小宠食品a>li>
            <li><a href="siyang.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/siyang.html">宠物饲养a>li>
            <li><a href="dongwu.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/dongwu.html">动物宠物a>li>
            ul>
            <ul class="cl">ul>
        div>
        <div class="cl">div>
    div>
div>
<div id="banner">
	<div id="banner_img"><img src="images/banner.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/banner.jpg" />div>
div>
<div id="main">
	<div class="mainh"><marquee>欢迎来到我的网站marquee>div>
    <div class="fenlei">
    	<h1><span class="more2 hui"><a href="list.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/list.html"> 更多>> a>span>h1>
    	<div class="fen_img"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
   	  <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div> 
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb1.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb1.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb2.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb2.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb3.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb3.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb4.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb4.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="cl">div>
        <div class="fen_img"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb5.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb5.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div> 
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb6.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb6.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb7.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb7.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb8.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb8.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb9.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb9.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
        
      <div class="cl">div>
    div>
	<div class="fenlei">
    	<h2><span class="more2 hui"><a href="mao.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/mao.html"> 更多>> a>span>h2>
    	<div class="fen_img"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
   	  <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div> 
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb1.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb1.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb2.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb2.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb3.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb3.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb4.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb4.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="cl">div>
        <div class="fen_img"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb5.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb5.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div> 
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb6.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb6.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb7.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb7.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb8.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb8.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb9.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb9.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
        
       <div class="cl">div>
    div>
<div class="fenlei">
    	<h3><span class="more2 hui"><a href="chong.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chong.html"> 更多>> a>span>h3>
    	<div class="fen_img"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
   	  <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div> 
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb1.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb1.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb2.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb2.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb3.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb3.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb4.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb4.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="cl">div>
        <div class="fen_img"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb5.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb5.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div> 
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb6.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb6.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb7.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb7.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb8.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb8.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12a>strong>div>
      <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb9.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb9.jpg" width="178" height="200" />a>宝路 鸡肉味 犬用妙鲜包100g<br />
      <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12a>strong>div>
       <div class="cl">div>
  div>

div>
<div class="footer">
	<div class="footer_nr"> xxxx<br />制作人：xxx<br /> 学号xxxdiv>

div>
body>
html>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

相关阅读:
PostgreSQL之SQL高级特性
 Java Class类之Class.isPrimitive()方法具有什么功能呢？
shiro认证
 CentOS 7 制作openssl 1.1.1w 版本rpm包 —— 筑梦之路
 ESP8266-Arduino编程实例-BMA250加速度传感器驱动
 BSV 中的零开销私人时间戳
 batch norm 中 track_running_stats 的探索
 分发糖果（贪心算法）
nodejs毕业设计基于Nodejs实现的心理健康咨询微信小程序
 NNDL 作业8：RNN - 简单循环网络
原文地址：https://blog.csdn.net/p305114466/article/details/126655298

简单宠物网页设计作业 静态HTML动物介绍网页作业 DW宠物网站模板下载 大学生简单野生动物网页作品代码