web网页设计：保护鲸鱼动物网页设计作业 静态HTML宠物主题网页作业 大学生简单动物网页作品代码_java wed海洋科普网页设计-程序员宅基地

技术标签： 宠物  HTML学生个人网页设计作品  HTML5期末大作业  静态网页设计报告课程模板实训  前端  html网页设计作业  html  web网页设计  课程设计  

学生HTML静态网页基础水平制作，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

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

【学习资料/简历模板/面试资料/ 网站设计与制作】

【web前端期末大作业——毕设项目精品实战案例】

文章目录

一、网站题目

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

二、️网站描述

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

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

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

三、网站介绍

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

网站程序方面：计划采用最新的网页编程语言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 charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>

<body>
<div class="top">
<div class="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="xueshi.html">动物学史</a></li>
<li><a href="xiaji.html">下级分类</a></li>
<li><a href="shengli.html">生理构造</a></li>
<li><a href="zhongqun.html">种群现状</a></li></ul>
</div>

</div>



<div class="xia">
<div class="title"><p>鲸目</p></div>
<div>
<div class="zuo">
<p>鲸目（学名：Cetacea）是哺乳纲下设的一个传统分类单元，包含现存约90种体态似鱼、皮肤裸露的水生哺乳动物和它们已灭绝的早期亲族，统称 鲸类 或 鲸豚类，习惯上体型大者称鲸（英：Whales），小者称豚（英：Dolphins）。大部分栖息于浅海，少数几种栖息于淡水。</p>
<p>鲸类的形体构造和生活习性明显异于任何哺乳类，故长期单列为一目。其祖先和演化史一度存有争议，但随着相关研究不断进展，现已充分证实鲸类由5000万年前的陆生偶蹄目入水后演化而成。DNA测序显示鲸类与河马互为姐妹群，二者构成的分支又与反刍亚目互为姐妹群。为避免偶蹄目成为并系群（即缺少部分演化支），现行分类将鲸目归入偶蹄目，降级为 鲸下目。</p>
<p>为适应水下环境，鲸类的前肢进化为鳍，后肢退化，并生出水平的尾鳍。鼻孔移生至头顶，须每隔一段时间将鼻孔露出水面置换氧气。无耳廓，但听力极佳。鲸类的两大支系——须鲸和齿鲸，在3400万年前分化。须鲸现存约15种，口内无齿，上颌有帘幕般的角质鲸须，滤食磷虾、小鱼等；普遍体型巨大，是世界上最大的一类动物。齿鲸现存约75种，口中多有利齿，捕食鱼类、头足类等；总体上体型较须鲸小，且不同种类间差距较大；拥有发达的声呐系统，活动时主要依靠回声定位功能；部分种类智商极高，甚至具备复杂的情感。</p>
<p>鲸类每胎仅产1崽，生长期长，在人类侵害下1/4的种类濒临灭绝 。尽管国际捕鲸委员会自20世纪80年代起规定禁止商业捕鲸，但冰岛、挪威、俄罗斯、日本等国仍在大量猎杀鲸类。</p>
</div>
<div class="you"><p><img src="images/t.jpg" width="430"></p>
<Br>
<p><img src="images/t1.jpg" width="430" height="258"></p></div>
</div><div class="clearit"></div>
<hr>

<div class="zi">
<h3>命名</h3>
<p>鲸目由 18 世纪法国动物学家 马蒂兰· 雅克· 布里松（法文：Mathurin Jacques Brisson，1723－1806）在 1762 年命名。“Cetacea” 来自拉丁文 cetus，意为“鲸”，词源为古希腊文 κῆτος（罗马化：kētos），意为“巨大的鱼”。</p>
<p>在证实鲸目演化自偶蹄目后，其分类层级降为下目，但学名未变。</p>
</div>

<div class="tu"><img src="images/s1.jpg" width="300" height="200"><img src="images/s2.jpg" width="300" height="200"><img src="images/s3.jpg" width="300" height="200"></div>

</div>


<div class="foot">鲸</div>
</body>
</html>

CSS样式代码


body, html, div, blockquote, img, label, p, h1, h2, h3, h4,  ul, 
li, a
{
    margin: 0; padding: 0; border: 0; outline: none;}
body {
    	font-family: "黑体";font-size: 14px;color:#000000;line-height: 20px;text-align:left; background:#0c546a}

a {
    color: #000000;} 
A:link {
    TEXT-DECORATION: none;}
A:visited {
    TEXT-DECORATION: none;}

ul,li{
    list-style-type:none;}
.clearit{
    clear:both;}

.top {
    width:100%; height:853px; background:url(../images/ban.jpg);}
.nav {
    width:100%; height:60px; background: rgba(0,0,0, 0.7 );}
.nav ul {
     width:1000px; margin:0 auto;}
.nav ul  li {
     width:200px; float:left; text-align:center; line-height:60px;}
.nav ul  li  a {
     color:#FFF;  font-size:18px;  width:200px; height:60px; display:block;}
.nav ul  li  A:hover  {
     background:#000;}
.xia {
     width:1000px; margin:0 auto; background: rgba(255,255,255, 0.7 ); padding:20px;  margin-top:-250px;}
.title {
    width:150px; height:40px; background:#FFF; border-radius:15px; text-align:center; line-height:40px; }
.title p {
     font-size:18px; font-weight:bold;}
.zuo {
    width:550px; float:left; line-height:30px; margin-top:20px;}
.zuo  p {
    text-indent:2em;}
.you {
    width:430px; float:left; margin-left:20px;}
.you p {
     margin-top:20px;}
.zi {
     margin-top:20px;}
.zi h3 {
     margin-bottom:10px;}
.zi p {
     line-height:30px; text-indent:2em;}
.tu img {
     margin-top:20px; margin-left:25px;}
.foot {
    width:100%; height:70px; background: rgba(0,0,0, 0.7 ); text-align:center; line-height:70px;  color:#FFF;  font-size:18px; font-weight:bold}
.zi table {
     border-collapse:collapse; margin-top:15px;}
.zi td {
     border:1px solid #333; padding:6px;}

六、 如何让学习不再盲目

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

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

七、更多干货

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

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

3.

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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m1_46321522/article/details/134880601

智能推荐

oracle 12c 集群安装后的检查_12c查看crs状态-程序员宅基地

文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下：http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态：[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态

解决jupyter notebook无法找到虚拟环境的问题_jupyter没有pytorch环境-程序员宅基地

文章浏览阅读1.3w次，点赞45次，收藏99次。我个人用的是anaconda3的一个python集成环境，自带jupyter notebook，但在我打开jupyter notebook界面后，却找不到对应的虚拟环境，原来是jupyter notebook只是通用于下载anaconda时自带的环境，其他环境要想使用必须手动下载一些库：1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境

国内安装scoop的保姆教程_scoop-cn-程序员宅基地

文章浏览阅读5.2k次，点赞19次，收藏28次。选择scoop纯属意外，也是无奈，因为电脑用户被锁了管理员权限，所有exe安装程序都无法安装，只可以用绿色软件，最后被我发现scoop，省去了到处下载XXX绿色版的烦恼，当然scoop里需要管理员权限的软件也跟我无缘了（譬如everything）。推荐添加dorado这个bucket镜像，里面很多中文软件，但是部分国外的软件下载地址在github，可能无法下载。以上两个是官方bucket的国内镜像，所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn

Element ui colorpicker在Vue中的使用_vue el-color-picker-程序员宅基地

文章浏览阅读4.5k次，点赞2次，收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了，例如：这里的:sty..._vue el-color-picker

迅为iTOP-4412精英版之烧写内核移植后的镜像_exynos 4412 刷机-程序员宅基地

文章浏览阅读640次。基于芯片日益增长的问题，所以内核开发者们引入了新的方法，就是在内核中只保留函数，而数据则不包含，由用户（应用程序员）自己把数据按照规定的格式编写，并放在约定的地方，为了不占用过多的内存，还要求数据以根精简的方式编写。boot启动时，传参给内核，告诉内核设备树文件和kernel的位置，内核启动时根据地址去找到设备树文件，再利用专用的编译器去反编译dtb文件，将dtb还原成数据结构，以供驱动的函数去调用。firmware是三星的一个固件的设备信息，因为找不到固件，所以内核启动不成功。_exynos 4412 刷机

Linux系统配置jdk_linux配置jdk-程序员宅基地

文章浏览阅读2w次，点赞24次，收藏42次。Linux系统配置jdkLinux学习教程，Linux入门教程（超详细）_linux配置jdk

随便推点

matlab(4)：特殊符号的输入_matlab微米怎么输入-程序员宅基地

文章浏览阅读3.3k次，点赞5次，收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图：_matlab微米怎么输入

C语言程序设计-文件(打开与关闭、顺序、二进制读写)-程序员宅基地

文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件，可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中，对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数，而关闭则使用fclose函数。在C语言中，可以使用fread和fwrite函数进行二进制读写。‍ Biaoge 于2024-03-09 23:51发布 阅读量：7 ️文章类型：【 C语言程序设计 】在C语言中，用于打开文件的函数是____，用于关闭文件的函数是____。

Touchdesigner自学笔记之三_touchdesigner怎么让一个模型跟着鼠标移动-程序员宅基地

文章浏览阅读3.4k次，点赞2次，收藏13次。跟随鼠标移动的粒子以grid（SOP）为partical（SOP）的资源模板，调整后连接【Geo组合+point spirit（MAT)】，在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in（CHOP)鼠标位置到metaball的坐标，实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动

【附源码】基于java的校园停车场管理系统的设计与实现61m0e9计算机毕设SSM_基于java技术的停车场管理系统实现与设计-程序员宅基地

文章浏览阅读178次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计

Android系统播放器MediaPlayer源码分析_android多媒体播放源码分析 时序图-程序员宅基地

文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多，会从Java-&amp;amp;gt;Jni-&amp;amp;gt;C/C++慢慢分析，后面会慢慢更新。另外，博客只作为自己学习记录的一种方式，对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图

java 数据结构与算法 ——快速排序法-程序员宅基地

文章浏览阅读2.4k次，点赞41次，收藏13次。java 数据结构与算法 ——快速排序法_快速排序法

推荐文章

热门文章

相关标签