大学生网页制作教程学生HTML静态动物网页设计作业成品简单网页制作代码学生宠物

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

U19JP-老虎-7页

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>老虎</title><link href="css/style.css" type="text/css" rel="stylesheet" media="all"></head><body><div class="head clearfix"> <b class="fl"><img src="images/logo.jpg"></b><nav class="fr"> <a href="index.html">主页</a> <a href="about.html">老虎介绍</a> <a href="pic.html">老虎图片</a> <a href="news.html">新闻资讯</a> <a href="reg.html">注册</a> <a href="login.html">登录</a></nav></div><div class="main clearfix"><div class="banner"><img src="images/timg.jpg" width="100%"></div><div class="div2 bg000 "><div class="bar"><h3>在线留言</h3></div><form class="mui-input-group"><div class="mui-input-row"><label>姓名</label><input type="text" class="mui-input-clear"></div><div class="mui-input-row"><label>电话</label><input type="text" class="mui-input-clear"></div><div class="mui-input-row"><label>留言</label><textarea rows="" cols=""></textarea></div><div class="mui-input-row"><label></label><input type="submit" class="mui-input-clear" value="提交"></div></form></div><div class="div4 bg000 "><div class="bar"><h3>新闻资讯</h3></div><div class=""><ul><li><a href="info.html">保护渐行渐远的森林之王</a></li><li><a href="info.html">老虎攻击人后,为何一定得击毙?不能关起来吗?专家说的很有道理</a></li><li><a href="info.html">老虎咬了我家狗,打死它算“正当防卫”吗?</a></li><li><a href="info.html">野生老虎的双面性格,你知道吗?【虎王战记16】</a></li><li><a href="info.html">万兽之王为何落此地步?科学家用卫星定位系统,保护老虎远离公路</a></li><li><a href="info.html">保护东北虎的经济账怎么算?值不值得?</a></li><li><a href="info.html">为什么要保护老虎?保护老虎意味着什么,会不会再产生虎患?</a></li><li><a href="info.html">大摇大摆走在公路上,遇到老虎该如何保命?</a></li><li><a href="info.html">为何大熊猫一千多个了还在保护东北虎濒临灭绝了还无人问津?</a></li><li><a href="info.html">保护东北虎保护这片森林3.0</a></li></ul></div></div><div class="clearfix"></div><div class="div7 bg000 clearfix"><div class="bar"><h3>老虎图片</h3></div><div class=""><ul id="jSearchHeroDiv" class="imgtextlist"><li><img src="images/a1.jpg"><p>老虎图片</p></li><li><img src="images/a2.jpg"><p>老虎图片</p></li><li><img src="images/a3.jpg"><p>老虎图片</p></li><li><img src="images/a4.jpg"><p>老虎图片</p></li></ul></div></div></div><footer class="end">网页底部</footer></body></html>

🏠CSS样式代码

/* CSS Document */a {font-size: 14px;color: #333;text-decoration:none}a:hover {color:#FF9933}body {margin: 0 auto;padding: 0;background-color: #f5f5f5;width: 1000px;background-size: cover;color: #333;line-height: 30px}.clearfix:after {clear: both;content: '';display: block;}.head {background: rgba(255, 255, 255, .8);height: 104px;overflow: hidden}.head a {color: #3366CC;background: #FFFFFF;padding: 0 10px;border-radius: 10px}h1,h2,h3 {margin: 0;padding: 0}.head a {font-size: 19px;color: #333;margin: 35px 10px;display: inline-block;padding-left: 30px;box-sizing: border-box;background: url(../images/nav.png) no-repeat left;background-size: 30px auto;}.head a:hover{color:#FF9966}.fl {float: left}.fr {float: right}.head .fl {background: #fff;}.head .fl img {width: 180px;padding-top: 10px;}.bg000 {background: rgba(255, 255, 255, .8)}.bar {background:#FFCC33;color: #000;font-size:14px;padding:10px}.w40 {width: 40%;}.w60 {width: 60%}#jSearchHeroDiv li {margin: 0;padding: 0;list-style: none;display: inline-block;text-align: center;width: 200px;margin: 15px;}#jSearchHeroDiv img {width: 200px;height: 140px}.div2 .fr div {margin: 5px 5px;height: 332px}.div2 {float: left;margin-top: 20px;width: 480px;}.div4 {float: right;margin-top: 20px;width: 500px;}.swiper-container img{height: 500px;}.end {text-align: center;padding:10px 0;background:#FFCC33;margin-top:20px;}.con {padding: 20px}#latest_guide_list li:hover {}.title {color: #FF0033;text-align: center;padding: 20px 0;border-bottom: #333 dashed 1px;margin-bottom: 20px}.div1 img {float: left}.div7 {margin-top: 20px}.form{float:left}form {margin: 0;padding: 35px 0 0 50px;width: 488px;}.fr{float:right; }.rs{float:right;margin:40px 40px 0 50px}.rs a{display:inline-block; width:100px; font-size:24px; height:100px; background:#FFCC33; color:#000; padding:40px}form label {display: block;margin: 0 0 20px;overflow: hidden;padding: 0;}form label span {color: #7d7c7c;display: block;font-size: 13px;float: left;height: 31px;margin: 0;padding: 5px 14px 0 0;text-align: right;text-transform: uppercase;width: 74px;}form label .inp {border: 1px solid #d6d6d6;background: #fff;color: #7d7c7c;display: block;float: left;font-family: Arial, Helvetica, sans-serif;font-size: 13px;height: 34px;line-height: 34px;margin: 0;padding: 0 5px;width: 388px;}form label textarea {border: 1px solid #d6d6d6;background: #fff;color: #7d7c7c;display: block;float: left;font-family: Arial, Helvetica, sans-serif;font-size: 13px;height: 205px;margin: 0;overflow: auto;padding: 5px;width: 388px;}form #submit2 {border: 0;background:#FFCC33;color:#000;display: block;height: 37px;margin: 0 0 0 88px;padding: 0;width: 101px;}.div2 form {margin: 0 auto;padding: 0 ; width: 437px;}.div2 form label{margin: 0;padding: 0;}.div2 form input{width: 100%;height: 30px;}.div2 textarea{width: 100%;height: 100px;}.div2{padding-bottom: 35px;}