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