网页制作课程设计（野生动物园）

Small Program

已于 2023-03-20 16:04:19 修改

阅读量3.2k

点赞数 19

文章标签： html css

于 2021-07-14 19:08:51 首次发布

本文链接：https://blog.csdn.net/qq_49750651/article/details/118724559

版权

本篇文章展示由纯html与css代码实现的野生动物园静态页面网站设计，通过大量html与css语言对页面结构、样式进行实现。希望您仔细认真阅读完后有所启发。

一、网页整体搭建

该页面网站又首页、园区介绍、游园指南、互动展示四大部分组成，用户可通过点击不同板块进入浏览，野生动物园网站整体层次图如下。

二、首页页面

2.1 构建基本结构框架图

首页页面整体由六大部分组成，菜单栏、视频栏、内容栏（两栏）、版权栏、导航栏，如下图所示。

2.2 实现效果及实现代码

整体背景为动态图，使用video标签以及css样式修饰，在此不进行演示。菜单栏部分固定在页面顶部，不随页面滑动而滑动。导航栏部分随页面滚动而滚动，效果图如下。

导游图页面展示。

实现代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/动物园logo.jpg">
<title>XXXX动物园</title>
<link href="link.css" rel="stylesheet"/>
</head>

<body>
<div class="background1">
	<div id="header">
		<p class="p1"><span class="p2">欢迎来到XXXX野生动物园</span>服务热线:<strong class="p3">xxx-xxxxxx</strong></p>
    	<hr color="green" size="1">
    	<ul class="header">
    		<a href="#"><li class="head1"><img src="images/动物园logo.jpg" width="26" height="24"/>&nbsp;XXXX野生动物园</li></a>
    		<a href="#"><li class="head2">首页</li></a>
    		<a href="#"><li class="head3">园区介绍</li></a>
    		<a href="#"><li class="head4">游园指南</li></a>
    		<a href="#"><li class="head5">互动展示</li></a>
    	</ul>
	</div>
    
   	<video class="video2" src="images/bg.m4v" loop autoplay muted></video>
    
	<div class="video">
		<div align="center"><video width="900" height="500" src="images/panda.mp4" loop autoplay controls></video></div>
	</div>
</div>

<div class="background2">

    <div class="concain1">
    	<div id="fdiv1">
        	<a href="导游图.html"><div class="fdiv11">导游图</div></a>
            <div class="fdiv12">
            	<div class="fdiv121">开放时间</div>
                <div class="fdiv122">门票价格</div>
                <div class="fdiv123">资讯动态</div>
                <div class="fdiv124">联系我们</div>
            </div>
        </div>
        	
        <div id="fdiv2">
        	<div class="fdiv21">
            	<div class="fdiv211"><strong>门票价格</strong><br>成人票-----------------100元<br>儿童票------------------50元<br>60-70周岁老年人-------80元<br>70周岁以上老人---------50元</div>
            </div>
            
            <div class="fdiv22">
            	<div class="fdiv221"><strong>开放时间</strong><br>3月-6月、9月-11月-----9:00-17:00<br>7月-8月------------9:00-20:00<br>10.1-10.8----------7:30-20:00<br>12月到第二年2月--9:00-16:30</div>
            </div>
             
            <div class="fdiv23">
            	<div class="fdiv231"><img src="images/资讯动态.jpg" width="100" height="46"/>
                	<ul>
                    	<li>人类过冬靠“取暖神器”，动物们靠啥呢？</li>
                        <li>动物宝宝们扎堆亮相，究竟谁更会卖萌呢？</li>
                        <li>一组动物们晒太阳的萌照，看完想逛动物园了！</li>
                        <li>先预约，再出游，共享美好时光！</li>
                    </ul>
                </div>
            </div>
            
            <div class="fdiv24">
            	<div class="fdiv241"><strong>联系我们</strong><br>联系电话：18163616106<br>联系微信:15648884<br>联系qq:1351097431</div>
            </div>
        </div>
    </div>
    <div id="sdiv">
		<p><img src="images/bt33.png"/></p>
        <a href="熊猫.html" target="_blank"><div class="sdiv1"></div></a>
        <a href="猩猩.html" target="_blank"><div class="sdiv2"></div></a>
        <a href="白老虎.html" target="_blank"><div class="sdiv3"></div></a>
        <a href="金丝猴.html" target="_blank"><div class="sdiv4"></div></a>
        <a href="大象.html" target="_blank"><div class="sdiv5"></div></a>
        <a href="孟加蜥蜴.html" target="_blank"><div class="sdiv6"></div></a>
	</div>
</div>

<a href="#"><div id="return_top"><img src="images/返回顶部 (2).jpg"/></div></a>
<div id="QQcontract"></div>			
<div id="copy">
	<div class="copy">
    	<div>
        	<p class="copy1"><img src="images/动物园logo.jpg" width="30" height="28"/>XXXX野生动物园</p>
        </div>
        <div class="copy2">&copy;版权归XXXXXXXX所有</div>																																																						    </div>
</div>
</body>
</html>

特殊动物页面结构图。

特色动物页面展示。

由于页面具有重复性且结构类似，在此仅以一个动物的页面进行展示。

实现代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/动物园logo.jpg"/>
<title>熊猫</title>
<link href="link.css" rel="stylesheet"/>
</head>

<body>
<div class="background1">
	<div id="header">
		<p class="p1"><span class="p2">欢迎来到XXXX野生动物园</span>服务热线:<strong class="p3">xxx-xxxxxx</strong></p>
    	<hr color="green" size="1">
    	<ul class="header">
    		<a href="#"><li class="head1"><img src="images/动物园logo.jpg" width="26" height="24"/>&nbsp;XXXX野生动物园</li></a>
    		<a href="暂时最终版.html"><li class="head2">首页</li></a>
    		<a href="#"><li class="head3">园区介绍</li></a>
    		<a href="#"><li class="head4">游园指南</li></a>
    		<a href="#"><li class="head5">互动展示</li></a>
    	</ul>
	</div>
</div>
	
<div id="panda">
	<div class="panda">
    	<h1>熊猫(哺乳类)</h1>
        
        <div class="panda1"><img src="images/大熊猫.jpg"/><br><span class="span">大熊猫</span></div>
        <div class="panda2"><p class="p4">大熊猫（学名：Ailuropoda melanoleuca，英文名称：Giant panda），属于食肉目、熊科、大熊猫亚科和大熊猫属唯一的哺乳动物，体色为黑白两色，它有着圆圆的脸颊，大大的黑眼圈，胖嘟嘟的身体，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。是世界上最可爱的动物之一。</p>

		<p class="p5">大熊猫已在地球上生存了至少800万年，被誉为“活化石”和“中国国宝”，世界自然基金会的形象大使，是世界生物多样性保护的旗舰物种。据第三次全国大熊猫野外种群调查，全世界野生大熊猫不足1600只，属于中国国家一级保护动物。截止2011年10月，全国圈养大熊猫数量为333只。大熊猫最初是吃肉的，经过进化，99%的食物都是竹子了，但牙齿和消化道还保持原样，仍然划分为食肉目。野外大熊猫的寿命为18～20岁，圈养状态下可以超过30岁。
</p>
		<p class="p6">大熊猫是中国特有种，现存的主要栖息地是中国四川、陕西和甘肃的山区。2019年11月12日，2019大熊猫最新数据发布，全球圈养大熊猫数量达600只。</p>
		</div>
        
        
    </div>
</div>

<div id="copy">
	<div class="copy">
    	<div>
        	<p class="copy1"><img src="images/动物园logo.jpg" width="30" height="28"/>XXXX野生动物园</p>
        </div>
        <div class="copy2">&copy;版权归:XXXXXXXXXXXXXXX所有</div>																																																						    </div>
</div>
</body>
</html>

本文只展示野生动物园首页部分代码及效果图，其余三大板块基本相似，在此不一一列举。希望本片文章可以帮助您，望留下宝贵一赞！谢谢！

需源码私信q: one three five one zero nine seven four three one

Small Program

关注

19
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
网页制作课程设计（野生动物园）

本篇文章展示由纯html与css代码实现的野生动物园静态页面网站设计，通过大量html与css语言对页面结构、样式进行实现。希望您仔细认真阅读完后有所启发。一、网页整体搭建该页面网站又首页、园区介绍、游园指南、互动展示四大部分组成，用户可通过点击不同板块进入浏览，野生动物园网站整体层次图如下。二、首页页面2.1 构建基本结构框架图首页页面整体由六大部分组成，菜单栏、视频栏、内容栏（两栏）、版权栏、导航栏，如下图所示。2.2 实...
复制链接

扫一扫