首页 > 分享 > 保护鲸鱼动物网页设计作业静态HTML宠物主题网页作业 DW鲸鱼网站模板下载大学生简单动物网页作品代码个人网页制作学生个人网页 (1)

保护鲸鱼动物网页设计作业静态HTML宠物主题网页作业 DW鲸鱼网站模板下载大学生简单动物网页作品代码个人网页制作学生个人网页 (1)

萌宠菠菠乐园
2024-12-07 08:44

精彩专栏推荐文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
作者主页: 【主页——获取更多优质源码】
web前端期末大作业：【毕设项目精品实战案例 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (110套) 】
超炫酷的Echarts大屏可视化源码：【 Echarts大屏展示大数据平台可视化(150套) 】
HTML+CSS+JS实例代码：【️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程 120G干货分享】
关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。坚持原创，热衷分享，初心未改，继往开来！

文章目录一、‍网站题目二、✍️网站描述三、网站介绍四、网站演示五、⚙️ 网站代码HTML结构代码CSS样式代码六、如何让学习不再盲目七、更多干货

一、‍网站题目

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

二、✍️网站描述

️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 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>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556

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;}

1234567891011121314151617181920212223242526272829303132333435

六、如何让学习不再盲目

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

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