355.大学生HTML5期末大作业 —【宠物之家网站(5页)】 Web前端网页制作 html5+css3
目录
一、网页简介
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html5+css3，代码精简，适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含5个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!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>
...
2.CSS
代码如下（节选示例）：
@charset "UTF-8";
*{margin:0;padding:0;}
body{font-size:14px;}
ul,li{list-style:none;}
a{text-decoration:none;}
/*头部*/
#header{width:100%;height:100px;}
#header .cont{width:1000px;margin:0px auto;}
#header .logo{height:88px; margin-top:6px; float:left;}
#header .logo img{height:88px;display:block;}
#header .nav{float:right; height:30px; margin-top:50px;}
#header .nav li{width:120px;float:left;line-height:30px;font-size:14px;text-align:center;font-weight:bold;}
#header .nav li a{color:#000;}
#header .nav li a:hover{color:#eb6100;}
#banner{width:1000px;margin:auto;}
#banner img{width:1000px;}
/*中间内容*/
#main{width:1000px; margin:auto;}
.gundong{height:50px;line-height:50px;margin-top:10px; font-size:16px; font-weight:bold; color:#fff;background:#29a7d0;}
.fenlei{ width:1000px; margin-top:15px;overflow:hidden;}
.fenlei .title{height:50px;line-height:51px;}
.fenlei .title span{font-size:16px;font-weight:bold;}
.fenlei .title a{float:right;color:#666;}
.fenlei .title a:hover{text-decoration:underline;}
.fenlei li{width:180px;float:left;margin:10px;}
.fenlei li img{width:180px;height:180px;display:block;}
.fenlei li p{font-size:12px;height:20px;line-height:20px;width:100%;overflow:hidden;}
.fenlei li p span{font-weight:bold;color:#ff0000;}
/*底部*/
#footer{width:1000px;margin:auto;text-align:center;padding:20px 0;margin-top:20px;background:#47bebf;}
#footer p{text-align:center;line-height:2;color:#000;}
/*宠物出售、宠物零食*/
.list{width:100%;overflow:hidden;}
.list .list_title{height:40px;line-height:40px;border-bottom:1px dashed #47bebf;color:#47bebf;font-weight:bold;font-size:20px;}
.list_left{width:800px;float:left;}
.list_left li{width:180px;float:left;margin:10px;}
.list_left li img{width:180px;height:180px;display:block;}
.list_left li p{font-size:12px;height:20px;line-height:20px;width:100%;overflow:hidden;}
.list_left li p span{font-weight:bold;color:#ff0000;}
.list_right{width:160px;float:right;}
.list_right h3{color:#47bebf;margin-top:10px;}
.list_right li{line-height:26px;}
.list_right li a{color:#333;text-decoration:underline;}
.list_right li a:hover{color:red;}
/*饲养*/
.siyang{width:100%;}
.siyang p{line-height:2;text-indent:28px;}
.siyang img{max-width:100%;display:block;margin:auto;}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流
相关知识
HTML5期末大作业：宠物网站设计——蓝色版爱宠之家带留言板宠物(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计
HTML5期末大作业：宠物狗狗主题——好宠之家(5页) HTML+CSS+JavaScript 学生个人HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
HTML5期末大作业：宠物网站设计——蓝色版爱宠之家带留言板宠物(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业...
HTML5期末大作业：动物宠物主题网站设计——宠物网(8页)HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
HTML5期末大作业：宠物主题网站设计——酷酷动物主题响应式网页(5页) HTML+CSS+JavaScript
HTML5期末大作业：动物网站设计——宠物狗(10页) HTML+CSS+JavaScript 大学生静态网页设计 dw宠物网页设计 狗狗网页设计html web课程设计网页规划与设计
宠物狗狗网站 网页设计 html源码 大作业
网址: 355.大学生HTML5期末大作业 —【宠物之家网站(5页)】 Web前端网页制作 html5+css3 https://m.mcbbbk.com/newsview764414.html
| 上一篇: 探秘蔡甸区宠物猫市场，你需要知道 |
下一篇: 磁力猫永久入口有哪两个，宠物猫域 |
