- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

HTML期末学生大作业-拯救宠物网页作业html+css

IT司马青衫发表于 2022/08/11 11:18:29 2022/08/11

【摘要】 🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台...

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主

💂 作者主页: 【主页——🚀获取更多优质源码】

🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】

🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】

🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】

🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

@TOC

一、👨‍🎓网站题目

🐕 宠物网页设计、🐼保护动物网页、🐋鲸鱼海豚主题、🐘保护大象、等网站的设计与制作。

二、✍️网站描述

🏷️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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代码）。

四、💠网站演示

五、⚙️ 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/index.css">
<title>拯救濒危动物</title>

</head>

<body>

<!--header  begin-->
<div class="header" style="background-image: url('images/header.jpg');">

</div>
<!--header  end-->
<!--navigation  begin-->
<div class="navigation">
	<ul>
  		<li><a href="index.html">首页</a></li>
  		<li><a href="fa.html">倡议书</a></li>
		<li><a href="cz.html">濒危动物</a></li>
		<li><a href="zw.html">濒危物种分布</a></li>
		<li><a href="zs.html">濒危原因</a></li>
		<li><a href="sg.html">如何保护</a></li>
		<li><a href="ly.html">给我留言</a></li>
		<li><a href="mailto:2621075690@qq.com">联系我们</a></li>
	</ul>
	</div>
<!--navigation  end-->


<!--layer2  begin-->
<div class="layer2">
		<div class="header">
		
		</div>
		<div class="left">
		
		 <img class="m" src="images/temp1.jpg"  width="711" height="400"/>
		
		<div class="title">
		
		</div>
		</div>
		<div class="right">
		<p>
  		 濒危动物是指所有由于物种自身的原因或受到人类活动或自然灾害的影响，而有灭绝危险的野生动物物种。从广义上讲，濒危动物泛指珍贵、濒危或稀有的野生动物。从野生动物管理学角度讲，濒危动物是指《濒危野生动植物种国际贸易公约》 [1]附录所列动物，以及国家和地方重点保护的野生动物。</p>
		</div>
		
</div>
<!--layer2  end-->

<hr/>

<!--layer4  begin-->
<div class="layer4">
		<div class="header">
		<strong>拯救濒危动物倡议书</strong>
		</div>
		<div class="right">
		<p>
  		生物多样性是人类一切社会活动的物质基础，没有生物，人类就无法生存。生物生存是自然赋予的权利，生物生存的权利就是生物对维持生命及其生存条件拥有的权利。破坏了它们的生存条件，也就剥夺了它们存在的权利。不仅阳光、空气、水域等构成生物的基本生存条件，而且不同的生物通过食物链、食物网彼此构成基本的相互依存条件，任何生物一旦脱离生物种群或群落便无法存在。<a href="fa.html">更多</a></p>
		</div>
		<div class="left">
		
		 <img src="images/ly1.jpg"  width="711" height="400"/>
		
		<div class="title">
		
		</div>
		</div>
		
		
</div>
<!--layer4  end-->

   <!--layer7  begin-->
<div class="layer7">
<div class="header">
		<strong>濒危动物</strong>
		</div>
<div class="layer7-content">
 <div class="content" style="line-height: 30px; font-size: 16px; min-height: 250px;">

		   <div style="min-height:250px;width:1000px;margin:0 auto;">
           <table width="1000" border="0">
  <tr>
    <td><img src="images/f1.jpg" width="330" height="248"/></td>
    <td><img src="images/f2.jpg"  width="330" height="248"/></td>
    <td><img src="images/f3.jpg"  width="330" height="248"/> </td>
    
  </tr>
</table>


    </div>

          </div>
</div>
</div>
<!--layer7  end-->
<!--footer  begin-->
<div class="footer">
<div class="info">
&copy;版权所有：拯救濒危动物网站
</div>
</div>
<!--footer  end-->

</body>
</html>

💒CSS样式代码



body {background-color:#e8e8de;}
.navigation{width:1000px;height:46px;margin: 0px auto;text-align:center;background-color:#0f2f56;}
.navigation ul {list-style-type: none;margin: 0 auto;padding: 0;overflow: hidden;display:inline-block;}
.navigation li {float: left;}
.navigation li a {display: block;color: #ffffff;text-align: center;padding: 10px 18px;text-decoration: none; font-size:16px;}
.navigation li a:hover {background-color: #e0191c;}

.header {width:1000px;height:173px;margin:0 auto;position:relative;}
.header  img{display:block; margin: 0 auto;}

hr{width:1000px;margin:0 auto;}
.layer2 {width:1000px;height:468px;margin: 0px auto;}
.layer2  .header {width:651px;height:20px;margin: 0px auto;padding-top:10px;} 
.layer2  .left {width:720px;height:350px;margin: 0px auto;float:left;} 
.layer2  .left  .title-img{width:720px;height:264px;margin: 0px auto;} 
.layer2  .left  .title{width:720px;height:50px;margin: 0px auto;text-align: center; font-size:16px;font-weight:bold} 
.layer2  .right {width:245px;height:315px;margin: 0px auto;float:left;padding:10px;text-indent:25px;line-height:30px;}


.footer {width:100%;height:100px;margin: auto;background-color:#093864;}
.footer .info {width:856px;margin: 0 auto;display: block;color: #ffffff;text-decoration: none; font-size:14px;text-align: center;padding-top:34px;}

.layer7  .header {width:1000px;height:30px;margin: 0px auto;text-align:center;font-size:20px;padding-top:20px;} 
.layer7  .layer7-content {margin-top:20px;} 
.layer7  .text-content{width:800px;height:122px;margin: 0px auto;padding:10px;text-indent:25px;line-height:30px;} 
.layer7  .text-content2{width:800px;height:40px;margin: 0px auto;padding:10px;text-indent:25px;line-height:30px;} 
.layer7  .text-content3{width:800px;margin: 0px auto;padding:10px;text-indent:25px;line-height:30px;} 
.layer7 .text-content3 p strong {text-align: center;}

.layer3 {width:1000px;height:730px;margin: 0px auto;}
.layer3  .header {width:651px;height:20px;margin: 0px auto;padding-top:10px;} 
.layer3  .left {width:556px;height:350px;margin: 0px auto;float:left;} 
.layer3  .left  .title-img{width:720px;height:264px;margin: 0px auto;} 
.layer3  .left  .title{width:720px;height:50px;margin: 0px auto;text-align: center; font-size:16px;font-weight:bold} 
.layer3  .right {width:373px;height:315px;margin: 0px auto;float:left;padding:10px;text-indent:25px;line-height:30px;}

.layer4 {width:1000px;height:468px;margin: 0px auto;}
.layer4  .header {width:651px;height:20px;margin: 0px auto;padding-top:10px;font-size:20px;padding-bottom:20px;text-align:center;} 
.layer4  .left {width:720px;height:350px;margin: 0px auto;float:left;} 
.layer4  .left  .title-img{width:720px;height:264px;margin: 0px auto;} 
.layer4  .left  .title{width:720px;height:50px;margin: 0px auto;text-align: center; font-size:16px;font-weight:bold} 
.layer4  .right {width:245px;height:315px;margin: 0px auto;float:left;padding:10px;text-indent:25px;line-height:30px;}

.hui{width:1000px;}
.huia{width:1000px; }
.huia p{font-size:16px; line-height:80px; text-align: right; padding-right:20px;}
.huia .tiao1{width:250px; height:25px; border:1px solid #000000; float: left; margin-left:20px;}
.huia .xb {margin-left:20px; }
.huia .ah {margin-left:20px; }
.liu{ width:1000px;}
.liu .liuyan { width:600px; height:200px;border:1px solid #000000;margin-left:300px;}
.huit{ width:1000px; height:50px; text-align:center}
.huit .tj{width:100px; height:40px; margin-top:20px; background:#d43a3b; border-radius:10px;}

* {margin: 0px;padding: 0px;}

六、🥇 如何让学习不再盲目

21年程序员总结给编程菜鸟的16条忠告

入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。
多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。
菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。
不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。
没积累足够知识和经验前，你是开发不出一个完整项目的。
把最新技术挂在嘴边，还不如把过时技术牢记心中。
活到老学到老，只有一招半式是闯不了江湖的。
看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。
书读百遍其义自见，别指望读一遍就能掌握。
请把教程里的例子亲手实践下，即使案例中有完整源码。
把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。
不要漏掉教程中任何一个习题——请全部做完并做好笔记。
水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。
每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。
做好保存源文件的习惯，这些都是你的知识积累。
遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入