HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物学生网页设计作业源码(HTML+CSS+JS)

HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物学生网页设计作业源码(HTML+CSS+JS)临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作

@码出未来-web网页设计

5466人浏览 · 2021-07-08 14:55:41

@码出未来-web网页设计 · 2021-07-08 14:55:41 发布

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制作了表单判断（提交时表单不能为空）

文章目录

HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物学生网页设计作业源码(HTML+CSS+JS)
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业作品文章
七、更多表白源码
八、150套Echarts 大数据可视化

一、作品演示

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>