389.大学生HTML5期末大作业 —【可爱的宠物猫主题网页(10页)】 Web前端网页制作 html5+css3+js
目录
一、网页简介
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
3.JS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html5+css3+js： div+css、导航菜单、图片轮翻效果、注册页面、登录页面等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含10个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>爱猫网</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="js/rotate.js"></script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="header">
<a href="index.html" class="logo">爱猫网</a>
<a href="login.html" class="login">登录</a>
<a href="register.html" class="register">注册</a>
</div>
<div class="nav">
<a href="index.html">爱猫首页</a>
<a href="view1.html">猫种起源</a>
<a href="view2.html">主要品种</a>
<a href="view3.html">国内品种</a>
<a href="view4.html">形态特征</a>
<a href="view5.html">生活习性</a>
<a href="view6.html">喂养方式</a>
<a href="view7.html">驯养方式</a>
</div>
<div id="focus" class="focus">
<ul id="focus_image" class="focus_image" >
<li class="current">
<a href="view1.html"><img src="images/focus1.jpg"/></a>
</li>
<li><a href="view2.html"><img src="images/focus2.jpg"/></a></li>
</ul>
<ul id="focus_button" class="focus_button">
<li class="on"></li>
<li></li>
</ul>
</div>
<div class="line">
<a href="view1.html"><img src="images/view1.jpg"/></a>
<h2>猫种起源</h2>
<p><a href="view1.html">猫，属于猫科动物，分家猫、野猫，是全世界家庭中较为广泛的宠物。家猫的祖先据推测是古埃及的沙漠猫，波斯的波斯猫，已经被人类驯化了3500年（但未像狗一样完全地被驯化）。一般的猫：头圆、颜面部短，前肢五指，后肢四趾，趾端具锐利而弯曲的爪，爪能伸缩。夜行性。以伏击的方式猎捕其它动物，大多能攀援上树。猫的趾底有脂肪质肉垫，以免在行走时发出声响，捕猎时也不会惊跑鼠。行进时爪子处于收缩状态，防止爪被磨钝，在捕鼠和攀岩时会伸出来。猫，分多种，是鼠的天敌。各地都有畜养。有黄、黑、白、灰等各种颜色；身形像狸，外貌像老虎，毛柔而齿利（有几乎无毛的品种）。以尾长腰短，目光如金银，上腭棱多的最好。身体小巧，样子招人喜爱。好奇心重。猫行动敏捷，善跳跃。吃鱼、鼠、兔等。猫之所以喜爱吃鱼和老鼠，是因为猫是夜行动物，为了在夜间能看清事物，需要大量的牛磺酸，而老鼠和鱼的体内就含牛磺酸。</a></p>
</div>
<div class="item">
<a href="view2.html"><img src="images/view2.jpg"/></a>
<h2>主要品种</h2>
<p><a href="view2.html">短毛猫：毛短，整齐光滑，肌理细腻，骨骼健壮，动作敏捷，具有野生的特征，日常护理比较容易，懂人语，温顺近人，作为伴侣动物，特别招人喜爱。短毛猫品种较多几乎分布于全球世界各地，主要品种如下：英国短毛猫、美国短毛猫、欧洲短毛猫、东方短毛猫、暹罗猫、卷毛猫、缅甸猫、哈瓦那猫、新加坡猫、曼岛猫、埃及猫、孟加拉猫、苏格兰折耳猫、美国卷耳猫、加州闪亮猫、加拿大无毛猫、日本短尾猫、呵叻猫、阿比西尼亚猫、孟买猫、俄罗斯蓝猫、亚洲猫组。长毛猫：毛长5～10cm，柔软光滑，视季节不同而稍有变化。身材优美，动作稳健；性格温顺，依赖性强，喜欢与人亲近；叫声柔和，在主人面前喜欢撒娇。虽然皮毛需要天天梳理，初夏会掉很多毛。日常护理稍显费事，但作为伴侣动物，也是倍受人们喜爱。长毛猫主要品种如下：波斯猫、金吉拉猫、喜马拉雅猫、缅因猫、伯曼猫、安哥拉猫、土耳其梵猫、挪威森林猫、西伯利亚猫、布偶猫、索马里猫</a></p>
</div>
<div class="list">
<h2>国内品种</h2>
<a href="view3.html"><img src="images/view3.jpg"/></a>
<p><a href="view3.html">狸花猫的原产地是中国，属于自然猫，是在千百年中自然进化保留下来的优秀品种。它非常受百姓们喜欢，因为它有漂亮、厚实的皮毛，健康的身体。容易喂养，并且对捕捉老鼠十分在行。</a></p>
</div>
<div class="list">
<h2>形态特征</h2>
<a href="view4.html"><img src="images/view4.jpg"/></a>
<p><a href="view4.html">猫的身体分为头、颈、躯干、四肢和尾五部分，大多数部位披毛，少数为无毛猫。猫的趾底有脂肪质肉垫，因而行走无声，捕鼠时不会惊跑鼠，趾端生有锐利的指甲。爪能够缩进和伸出。</a></p>
</div>
<div class="list">
<h2>生活习性</h2>
<a href="view5.html"><img src="images/view5.jpg"/></a>
<p><a href="view5.html">猫一天中有14～15小时在睡眠中度过，有的猫，要睡20小时以上，所以猫被称为“懒猫”。但是，只要有点声响，猫的耳朵就会动，有人走近的话，猫就会腾地一下子醒来，只有4～5小时是真睡。</a></p>
</div>
<div class="list">
<h2>喂养方式</h2>
<a href="view6.html"><img src="images/view6.jpg"/></a>
<p><a href="view6.html">当猫达到7岁以上时，它们就会出现许多健康问题，特别是新陈代谢方面，比如肾脏和眼睛。要解决这类问题，重要的是喂给它们低脂肪低能量的食物，帮它们维持正常体重，保证肠胃的健康。</a></p>
</div>
<div class="footer">
Copyright @ 2021 aimao.com All Rights Reserved. 爱猫网 版权所有
</div>
</div>
</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#555;background-color:#fceeee;
}
a{color:#555;text-decoration:none;
}
.container{width:1000px;margin:0 auto;overflow:hidden;
}
.wrapper{float:left;width:1000px;background-color:#fff;
}
.header{float:left;width:1000px;height:86px;background-color:#fdd1d2;
}
.header a{font-weight:bold;color:#fff;
}
.header a.logo{float:left;margin:20px 0 0 24px;font-size:30px;
}
.header a.login{float:right;margin:38px 25px 0 0;font-size:15px;
}
.header a.register{float:right;margin:38px 25px 0 0;font-size:15px;
}
.nav{float:left;width:1000px;height:40px;line-height:40px;font-size:14px;font-weight:bold;background-color:#fca1aa;
}
.nav a{margin:0 43px 0 25px;color:#fff;
}
.nav a:nth-last-child(1){margin-right:0;
}
.focus{float:left;position:relative;width:1000px;
}
.focus_image{float:left;width:1000px;height:450px;list-style:none;
}
.focus_image li{width:1000px;height:450px;display:none;
}
.focus_image li.current{display:block;
}
.focus_image li img{float:left;width:1000px;height:450px;
}
.focus_button{position:absolute;bottom:30px;right:360px;padding:20px 0 0 30px;width:180px;height:30px;list-style:none;
}
.focus_button li{float:left;width:20px;height:6px;margin-left:10px;background-color:#fff;cursor:pointer;
}
.focus_button li.on{background-color:#fca1aa;
}
.line{float:left;width:950px;margin:45px 0 0 25px;
}
.line img{float:left;width:315px;height:220px;margin-top:3px;
}
.line h2{float:right;width:615px;height:25px;line-height:25px;font-size:16px;
}
.line p{float:right;width:615px;line-height:25px;margin-top:5px;
}
.item{float:left;width:950px;margin:40px 0 10px 25px;
}
.item img{float:right;width:315px;height:220px;margin-top:3px;
}
.item h2{float:left;width:615px;height:25px;line-height:25px;font-size:16px;
}
.item p{float:left;width:615px;line-height:25px;margin-top:5px;
}
.list{float:left;width:218px;margin:35px 0 20px 25px;
}
.list h2{float:right;width:218px;height:25px;line-height:25px;font-size:16px;
}
.list img{float:left;width:218px;height:150px;margin-top:10px;
}
.list p{float:right;width:218px;line-height:25px;margin-top:5px;
}
.word{float:left;width:1000px;padding-bottom:10px;
}
.word h2{float:left;width:900px;height:30px;line-height:30px;margin:30px 0 10px 50px;font-size:18px;text-align:center;
}
.word img{float:left;width:900px;margin:10px 0 10px 50px;
}
.word p{float:left;width:900px;line-height:27px;margin:5px 0 0 50px;text-indent:25px;
}
.into{float:left;width:1000px;min-height:500px;padding:60px 0;
}
.into p{float:left;width:1000px;height:55px;margin-top:10px;
}
.into p span{float:left;width:330px;height:60px;line-height:60px;font-size:14px;text-align:right;
}
.into p input{float:left;width:330px;height:35px;margin:15px 0 0 10px;
}
.into p b{float:left;width:130px;height:60px;line-height:60px;margin-left:20px;font-size:14px;font-weight:normal;
}
.into p input.submit{letter-spacing:3px;color:#fff;background-color:#fca1aa;border:0;
}
...
3.JS
代码如下（节选示例）：
window.οnlοad=function()
{
function getIdName(id,tagName)
{
if(tagName!=0)
{
return document.getElementById(id).getElementsByTagName(tagName);
}
else
{
return document.getElementById(id);
}
}
function rotation(json)
{
var that;
var start=0;
var index=0;
var timer=null;
var option={
li:"li", //默认用li包裹
wrapperId:"", //最外面 id
imageId:"", //图片外面id
buttonId:"", //按钮外面id
ms:4000 //多少毫秒切换一张,默认4000毫秒
}
for(var i in option)
{
if(json[i]!=undefined)
{
option[i]=json[i];
}
}
var wrapper=getIdName(option.wrapperId,0);
var images=getIdName(option.imageId,option.li);
var buttons=getIdName(option.buttonId,option.li);
function scrollImage(that)
{
if(that>=0)
{
index=that;
}
else
{
if(start==0)
{
index++;
}
else
{
index--;
start=0;
}
}
if(index>=buttons.length) index=0;
if(index<0) index=buttons.length-1;
for(var j=0;j<buttons.length;j++)
{
images[j].className="";
buttons[j].className="";
}
images[index].className="current";
buttons[index].className="on";
}
images[index].className="current";
buttons[index].className="on";
for(var i=0;i<buttons.length;i++)
{
buttons[i].index=i;
buttons[i].οnclick=function()
{
that=this.index;
scrollImage(that);
}
}
timer=setInterval(scrollImage,option.ms);
wrapper.οnmοuseοver=function()
{
clearInterval(timer);
}
wrapper.οnmοuseοut=function()
{
timer=setInterval(scrollImage,option.ms);
}
}
rotation({
wrapperId:"focus_wrapper",
imageId:"focus_image",
buttonId:"focus_button"
});
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流
相关知识
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
HTML5期末大作业：动物网站设计——宠物狗(10页) HTML+CSS+JavaScript 大学生静态网页设计 dw宠物网页设计 狗狗网页设计html web课程设计网页规划与设计
HTML5期末大作业：动物宠物主题网站设计——宠物网(8页)HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
计算机｜网页设计 ｜宠物猫网站的设计与实现主题
HTML5期末大作业：宠物狗狗主题——好宠之家(5页) HTML+CSS+JavaScript 学生个人HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品
宠物狗狗网站 网页设计 html源码 大作业
HTML5+CSS期末大作业：宠物网站设计——宠物猫(10页) 含设计报告 HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV+CSS宠物网页设计代码
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业...
382.大学生HTML期末大作业 —【布偶猫宠物主题网页 (7页)】 Web前端网页制作 html+css
网址: 389.大学生HTML5期末大作业 —【可爱的宠物猫主题网页(10页)】 Web前端网页制作 html5+css3+js https://m.mcbbbk.com/newsview902478.html
| 上一篇: 商场设宠物厕所，是多此一举吗？, |
下一篇: 【毕设】宠物喂食器,———EEW |
