352.宠物之家网站大学生期末大作业 Web前端网页制作 html+css

最新推荐文章于 2024-11-12 11:30:00 发布

仙女网页制作

最新推荐文章于 2024-11-12 11:30:00 发布

阅读量987

点赞数 20

CC 4.0 BY-SA版权

分类专栏： Web网页设计实例宠物文章标签：前端课程设计 html

本文链接：https://blog.csdn.net/A240307/article/details/140172624

Web网页设计实例同时被 2 个专栏收录

826 篇文章

订阅专栏

宠物

16 篇文章

订阅专栏

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css，代码精简，适用于大学生网页课程作业设计；本网页支持如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">
 宠物出售
<a href="list.html"> 更多>> </a>
</div>
<ul>
<li>
<a href="#"><img src="images/chushou1.jpg" /></a>
哈士奇
￥1000.00
</li>
<li>
<a href="#"><img src="images/chushou2.jpg" /></a>
金毛犬
￥1000.00
</li>
<li>
<a href="#"><img src="images/chushou3.jpg" /></a>
泰迪犬
￥1000.00
</li>
<li>
<a href="#"><img src="images/chushou4.jpg" /></a>
拉布拉多
￥1000.00
</li>
<li>
<a href="#"><img src="images/chushou5.jpg" /></a>
博美犬
￥1000.00
</li>
<li>
<a href="#"><img src="images/chushou6.jpg" /></a>
布偶猫
￥1000.00
</li>
<li>
<a href="#"><img src="images/chushou7.jpg" /></a>
英国短毛猫
￥1000.00
</li>
<li>
<a href="#"><img src="images/chushou8.jpg" /></a>
波斯猫
￥1000.00
</li>
<li>
<a href="#"><img src="images/chushou9.jpg" /></a>
苏格拉折耳猫
￥1000.00
</li>
<li>
<a href="#"><img src="images/chushou10.jpg" /></a>
挪威森林猫
￥1000.00
</li>
</ul>
</div>
<div class="fenlei">
 <div class="title">
 宠物零食
<a href="list.html"> 更多>> </a>
</div>
<ul>
<li>
<a href="#"><img src="images/lingshi1.jpg" /></a>
宠物火腿肠
￥96.00
</li>
<li>
<a href="#"><img src="images/lingshi2.jpg" /></a>
宠物犬鸡肉味犬粮
￥96.00
</li>
<li>
<a href="#"><img src="images/lingshi3.jpg" /></a>
宠物零食大礼包
￥96.00
</li>
<li>
<a href="#"><img src="images/lingshi4.jpg" /></a>
宠物犬牛肉粒
￥96.00
</li>
<li>
<a href="#"><img src="images/lingshi5.jpg" /></a>
宠物犬罐头
￥96.00
</li>
<li>
<a href="#"><img src="images/lingshi6.jpg" /></a>
宠物犬磨牙棒
￥96.00
</li>
<li>
<a href="#"><img src="images/lingshi7.jpg" /></a>
宠物猫罐头
￥96.00
</li>
<li>
<a href="#"><img src="images/lingshi8.jpg" /></a>
宠物猫小鱼干
￥96.00
</li>
<li>
<a href="#"><img src="images/lingshi9.jpg" /></a>
宠物猫三文鱼块
￥96.00
</li>
<li>
<a href="#"><img src="images/lingshi10.jpg" /></a>
宠物猫金枪鱼罐头
￥96.00
</li>
</ul>
</div>
</div>
<div id="footer">
 宠物网站©版权所有
</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;}