宠物网站

宠物网站



1.宠物网站需求分析

策划项目:宠物网站

随着生活水平的提高,人们开始重视自己的生活质量。随着物质生活的富裕,人们越来越注重休闲生活情趣的培养;随着传统家庭结构的变化、工作压力的增大,人际关系逐渐趋于淡化,犹豫宠物具有活泼,可爱,乖巧,善解人意等特性,越来越多的人开始热衷于养动物,在饲养过程中,往往把它当做家庭的一个成员,与其对话,与其交流,作为一种精神寄托,将感情投注于宠物身上,充实了生活。人与宠物间的依赖关系,将随时间的流逝而日益浓厚;而且农村逐步向城市化转移,犬猫宠物拥有量的逐步增长。

无疑全民懂得爱护动物,是一种进步。可爱的小动物给人们带来了无穷的快乐,放松心情,减轻寂寞感。但经验不足的铲屎官对自己的宠物了解不够,不能更好的照顾自己的宠物,此网站是一个专门提供宠物各类资讯和信息的网站,为爱宠人士提供了一个相互交流和学习的平台,里面可以查到很多有关养宠的问题、经验。建议,鼓励、引导和传播宠物的培育知识和正确方法,还收集关于宠物各种搞笑图片和视频,汇集了诸多宠物或可爱、或让主人哭笑不得的精彩瞬间。

网站策划书:
在这里插入图片描述

2.宠物网站设计

目的:为有效制作宠物网站页面设计,特设计此概要设计,概要设计包括目录设计,页面相关名称,页面跳转,页面说明。

上方导航栏目录设计:
首页 :主页面
萌宠 :分享萌宠照片及故事
萌宠医院:推荐宠物生病用药参考
萌宠食品:推荐宠物食品
萌宠资讯:关于宠物的一些小tip
注册 :注册界面

主要模块:
在这里插入图片描述

跳转关系:可以跳转到栏目页面,栏目页面导航条可以互相链接。

css样式设计:
(1)header部分通用HTML样式定义,logo样式设计定义
nav部分通用超链接样式定义
(3)banner:HTML样式定义
(4)content部分:容器样式定义
(5)footer部分:通用HTML样式定义
(6)content及、column sidemenu,column contenx,content.con,content.top,btn样式设计

3.宠物网站实现

1.创建HTML文件

在文件夹中新建HTML文件,将文件保存到文件夹,如果没有此文件夹则创建一个文件夹,为网页文件命名为01.html等。

2.网页布局设计

为了和网站的首页风格保持一致,栏目页面采取了相似的布局风格,栏目页面的上header模块(logo,插图),banner模块(主图)和nav模块(导航)、下部footer模块(版尾)与首页完全一致,区别之处是content模块内容区分为左右分区和上下分区。

3.网页布局实现

HTML文件中定义模块,分别为header, sticky,nav,banner,content,footer

3.1共有部分:

定义class:header, sticky,nav,banner,content,footer
在这里插入图片描述

设置盒模型自身边框和外部另一个边框距离为0,自身边框和内部另一个边框距离为0,字体为微软雅黑,16px(小四)
header部分:设置宽度100%,左边添加logo,右边添加图片,并用css调整到合适距离。
又下设两个header_in模块,header_in left和herder_in right,分别用css添加图片并调整位置。
在这里插入图片描述

sticky部分:右上角添加引言图片,并用css用#position: sticky;添加悬停效果,靠右侧。
在这里插入图片描述

nav部分:上方导航栏,项目通过无序列表

  • 来显示,同时为文字添加超链接标记。display: block; 将元素设置成块级,分别设置萌宠,萌宠医院,萌宠医院,萌宠食品,萌宠资讯,注册五个板块,设置width为980px,两行文字之间基线距离为45px,用background: url(…/images/navbg.png) no-repeat;添加背景,
    .nav ul li:hover{background: url(…/images/pic03.png) no-repeat;}添加选中文字的背景
    在这里插入图片描述

banner部分:添加主图。
在这里插入图片描述

content部分:每个页面分别下设模块布局
footer部分:底栏
在这里插入图片描述

3.2.不同的模块:

3.2.1.首页页面设计

在这里插入图片描述
content部分: 再分两个模块column sidemenu和column contenx
column sidemenu部分:侧方导航栏,项目通过无序列表 < ul > < li > 来显示,同时为文字添加超链接标记。分别设置注意事项,饲养益处,主要分类,宠物人兽共患病,我们的服务,推荐的商品六个模块。

content部分: 再分两个模块column sidemenu和column contenx
column contenx部分:项目通过< h1 >< p >< br / >来显示
在这里插入图片描述

3.2.2.萌宠页面设计

在content模块中使用转义字符 控制空格长度,用

显示文字,添加图片

3.2.3.萌宠医院页面设计

此页面布局同5.2。项目通过无序列表< ul> < li>< p>< span>< em>来显示文字,< strong>添加文字加粗效果, < img src=“images/-----” alt="" align=“left”/>添加图片。

3.2.4萌宠食品页面设计

此页面布局同5.2。项目通过无序列表< ul>< li>< p>< span>来显示文字,< strong>添加文字加粗效果, < img src=“images/-----” alt="" align=“left”/>添加图片。

3.2.5萌宠资讯页面设计

此页面布局同5.2。项目通过在content下设content.a标记宠物小tip标题,使用css设置其字体效果为color: #00AA98;font-size: 40px;padding: 20px;
用无序列表< ul>< li>< p>< span>< em>来显示文字,< strong>添加文字加粗效果, < img src=“images/-----” alt="" align=“left”/>添加图片。

3.2.6.注册页面设计

此页面项目通过在content下设content.con,content.top,btn
用< form action="#">定义表单处理程序的位置,method="post"定义表单内容从客户端送到服务器的方法为post,以HTTP正文体形式发送,没有字长,字符码的限制。
(1)content.top作为表格分界,在css中分别设置width,height,padding,Color,用background: url(…/images/pic01.jpg) no-repeat;添加背景。
在这里插入图片描述

(2)在content.con中用< table>< tr>< td>构建表格框架,用< table class=“left”>< td>< input type=“text” class=“right” /> < /td>设置输入框在文字右边的效果。设置输入密码最长为maxlength=“8”。
在这里插入图片描述

用< select>< option>做下拉菜单,< textarea>做文本框部分,
在这里插入图片描述

(3)btn部分在css中用margin-top: width: height: color:font-size:font-family: background: 设置背景及字体。
在这里插入图片描述

4.完整代码

首页01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>xly萌宠俱乐部</title>
		<link href="css/01.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div class="header">
			<div class="header_in">
				<img class="left" src="images/logo.png"/>
				<img class="right" src="images/pic04.png"/  >
			</div>
		</div>
		<div class="sticky"><img src="images/9.jpg" /> </div>
		<div class="nav">
			<ul>
				<li class="last"><a href="01.html">首页</a></li>
				<li><a href="02.html">萌宠</a></li>
				<li><a href="03.html">萌宠医院</a></li>
				<li><a href="04.html">萌宠食品</a></li>
				<li><a href="05.html">萌宠资讯</a></li>
				<li><a href="06.html">注册</a></li>
			</ul>
		</div>
		<div class="banner"></div>
		<div class="content">
			<div class="column sidemenu">
				<ul>
					<li><a href="01.html" class="active">注意事项</a> </li>
					<li><a href="07.html">饲养益处</a> </li>
					<li><a href="08.html">主要分类</a> </li>
					<li><a href="09.html">宠物人兽共患病</a> </li>	
					<li><a href="11.html">我们的服务</a> </li>
					<li><a href="12.html">推荐的商品</a> </li>
				</ul>
			</div>
			<div class="column contenx">
				<div class="head">
					<h1>注意事项</h1>
				</div>
				<h1>饲养要点</h1>
				<p>饲养宠物可以给我们带来快乐,也会给我们带来烦恼,在购买一只宠物之前,我们需要做好很多的准备、了解很多的知识。饲养宠物前,我们要了解以下的几点:</p>
				<p><br />1.做好准备<br /><br />饲养宠物前请先确定你是否拥有充足的时间、是否拥有足够的空间、是否有足够的金钱、是否喜欢这个品种的动物,这是十分重要的。宠物是我们生活中的伴侣,它也会害怕寂寞与孤单,也需要我们的陪伴和关心,平时放学、下班回家后多与它交流、玩耍,轻轻的抚摸会让它感到安心舒适。</p>
				<p><br />2.给宠物打疫苗<br /><br />宠物身上携带的病毒很多,一定要定期去给宠物打疫苗。不要怕麻烦,也不要舍不得花钱,要知道被传染了就不是打疫苗这些小钱就能搞定的。为了你和家人的健康,定期去给宠物打疫苗。</p>
				<p><br />3.定期给宠物做体检<br /><br />我们正常每隔一段时间也要做身体体检,动物也是一样的。体检可以尽早的发现动物有哪些异常现象,好及时治疗和预防。</p>
				<p><br />4.每天给动物洗澡<br /><br />动物身上容易长跳蚤,需要每天清洗干净,以防细菌的传播。干净没有细菌的宠物,抱在身上你也放心很多。</p>
				<p><br />5.不让宠物上床<br /><br />有些主人非常宠溺宠物,还把宠物放在床上和自己嬉闹。可是清洗的再干净的宠物,都是带有细菌的。不可以把宠物带上床,要是发现宠物上床去玩,也要赶下来,让宠物养成习惯。</p>
				<p><br />6.不要让小孩碰宠物<br /><br />特别是婴幼儿更不该碰宠物,宠物才不管你是不是小孩子,一个不高兴就用爪子挠过来了,小孩子若被宠物扰到了,是很危险的,还需要打狂犬疫苗。</p>
				<p><br />7.孕妇不可接受宠物<br /><br />准备怀孕和家里有孕妇的人,都不适合养宠物。孕妇本身抵抗力下降,需要特殊照顾,而抵抗力下降就容易被细菌侵入,所以要远离宠物。</p>
			</div>
		</div>
		<div class="footer"><br />XLY萌宠俱乐部</div>
	</body>
</html>

萌宠页面设计02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>xly萌宠俱乐部</title>
		<link href="css/02.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div class="header">
			<div class="header_in">
				<img class="left" src="images/logo.png"/>
				<img class="right" src="images/pic04.png"/>
			</div>
		</div>
                <div class="sticky"><img src="images/9.jpg" /> </div>
		<div class="nav">
			<ul>
				<li><a href="01.html">首页</a></li>
				<li class="last"><a href="02.html">萌宠</a></li>
				<li><a href="03.html">萌宠医院</a></li>
				<li><a href="04.html">萌宠食品</a></li>
				<li><a href="05.html">萌宠资讯</a></li>
				<li><a href="06.html">注册</a></li>
			</ul>
		</div>
		<div class="banner"></div>
		<div class="content">
			<span class="a">最新</span>
		
			<hr color="black" size="1" />
			<br />
			<div>
				<img src="images/1.jpg" alt="" align="left"/>
				<div>
					<p>
						<font color="#F60">纯种蓝猫-陶陶 </font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2020-06-20 &nbsp;&nbsp;&nbsp;&nbsp; →154人围观</font>
					</p>
					<p>
						<font size="2">
						纯种蓝猫 四个月大
						</font>
					</p>
				</div>
				<hr color="black" size="1" />
				<br />
			</div>
			<div>
				<img src="images/2.jpg" alt="" align="left"/>
				<div>
					<p>
						<font color="#F60">一个月的小猫咪</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2020-04-28 &nbsp;&nbsp;&nbsp;&nbsp; →1335人围观</font>
					</p>
					<p>
						<font size="2">
							丁香色妹妹和蓝妹妹 ...
						</font>
					</p>
				</div>
				<hr color="black" size="1" />
				<br />
				<br />
			</div>
			<div>
				<img src="images/3.jpg" alt="" align="left"/>
				<div>
					<p>
						<font color="#F60">1岁柯基MM/font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2020-05-24 &nbsp;&nbsp;&nbsp;&nbsp; →498人围观</font>
					</p>
					
				</div>
				<hr color="black" size="1" />
				<br />
			</div>
			<div>
				<img src="images/4.jpg" alt="" align="left"/>
				<div>
					<p>
						<font color="#F60">小奶猫</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2020-06-22 &nbsp;&nbsp;&nbsp;&nbsp; →97人围观</font>
					</p>
					<p>
						<font size="2">
							小奶猫已经可以吃猫粮 吃罐头了 会用猫砂 很乖 很活泼
						</font>
					</p>
				</div>
				<hr color="black" size="1" />
				<br />
				<br />
			</div>
			<div>
				<img src="images/5.jpg" alt="" align="left"/>
				<div>
					<p>
						<font color="#F60">猫咪,已驱虫,已打疫苗</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2019-11-07 &nbsp;&nbsp;&nbsp;&nbsp; →4815人围观</font>
					</p>
					<p>
						<font size="2">
							猫咪2个半月,非常健康
						</font>
					</p>
				</div>
				<hr color="black" size="1" />
				<br />
			</div>
			<div>
				<img src="images/6.jpg" alt="" align="left"/>
				<div>
					<p>
						<font color="#F60">可可爱爱小奶咪们</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2020-06-13 &nbsp;&nbsp;&nbsp;&nbsp; →224人围观</font>
					</p>
					<p>
						<font size="2">
							前后收留了两窝小猫,目前寄养在宠物店,已经都会自己吃东西了。 大的那窝将近两个月,兄妹俩,桔猫哥哥叫小桔子,三花妹妹叫三福。 小的那窝45天左 ...
						</font>
					</p>
				</div>
				<hr color="black" size="1" />
				<br />
			</div>
			<div>
				<img src="images/7.jpg" alt="" align="left"/>
				<div>
					<p>
						<font color="#F60">边境梗混血儿哈利</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2020-06-13 &nbsp;&nbsp;&nbsp;&nbsp; →307人围观</font>
					</p>
					<p>
						<font size="2">
							哈利有边境梗血统,初见它是在回家路上,见它向一位阿姨乞食,他会安静的等待投喂,也会站起来拜拜。没过几天它就来到我们小区,他会定时出现在我的孩 ...
						</font>
					</p>
				</div>
				<hr color="black" size="1" />
				<br />
			</div>
			<div>
				<img src="images/8.jpg" alt="" align="left"/>
				<div>
					<p>
						<font color="#F60">一岁白金母狗,已绝育</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2020-05-27 &nbsp;&nbsp;&nbsp;&nbsp; →651人围观</font>
					</p>
					<p>
						<font size="2">
							从前是一条流浪狗,不知道从哪自己走来小区附近,没几天还生了一窝狗崽,小狗们陆续被领养走了,带着狗妈妈去做了绝育驱虫,检查下来身体健康,看牙齿 ...
						</font>
					</p>
				</div>
				<hr color="black" size="1" />
				<br />
			</div>
			<p class="more">阅读更多<b>+</b></p>
		</div>
		<div class="footer"> XLY萌宠俱乐部</div>
	</body>
</html>


03.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>xly萌宠俱乐部</title>
		<link href="css/03.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div class="header">
			<div class="header_in">
				<img class="left" src="images/logo.png"/>
				<img class="right" src="images/pic04.png"/>
			</div>
		</div>
		<div class="sticky"><img src="images/9.jpg" /> </div>
		<div class="nav">
			<ul>
				<li><a href="01.html">首页</a></li>
				<li><a href="02.html">萌宠</a></li>
				<li class="last"><a href="03.html">萌宠医院</a></li>
				<li><a href="04.html">萌宠食品</a></li>
				<li><a href="05.html">萌宠资讯</a></li>
				<li><a href="06.html">注册</a></li>
			</ul>
		</div>
		<div class="banner"></div>
		<div class="content">
			<ul class="product_list">
				<li>
					<div>
						<img src="images/p1.jpg" />
						<p><strong>皮特芬</strong>是一种治疗犬猫皮肤真菌感染、螨虫感染、细菌性皮炎等疾病的药品</p>
                                                <p>呈无色或微黄色</p>
                                                <p>药品名称:皮特芬</p>
                                                <p>用法用量:外用,涂于患部,每天1-2次</p>
                                                <p>性 状:本品为无色或微黄色溶液</p>
                                                <p>包装规格:20ml/瓶×1瓶/盒×24盒/箱×4箱/件</p>
                                                <p>贮 藏:遮光密闭保存</p>
                                                <p>有效期:2年</p>	
					<div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>1169</em>人评价 </span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/p2.jpg" />
                                                <p><strong>消炎杀螨膏</strong></p>
						<p>针对螨虫性皮肤病及继发感染,消炎、杀菌、止痒适合蠕形螨、疥瞒感染及继发细菌、真菌引起的瘙痒、红疹、脓包、脱毛及其他皮肤病症状。</p>
                                                <p>使用说明:涂于患处,涂抹前将患处的污染物、结痂清除。</p>
                                                <p>1天2次,视病情,连用5-7天。</p>
                                                <p>规格:20g/支</p>
                                               
					<div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>369</em>人评价 </span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/p4.jpg" />
						<p><strong>恩倍多 益肤灵W100皮肤病喷雾</strong></p>
						<p>适用于犬猫真菌性皮肤病,严重性皮肤病,螨虫性皮肤病,小面积每天使用2次,每次3-5下连续使用7-10天</p>
					</div>
					<div class="product_status">
                                                &nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>134</em>人评价 </span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/p3.jpg" />
						<p><strong>宠物神仙水</strong></p>
						<p>用于治疗宠物犬猫皮肤病(真菌,皮炎湿疹)的喷雾药水</p>
						<p>无色无味,宠物就不会感觉刺激进行反抗,疗效快</p>
					</div>
					<div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>185</em>人评价 </span>
					</div>
				</li>


			</ul>
		</div>
		<div class="footer"><br />XLY萌宠俱乐部</div>
	</body>
</html>

04.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>xly萌宠俱乐部</title>
		<link href="css/03.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div class="header">
			<div class="header_in">
				<img class="left" src="images/logo.png"/>
				<img class="right" src="images/pic04.png"/>
			</div>
		</div>
		<div class="sticky"><img src="images/9.jpg" /> </div>
		<div class="nav">
			<ul>
				<li><a href="01.html">首页</a></li>
				<li><a href="02.html">萌宠</a></li>
				<li><a href="03.html">萌宠医院</a></li>
				<li class="last"><a href="04.html">萌宠食品</a></li>
				<li><a href="05.html">萌宠资讯</a></li>
				<li><a href="06.html">注册</a></li>
			</ul>
		</div>
		<div class="banner"></div>
		<div class="content">
			<ul class="product_list">
				<li>
					<div>
						<img src="images/f1.jpg" />
						<p class="price"><strong>¥3.9</strong></p>
                                                <p>宝路Pedigree 牛肉高汤口味成犬妙鲜包 100g 狗湿粮</p>
					</div>
                                       <div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>1763</em>人评价 </span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/f2.jpg" />
						<p class="price"><strong>¥10.4</strong></p>
						<p>宝路Pedigree 幼犬钙奶棒狗零食 60g</p>
					</div>
					<div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>1785</em>人评价 </span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/f3.jpg" />
						<p class="price"><strong>¥16</strong></p>
                                                <p>怡亲Yoken 牛肉火腿肠奖励狗零食 15g*30支</p>
					</div>
					<div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>784</em>人评价 </span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/f4.jpg" />
						<p class="price"><strong>¥11.5</strong></p>
                                                <p>宝路Pedigree 中小型犬成犬洁齿棒 75g</p>
					</div>
					<div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>1344</em>人评价 </span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/f5.jpg" />
						<p class="price"><strong>¥3.9</strong></p>
                                                <p>伟嘉 精选金枪鱼味成猫妙鲜包 85g</p>
					</div>
					<div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>1093</em>人评价 </span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/f6.jpg" />
						<p class="price"><strong>¥14.9</strong></p>
                                                <p>怡亲Yoken 猫薄荷去毛球清新口气猫零食20g</p>
					</div>
					<div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>755</em>人评价 </span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/f7.jpg" />
						<p class="price"><strong>¥4.5</strong></p>
                                                <p>怡亲Yoken 精选小黄鱼鸡肉鲜封包猫湿粮 110g</p>
					</div>
					<div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>397</em>人评价 </span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/f8.jpg" />
						<p class="price"><strong>¥3.9</strong></p>
                                                <p>伟嘉 精选海洋鱼妙鲜包幼猫湿粮 85g</p>
					</div>
					<div class="product_status">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span>已有<em>975</em>人评价 </span>
					</div>
				</li>
			</ul>
		</div>
		<div class="footer"><br />XLY萌宠俱乐部</div>
	</body>
</html>

05.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>xly萌宠俱乐部</title>
		<link href="css/05.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div class="header">
			<div class="header_in">
				<img class="left" src="images/logo.png"/>
				<img class="right" src="images/pic04.png"/>
			</div>
		</div>
		<div class="sticky"><img src="images/9.jpg" /> </div>
		<div class="nav">
			<ul>
				<li><a href="01.html">首页</a></li>
				<li><a href="02.html">萌宠</a></li>
				<li><a href="03.html">萌宠医院</a></li>
				<li><a href="04.html">萌宠食品</a></li>
				<li class="last"><a href="05.html">萌宠资讯</a></li>
				<li><a href="06.html">注册</a></li>
			</ul>
		</div>
		<div class="banner"></div>
		<div class="content">
			<p class="a">如何让猫爱上你</p>
			<p class="b">编辑:XLY</p>
			<hr color="black" size="1" />
			<div>
				<div>
					<p>
						<font size="2">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其实认真观察,你就会发现那些得到猫咪喜欢的人都有一些相同的特性!
                                                        <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.做个稳重的人<br /> 
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;轻手轻脚不要一惊一乍的,猫在野外生存中是食物链中端的位置,要逃跑又要捕猎,所以听力非常好,警惕性比较高,如果主人时常突然发出比较大的动静,那将会拥有一只神经衰弱的猫。
				                </font>
                                        </p>
				</div>
                                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/4.jpg" />
                                <div>
					<p>
						<font size="2">                       
                                                        <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.尽快让猫熟悉你的气味<br /> 
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;猫的嗅觉细胞有2.4亿多个,是人类40多倍,那是相当敏锐,他们就是靠着嗅觉去判断食物的新鲜程度和环境是否安全,所以如果你有一只新猫到家可以给它一件沾有你气味的衣服若是你想撸一只陌生的猫,先让它闻你的气味,让它知道你没有恶意。
						</font>
					</p>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/n5.jpg" />
				<hr color="black" size="1" />
				<div>
					<p>
						<font size="2">
							<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.给到能够让它们放松的东西<br />
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贡献小零食,例如冻干,猫条,罐头俗话说民以食为天,这招真的有用。
					        </font>
					</p>
				</div>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/11.jpg" />
                                <hr color="black" size="1" />
				<div>
					<p>
						<font size="2">
                                                 <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.学会看猫咪的情绪<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是个蛮难的问题,包括如何正确的抱猫。简单说就是看耳朵,尾巴,整体姿态是否放松。
						</font>
					</p>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/5.jpg" />
                        	
			</div>
                    	<br />
			<p class="a">如何让狗狗安静下来</p>
			<p class="b">编辑:XLY</p>
                        <hr color="black" size="1" />
			<div>
                               <div>
					<p>
						<font size="2">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;养狗总免不了要背负一些责任,无论是狗狗,还是家人,甚至街坊邻居都要照顾周全。养狗原本是一件开心的事,但影响到大家的生活了就会闹不愉快了。而面对精力旺盛,吠叫不止的狗狗,家长们可要想想招儿了。如何才能让狗狗安静收声呢?一起来看看小编给大家介绍的这七个妙招吧!
                                                        <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.运动消耗法<br /> 
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;运动可以说是一个不错万能治愈法,无论你是失眠失恋失落,还是孤单寂寞冷,只要去运动运动,基本上都能达到一定的效果。让狗狗运动,可以消耗其体力,还能使它在精神上得到满足。玩累了自然就好好睡觉了,哪还有那么多精力嚎叫。不过,这种方法用在斑点犬和金毛寻回犬这类天生“运动员”的上可能稍逊一些。除非你是运动健将,否则,还是慎重考虑吧!
				                </font>
					</p>
			       </div>
                               
			       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/3.jpg" />
                               <div>
					<p>
						<font size="2">
                                                        <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.视而不见法<br /> 
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;狗狗就是贱贱的,你越是纵容它,它就越喜欢在你面前撒娇耍赖叫个不停。如果你转身离开,不闻不问,狗狗就会觉得自讨没趣收声了。当然,对于超级话痨死皮赖脸型的狗狗来说,此招的成功率几乎为零。还处在训练期的话记得在白天的时候用这招,晚上用会被邻居报警吧……毕竟刚开始的时候会叫得很惨!
						</font>
					</p>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/12.jpg" / >
		               <div>
					<p>
						<font size="2">            
                                                       <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.注意力转移法<br />
                                                       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;很多狗狗之所以乱叫是因为无聊,你可以在它狂叫的时候,用它最喜欢的玩具或骨头逗引它,绝大多数狗狗会立即跑去夺它的玩具,你就被“晾”在一边清静了。如果你的狗狗喜欢的玩具是那种一咬就会发出声音的橡胶玩具……记得不要选“惨叫鸡”!
						</font>
					</p>
			       </div>	
                                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/n2.jpg" />
                               <div>
					<p>
						<font size="2">        
                                                <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.软硬兼施法<br />  
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有些时候对待狗狗还得软硬兼施,糖衣炮弹在一定程度上是很有作用的。一位国外的动物行为学家做了这样一个实验,当狗狗叫的时候就摇铃,狗狗闭嘴后就拿点心吃,同时赞美狗狗。时间长了,狗狗再听到铃声的时候自然就会安静下来。但如果你的狗狗软硬都不吃,还是换别的招吧!不过训练嘛,总是要花一点时间的,不能三分钟热度。
					        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;很多狗狗之所以乱叫是因为无聊,你可以在它狂叫的时候,用它最喜欢的玩具或骨头逗引它,绝大多数狗狗会立即跑去夺它的玩具,你就被“晾”在一边清静了。如果你的狗狗喜欢的玩具是那种一咬就会发出声音的橡胶玩具……记得不要选“惨叫鸡”!
						</font>
					</p>
			       </div>
                        </div>
			<br />
		</div>
		<div class="footer"><br />XLY萌宠俱乐部</div>
	</body>
</html>


06.html

5.宠物网站测试,发布

网站制作好之后还需要检查是否存在错误链接以及网页在不同浏览器之间的兼容性。
通过finalshell上传到自己申请的域名内
在这里插入图片描述

打开浏览器窗口,在地址栏中输入“http://*********/html/”,点击转到就可以浏览网站。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.维护网站

在站点运行了过程中需要定期更新其中的内容,这就涉及到站点的维护。
通常一个小型的站点由一个人就可以完成维护了,但是大型的网站可能需要多个人员共同完成维护工作。维护可以分成两个部分,更新页面和维护站点。
更新远程站点空间上的页面,先修改页面代码,然后在finalshell中上传页面。更新完毕后打开浏览器更新成功。

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

  • 19
    点赞
  • 115
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
好的,我可以为您提供一份简单的Java Web代码,该代码实现了一个基本的宠物网站。该网站包括一个欢迎页面,一个宠物列表页面和一个单个宠物信息页面。以下是代码示例: index.jsp: ```jsp <html> <head> <title>Welcome to Pet Shop</title> </head> <body> <h1>Welcome to Pet Shop</h1> <p>Check out our <a href="pets.jsp">pets</a></p> </body> </html> ``` pets.jsp: ```jsp <html> <head> <title>Pet Shop - Pets</title> </head> <body> <h1>Pet Shop - Pets</h1> <ul> <% // Populate pet list List<Pet> pets = PetDAO.getAllPets(); for (Pet pet : pets) { %> <li><a href="pet.jsp?id=<%= pet.getId() %>"><%= pet.getName() %></a></li> <% } %> </ul> </body> </html> ``` pet.jsp: ```jsp <html> <head> <title>Pet Shop - <%= pet.getName() %></title> </head> <body> <h1>Pet Shop - <%= pet.getName() %></h1> <p><strong>Name:</strong> <%= pet.getName() %></p> <p><strong>Type:</strong> <%= pet.getType() %></p> <p><strong>Description:</strong> <%= pet.getDescription() %></p> </body> </html> ``` Pet.java: ```java public class Pet { private int id; private String name; private String type; private String description; public Pet(int id, String name, String type, String description) { this.id = id; this.name = name; this.type = type; this.description = description; } public int getId() { return id; } public String getName() { return name; } public String getType() { return type; } public String getDescription() { return description; } } ``` PetDAO.java: ```java import java.util.ArrayList; import java.util.List; public class PetDAO { private static List<Pet> pets = new ArrayList<Pet>(); static { // Add sample pets pets.add(new Pet(1, "Fluffy", "Cat", "A cute and fluffy cat")); pets.add(new Pet(2, "Rover", "Dog", "A loyal and friendly dog")); pets.add(new Pet(3, "Nibbles", "Rabbit", "A small and cuddly rabbit")); } public static List<Pet> getAllPets() { return pets; } public static Pet getPetById(int id) { for (Pet pet : pets) { if (pet.getId() == id) { return pet; } } return null; } } ``` 以上是一个简单的宠物网站的Java Web代码。该网站包括一个欢迎页面,一个宠物列表页面和一个单个宠物信息页面。希望对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橙序媛★

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值