91.北极熊动物主题网页 Web前端网页制作大学生期末大作业 html+css

本文链接：https://blog.csdn.net/VX_L_5201314168/article/details/143301073

一、更多推荐

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业模板案例、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

关注作者，点赞收藏博文，获取更多源码，3Q！

二、网页简介

本实例以北极熊为主题设计，本实例系统文件种类包含：html、css、js网页样式文件。应用DIV、点击事件、动态轮翻效果、留言板等，供大家参考。

本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

三、网页效果

四、代码展示

1.HTML

代码如下（节选示例）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/css.css" />
<title>北极熊</title>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/scroll.js"></script>
</head>
<body>
<div class="wrapin">
<div class="banner"> <img src="images/banner.jpg"/> </div>
<div class="header">
<ul class="nav">
<li><a href="index.html">主页</a></li>
<li><a href="life.html">生活习性</a></li>
<li><a href="population.html">种群现状</a></li>
<li><a href="features.html">外形特征</a></li>
<li><a href="reproduction.html">生长繁殖</a></li>
<li><a href="liuyan.html">留言 </a></li>
</ul>
</div>
<div class="con">
<div class="con_t">
<div class="text">
<h3>北极熊（世界上最大的陆地食肉动物）</h3>
<p>
北极熊（拉丁学名：Ursus maritimus），是熊科熊属的一种动物，是世界上最大的陆地食肉动物，又名白熊。皮肤为黑色，由于毛发透明故外观上通常为白色，也有黄色等颜色，体型巨大，凶猛。<br>
北极熊的视力和听力与人类相当，但它们的嗅觉极为灵敏，是犬类的7倍；奔跑时最快速度可达60km/h，是世界百米冠军的1.5倍。由于全球气温的升高，北极的浮冰逐渐开始融化，北极熊昔日的家园已遭到一定程度的破坏，在不久的未来很可能灭绝，需要人类的保护。<br>
2020年7月20日，《自然》杂志（Nature）发布的研究显示，随着气候变化加剧，北极熊的生存环境遭到极大破坏，这一物种或将于2100年灭绝。</p>
</div>
<div class="pic"> <img src="images/pic_01.jpg"/> </div>
<div class="clear"></div>
</div>

<div class="rules">
<div class="title">栖息环境</div>
<P>北极熊是一种能在恶劣的环境下生存的动物，其活动范围主要在北冰洋附近有浮冰的海域。</P>
</div>

<div class="players">
<div class="title">北极熊图片</div>
<div class="imglist scrollleft" >
<ul class="players_box">
<li>
<div class="pic"><img src="images/pic_01.jpg"/> </div>
<p>北极熊图片</p>
</li>
<li>
<div class="pic"><img src="images/pic_02.jpg"/> </div>
<p>北极熊图片</p>
</li>
<li>
<div class="pic"><img src="images/pic_03.jpg"/> </div>
<p>北极熊图片</p>
</li>
<li>
<div class="pic"><img src="images/pic_04.jpg"/> </div>
<p>北极熊图片</p>
</li>
<li>
<div class="pic"><img src="images/pic_05.jpg"/> </div>
<p>北极熊图片</p>
</li>
<li>
<div class="pic"><img src="images/pic_06.jpg"/> </div>
<p>北极熊图片</p>
</li>
<li>
<div class="pic"><img src="images/pic_07.jpg"/> </div>
<p>北极熊图片</p>
</li>
<li>
<div class="pic"><img src="images/pic_08.jpg"/> </div>
<p>北极熊图片</p>
</li>
<li>
<div class="pic"><img src="images/pic_09.jpg"/> </div>
<p>北极熊图片</p>
</li>
</ul>
<div class="clear"></div>
</div>

......

2.CSS

代码如下（节选示例）：

* {
   margin: 0;
   padding: 0;
}
body {
   min-width: 1200px;
   margin: 0 auto;
   font-size: 14px;
   font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif;
   background: #fff;
   text-align: justify;
   color: #010000;
   position: relative;
}
h1, h2, h3 {
   font-weight: 500;
}
img {
   border: none;
}
a {
   cursor: pointer;
   color: #333;
   text-decoration: none;
   outline: none;
}
ul {
   list-style-type: none;
}
em {
   font-style: normal;
}
.lt {
   float: left;
}
.rt {
   float: right;
}

table {
border-collapse: collapse;
}
table td, table th {
padding: 0;
}

div.clear {
   font: 0px Arial;
   line-height: 0;
   height: 0;
   overflow: hidden;
   clear: both;
}
.wrapin {
   width: 1200px;
   margin-left: auto;
   margin-right: auto;
}
body {
   background: url(../images/bg.jpg) no-repeat center;
   background-size: cover;
}
.banner {
   width: 100%;
   display: block;
}
.banner img {
   width: 100%;
   display: block;
}
.header {
   background:#FFF;
   height: 60px;
   width: 100%;
   border-bottom:1px solid #ddd;
}
.nav {
   line-height: 60px;
}
.nav li {
   text-align: center;
   width: 140px;
   display: inline-block;
}
.nav li a {
   font-size: 16px;
   color: #333;
}
.con {
   min-height: 500px;
   background: rgba(255,255,255,1);
   padding: 15px;
}
.title {
   margin:20px 0;
   font-weight: bold;
   color: #fff;
   font-size: 18px;
   line-height: 40px;
   background:#3a6788;
   padding:1px 10px;
}
.con_t {
   padding: 30px 0 0;
}
.con_t .pic {
   float:right;
   width: 400px;
   border: 1px solid #ccc;
   padding: 10px;
   box-sizing: border-box;
}
.con_t .pic img {
   width: 100%;
}
.con_t .text {
   float:left;
   width: 740px;
   font-size: 14px;
   line-height: 28px;
   color: #333;
}
.con_t .text h3 {
   font-size:22px;
   margin-bottom:20px;
}
.players_box {
}
.players_box li {
   width:300px;
   margin-right:20px;
   float: left;
   text-align: center;
   margin-bottom: 20px;
   border:1px solid #3a6788;
}
.players_box li .pic {
   width:100%;
   margin:0 auto;
   overflow:hidden;
   height:195px;
}
.players_box li p {
   font-size: 16px;
   color: #333;
   line-height: 30px;
   display: block;
   margin: 0 auto;
   background: #fff;
   position: relative;
   z-index: 1;
}
.players_box li img {
   display:block;
   width:100%;
   height:100%;
   object-fit:cover;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}
.players_box li img:hover {
   transform: scale(1.1);
   -webkit-transform: scale(1.1); /*兼容-webkit-引擎浏览器*/
   -moz-transform: scale(1.1);
}
.rules h2 {
   color: #000;
   font-weight: bold;
   margin: 10px 0;
}

......

3.JS

代码如下（节选示例）：

//图片滚动调用方法 imgscroll({speed: 30,amount: 1,dir: "up"});
$.fn.imgscroll = function(o){
   var defaults = {
       speed: 40,
       amount: 0,
       width: 1,
       dir: "left"
   };
   o = $.extend(defaults, o);

   return this.each(function(){
       var _li = $("li", this);
       _li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
       _li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul
       _li.css({position: "relative", overflow: "hidden"}); //li
       if(o.dir == "left") _li.css({float: "left"});

       //初始大小
       var _li_size = 0;
       for(var i=0; i<_li.size(); i++)
           _li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);

       //循环所需要的元素
       if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});
       _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
       _li = $("li", this);

       //滚动
       var _li_scroll = 0;
       function goto(){
           _li_scroll += o.width;
{
               _li_scroll = 0;
               _li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });
               _li_scroll += o.width;
           }
               _li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);
       }

......