html作业中等水平制作，适用于有一点基础的同学，页面排版干净，固定导航栏加上轮播图，包含了表单，视频音频超链接轮播图等基础知识，采用了html+css来实现布局，网站深度为两层。在登录界面用了一小段js来作为输入框的判断，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
难度系数：★★★☆☆
一、网站题目
保护熊猫，动物介绍，熊猫介绍，保护生态环境等网站的设计与制作
二、网站描述
一个致力于介绍熊猫的专业网站！在这里，我们热衷于探索、分享并深入了解丰富多彩的熊猫世界，引领你进入令人惊叹的熊猫王国。网站分为七个模块，分别是主页，熊猫介绍，详细介绍（详细介绍模块包含了六页，所以这个网站可以说有12页也可以说是7页，因为这六页布局都一样，只是内容不一样），熊猫书籍，登录、注册、个人信息。页面布局分模块，主页是一种布局，介绍是一种布局，书籍是一种布局，详细介绍是一种布局，登录注册个人信息是一种布局。网站较为基础，属于中等难度，适合有一点基础的同学作为练习使用
三、网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的布局结构。多采用div+css来实现布局
网站程序方面：采用html+css+js技术来实现网站，并且兼容市面主流浏览器，打开不会错位不会乱码。
网站素材方面：通过网络社交网站等搜集图片和文字，运用适当的处理方法来对素材进行处理。
网站文件方面：网站系统文件种类包含：css文件夹、js文件夹、images文件夹；
网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
四、网站效果
这里对网站页面进行了截图展示，包含了视频链接。
HTML+CSS网站分享：熊猫介绍
五、部分代码制作
每个页面的css文件是分开的，文件太多了，所以就展示一个页面，在测试时需要替换掉里面的图片位置为本地位置，需要在swiper3官网引入swiper文件，如果本地有下载可以直接在本地引用路径。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/swiper.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<link rel="stylesheet" href="./css/nav.css">
<title>Document</title>
</head>
<body>
<img src="./images/熊猫.png" alt="" width="400px" height="105px" style="object-fit: cover;object-position: center; margin: 0 auto; display: block;">
<div class="head">
<div>
<div class="nav">
<div><a href="./index.html">首页</a></div>
<div style="border-left: 1px solid white; border-right: 1px solid white;">
<select name="" id="" onchange="window.location=this.value" style="border: none; background-color: rgba(0, 0, 0, 0); color: black; font-size: 36px; font-family: 'bt';">
<option style="background-color: white;" disabled hidden selected>熊猫知识</option>
<option value="./td.html" style="background-color: white;">熊猫介绍</option>
<option value="./book.html" style="background-color: white;">熊猫书籍</option>
</select>
</div>
<div><a href="./login.html">个人中心</a></div>
</div>
<!-- Swiper -->
<div style="display: flex; align-items: center; height: 620px;">
<div class="swiper-button-prev swiper-button-white" style="opacity: 0.5;"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(./images/swiper1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(./images/swiper2.jpg)"></div>
<div class="swiper-slide" style="background-image:url(./images/swiper3.jpg)"></div>
<div class="swiper-slide" style="background-image:url(./images/swiper4.jpg)"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- Add Arrows -->
</div>
<div class="swiper-button-next swiper-button-white" style="opacity: 0.5;"></div>
</div>
</div>
</div>
<a name="a1"></a>
<div class="main" align="center">
<div style="width: 100%; background-color: rgba(67, 67, 67, 0.8);padding-top: 50px; padding-bottom: 50px;">
<p style="font-size: 30px; color: rgb(207, 236, 192);">网站简介</p>
<p style="color: white; margin-top: 10px; text-align: start;">欢迎来到本网站，一个致力于介绍熊猫的专业网站！在这里，我们热衷于探索、分享并深入了解丰富多彩的熊猫世界，引领你进入令人惊叹的熊猫王国。</p>
<p style="color: white; margin-top: 10px;text-align: start;">希望你能在这个平台度过一段愉快的旅程！</p>
</div>
</div>
<p style="font-size: 30px; color: rgb(207, 236, 192);; text-align: center; margin-top: 50px;">大熊猫濒危的原因</p>
<div class="btm">
<div>
<p style="padding: 0; margin: 0; padding-left:5px ; border-left: 5px solid rgb(207, 236, 192);; font-weight: bold; font-size: 20px;">栖息地破坏</p>
<p>自然灾害、人类活动和城市化进程导致了大量大熊猫栖息地的丧失和破碎化。大熊猫栖息地的森林砍伐、开垦和建设等活动对其生存环境造成了严重破坏。</p>
</div>
<div>
<p style="padding: 0; margin: 0; padding-left:5px ; border-left: 5px solid rgb(207, 236, 192);; font-weight: bold; font-size: 20px;">非法狩猎和贩卖</p>
<p>在过去，非法狩猎和贩卖大熊猫是导致其数量锐减的主要原因之一。为了获取利益，一些不法分子猎杀大熊猫，对其毛皮、骨骼等进行非法交易。</p>
</div>
</div><br>
<div class="btm">
<div>
<p style="padding: 0; margin: 0; padding-left:5px ; border-left: 5px solid rgb(207, 236, 192);; font-weight: bold; font-size: 20px;">气候变化</p>
<p>气候变化对大熊猫的生存也产生了影响。全球气候变暖导致大熊猫的栖息地气温升高，影响了大熊猫的繁殖和生存。</p>
</div>
<div>
<p style="padding: 0; margin: 0; padding-left:5px ; border-left: 5px solid rgb(207, 236, 192);; font-weight: bold; font-size: 20px;">食物短缺</p>
<p>大熊猫以竹子为主食，而竹子的生长周期和产量受到气候、土壤等多种因素的影响，可能导致食物短缺。</p>
</div>
</div>
<p style="font-size: 30px; color: rgb(207, 236, 192);; text-align: center; margin-top: 50px;">大熊猫在生态圈中的作用</p>
<div class="btm" style="margin-bottom: 20px;">
<div>
<p style="padding: 0; margin: 0; padding-left:5px ; border-left: 5px solid rgb(207, 236, 192);; font-weight: bold; font-size: 20px;">生态平衡</p>
<p>作为一种食草动物，大熊猫主要以竹子为食，对于竹林的生长和传播具有重要影响。它们通过吃掉竹子来控制竹林的密度，帮助保持森林的健康和生态平衡。</p>
</div>
<div>
<p style="padding: 0; margin: 0; padding-left:5px ; border-left: 5px solid rgb(207, 236, 192);; font-weight: bold; font-size: 20px;">物种多样性</p>
<p>大熊猫是中国特有的珍稀物种，它们的存在对于保护地区的生物多样性起到了重要作用。通过保护大熊猫的栖息地，我们不仅能保护它们自身的种群，还能保护其他许多与之共生的物种和生态系统。</p>
</div>
</div>
<div class="btm" style="margin-bottom: 150px;">
<div>
<p style="padding: 0; margin: 0; padding-left:5px ; border-left: 5px solid rgb(207, 236, 192);; font-weight: bold; font-size: 20px;">传粉和传播种子</p>
<p>大熊猫在进食过程中，花粉会沾在它们的身上，并在其移动和排泄过程中传播到其他植物上，促进了植物的繁殖和种群的多样性。此外，大熊猫也可以通过吃水果等方式传播种子，帮助植物种子扩散。</p>
</div>
<div>
<p style="padding: 0; margin: 0; padding-left:5px ; border-left: 5px solid rgb(207, 236, 192);; font-weight: bold; font-size: 20px;">生态旅游</p>
<p>大熊猫是中国的国宝之一，也是许多人梦寐以求的旅游目的地。它们吸引了大量的游客，为当地经济和旅游业带来了收益，从而促进地区的可持续发展和社会经济增长。</p>
</div>
</div>
<div class="btm1">
<div><img src="./images/熊猫.png" alt=""></div>
<div>
<img src="./images/熊猫吃竹叶.png" alt="">
<p>熊猫吃竹叶</p>
</div>
<div>
<img src="./images/熊猫玩树叶.png" alt="">
<p>熊猫玩树叶</p>
</div>
<div>
<img src="./images/熊猫眯眼.png" alt="">
<p>熊猫眯眼</p>
</div>
<div>
<p><a href="index.html#a1">关于本站</a></p>
<p><a href="td.html">熊猫介绍</a></p>
<p>法律申明</p>
</div>
</div>
</body>
</html>
<script src="./js/swiper.min.js"></script>
<script src="./js/swiper.js"></script>index.css
.main{
width: 100%;
background-color: black;
}
.main p{
width: 40%;
margin: 0;
}
.btm{
display: flex;
align-items: center;
justify-content: space-between;
}
.btm div{
width: 48%;
padding: 10px;
box-sizing: border-box;
background-color: rgb(54, 54, 54);
border-radius: 10px;
color: white !important;
}nav.css
@font-face {
font-family: 'bt';
src: url(./No.39-ShangShouZhiZunShuFaTi-2.ttf);
}
.head{
width: 100%;
background-image: url(../images/indexbg.jpg);
background-size: 100%;
background-position: left;
/* padding-bottom: 20px; */
/* height:700px; */
}
.nav{
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid black;
}
.nav div{
width: 25%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.nav div a{
color: black;
font-size: 36px;
text-decoration: none;
font-family: 'bt';
}
.nav div a:focus{
color: black;
}
option{
background-color: white;
}
.btm1{
display: flex;
align-items: flex-start;
justify-content: space-around;
margin-bottom: 20px;
margin-top: 20px;
}
.btm1 div{
width: 19%;
text-align: center;
}
.btm1 div img{
width: 60%;
}
.btm1 p{
margin: 0;
font-size: 24px;
}
.btm1 p a{
text-decoration: none;
color: black;
font-size: 24px;
}
.btm1 :nth-child(5){
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 150px;
/* padding-left: 10px; */
box-sizing: border-box;
border-left: 3px solid black;
}
body,html{
padding: 0;
margin: 0;
}六、制作心得
在制作前期遇到了很多问题，例如图片收集文案收集等，然后考虑了网页的大概排版布局以及每个页面的内容，同时也需要考虑网站的配色等等。通过这个网站的制作可以更加熟练地掌握html和css内容，通过对登录注册个人信息三个页面的制作也能更熟悉的掌握js的内容
扫一扫
1235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
