HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物 学生网页设计作业源码(HTML+CSS+JS)
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
作品介绍
1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。主要有：首页 关于我们 零食专场 酷宠展示 用户留言 等总共 5 个页面html下载。
2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)
3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断(提交时表单不能为空)
1.首页
2.关于我们
3. 零食专场
4. 酷宠展示
5. 用户留言
二、代码目录
三、代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" tppabs="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/thickbox.css" />
<title>首页</title>
</head>
<body class="body1" style="background:url(images/top_bg.jpg) repeat fixed!important;">
<!--top-->
<div id="top">
<div id="header">
<div class="switch_langbar"> </div>
<div id="logo">
<div id="MODBLK_222" class="mod_block media_image mb_logo_block">
<div class="flash_image"> <img src="images/sitelogo.png" tppabs="images/sitelogo.png" alt="" /> </div>
</div>
</div>
</div>
<div id="nav_bg">
<div id="nav">
<div id="MODBLK_225" class="mod_block mb_56YrvV58_block">
<div class="nav_l"></div>
<ul id="nav_JEuAEN" class="navigation">
<li> <a href="index.html"> 首页</a> </li>
<li> <a href="jianjie.html"> 关于我们</a> </li>
<li> <a href="shi.html"> 零食专场</a> </li>
<li> <a href="zhan.html"> 酷宠展示</a> </li>
<li> <a href="yan.html"> 用户留言</a> </li>
</ul>
<div class="nav_r"></div>
</div>
</div>
</div>
<div id="banner">
<div id="MODBLK_223" class="mod_block media_image mb_banner_block">
<div class="flash_image"> <img src="images/cwyp11a42.jpg" tppabs="images/cwyp11a42.jpg" alt="" /> </div>
</div>
</div>
</div>
<!--top end-->
<!--main_div-->
<div id="main_div">
<!--web_bg-->
<div class="web_bg">
<!--mainmain-->
<div id="main_all">
<div id="mainmain">
<div id="main_con">
<div id="i_left">
<div id="MODBLK_727" class="mod_block mb_e58bzTVu_block">
<h3 class="blk_t">文章分类</h3>
<div class="list_main category">
<div class="prod_type">
<div id="pro_type_YudXm1">
<ul>
<li> <a href="#"> 宠物医疗</a> </li>
<li> <a href="#"> 问题解答</a> </li>
<li> <a href="#"> 奇闻趣事</a> </li>
<div class="blankbar1"></div>
</ul>
</div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
<div id="MODBLK_728" class="mod_block mb_1D7TkOrv_block">
<h3 class="blk_t">宠物食品</h3>
<div class="newprod">
<div class="newprod_top"></div>
<div class="newprod_con">
<div class="pro_over">
<table class="media_grid" cellspacing="4" width="100%">
<tr>
<td>
<div class="newprod_list">
<div class="newprod_pic"><a href="146.htm" tppabs="146" title="珍宝猫粮什锦口味"><img name="picautozoom" border="0" src="images/nvlnhhSV.jpg" tppabs="images/nvlnhhSV.jpg" class="prodthumb" /></a></div>
<div class="newprod_name"><a href="146.htm" tppabs="146">珍宝猫粮什锦口味</a></div>
<div class="newprod_intr">分类: <a href="143.htm" tppabs="143">猫粮</a></div>
<div class="blankbar1"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="newprod_list">
<div class="newprod_pic"><a href="142.htm" tppabs="142" title="美国HEALTH"><img name="picautozoom" border="0" src="images/HzjRvoxt.jpg" tppabs="images/HzjRvoxt.jpg" class="prodthumb" /></a></div>
<div class="newprod_name"><a href="142.htm" tppabs="142">美国HEALTH</a></div>
<div class="newprod_intr">分类: <a href="142.htm" tppabs="142">狗粮</a></div>
<div class="blankbar1"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="newprod_list">
<div class="newprod_pic"><a href="145.htm" tppabs="145" title="珍宝什锦海鲜猫粮"><img name="picautozoom" border="0" src="images/iIidcgS4.jpg" tppabs="images/iIidcgS4.jpg" class="prodthumb" /></a></div>
<div class="newprod_name"><a href="145.htm" tppabs="145">珍宝什锦海鲜猫粮</a></div>
<div class="newprod_intr">分类: <a href="143.htm" tppabs="143">猫粮</a></div>
<div class="blankbar1"></div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
<div id="MODBLK_206" class="mod_block mb_aq4yXYOw_block">
<h3 class="blk_t">QQ在线</h3>
<div class="qq_list_con">
</div>
<div class="list_bot"></div>
<div class="blankbar"></div>
</div>
</div>
<div id="center">
<div id="MODBLK_724" class="mod_block mb_5Y9x3hnt_block">
<h3 class="blk_t">关于我们</h3>
<div class="list_con company_intro">
<p>爱宠之家有限公司的创建团队是来自于世界500强企业的精英，拥有着30多年的商业管理经验。所以在商品选择和管理上更具优势和竞争力。公司成立于2005年11月，是一家集宠物用品、宠物美容、宠物寄养、宠物摄影、宠物保健、宠物沙龙、宠物学校、宠物café为一体的一站式宠物精品连锁公司。 爱宠之家有限公司凭着对行业的敏锐洞察力和永不停歇的创新精神，成为上海宠物市场第一的零售商和最具影响力的宠物服务商；第一个推出"3P"理念的宠物服务公司；第一个具有TIC(Training
& Institution Center)的宠物服务公司；被评为最具发展潜力的宠物服务公司；已多次被风投所关注。具有最先进美容理念及美容技术的宠物服务公司；具有最先进设备设施的宠物服务公司。
</p>
<div class="list_more"><a href="index.php-_m=mod_static&_a=view&sc_id=2.htm" tppabs="index.php?_m=mod_static&_a=view&sc_id=2"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
</div>
<div class="list_bot"></div>
</div>
<div id="MODBLK_286" class="mod_block mb_VnJ5mo7p_block">
<div class="newprod">
<div class="newprod_top"></div>
<div class="newprod_con">
<div class="pro_over">
<img src="images/aa.jpg" width="470" />
</div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
</div>
<div id="i_right">
<div id="MODBLK_720" class="mod_block mb_MOZKxxdT_block">
<h3 class="blk_t">所有分类</h3>
<div class="list_main category">
<div class="prod_type">
<div id="pro_type_GozgQc">
<ul>
<li> <a href="141.htm" tppabs="141"> 宠物食品</a>
<ul>
<li> <a href="142.htm" tppabs="142"> 狗粮</a> </li>
<li> <a href="143.htm" tppabs="143"> 猫粮</a> </li>
</ul>
</li>
<li> <a href="144.htm" tppabs="144"> 宠物美容用品</a>
<ul>
<li> <a href="145.htm" tppabs="145"> 沐浴露 </a> </li>
<li> <a href="146.htm" tppabs="146"> 干洗粉 </a> </li>
</ul>
</li>
<li> <a href="147.htm" tppabs="147"> 宠物清洁用具</a>
<ul>
<li> <a href="148.htm" tppabs="148"> 美容梳/美容刷</a> </li>
<li> <a href="149.htm" tppabs="149"> 美毛剪/指甲钳</a> </li>
</ul>
</li>
<li> <a href="150.htm" tppabs="150"> 宠物玩具用品</a>
<ul>
<li> <a href="151.htm" tppabs="151"> 咬绳/飞盘/弹力球</a> </li>
<li> <a href="152.htm" tppabs="152"> 宠物健身球 </a> </li>
</ul>
</li>
<li> <a href="153.htm" tppabs="153"> 宠物服饰系列 </a>
<ul>
<li> <a href="154.htm" tppabs="154"> 春夏装</a> </li>
<li> <a href="155.htm" tppabs="155"> 秋冬装</a> </li>
</ul>
</li>
<li> <a href="156.htm" tppabs="156"> 宠物训导用品</a>
<ul>
<li> <a href="157.htm" tppabs="157"> 狗狗牵引绳</a> </li>
<li> <a href="158.htm" tppabs="158"> 宠物项圈脖套</a> </li>
</ul>
</li>
<div class="blankbar1"></div>
</ul>
</div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
<div id="MODBLK_725" class="mod_block mb_O7ZBLKMB_block">
<h3 class="blk_t">问题解答</h3>
<div class="recent">
<div class="recent_top"></div>
<div class="recent_con">
<div class="recent_list"> <a href="77.htm" tppabs="77" title="粗暴,好动的狗如何训练">粗暴,好动的狗如何训练</a> <a href="77.htm" tppabs="77" title="粗暴,好动的狗如何训练"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
<div class="recent_list"> <a href="76.htm" tppabs="76" title="训练犬的好游戏和坏游戏">训练犬的好游戏和坏游戏</a> <a href="76.htm" tppabs="76" title="训练犬的好游戏和坏游戏"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
<div class="recent_list"> <a href="69.htm" tppabs="69" title="饲养柯利的注意事项">饲养柯利的注意事项</a> <a href="69.htm" tppabs="69" title="饲养柯利的注意事项"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
<div class="recent_list"> <a href="75.htm" tppabs="75" title="雪纳瑞的饲养细节">雪纳瑞的饲养细节</a> <a href="75.htm" tppabs="75" title="雪纳瑞的饲养细节"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
<div class="recent_list"> <a href="68.htm" tppabs="68" title="西施犬饲养注意">西施犬饲养注意</a> <a href="68.htm" tppabs="68" title="西施犬饲养注意"><img src="images/more_37.jpg" tppabs="images/more_37.jpg" width="32" height="9" border="0" /></a></div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
<div id="MODBLK_723" class="mod_block mb_NVjnty7R_block">
<h3 class="blk_t">友情连接</h3>
<div class="list_main">
<div class="list_con">
<div class="blankbar1"></div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>
</div>
</div>
<div class="blankbar"></div>
</div>
<!--main_div end-->
</div>
</div>
<!--mainmain end-->
</div>
<!--web_bg end-->
</div>
<div id="footer_bg">
<!-- 页脚【start】 -->
<div id="footer">
<div class="copyright">
<style type="text/css">
.mb_foot_block {
position: relative;
}
.mb_foot_block a {
display: inline;
}
</style>
<div id="MODBLK_719" class="mod_block mb_foot_block">
<div class="com_con">
马园，15040268</div>
</div>
</div>
</body>
</html>
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
