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

⽹页制作课程设计（野⽣动物园） 本篇⽂章展⽰由纯html与css代码实现的野⽣动物园静态页⾯⽹站设计，通过⼤量html与css语⾔对页⾯结构、样式进⾏实现。希望您 仔细认真阅读完后有所启发。 ⼀、⽹页整体搭建 该页⾯⽹站⼜⾸页、园区介绍、游园指南、互动展⽰四⼤部分组成，⽤户可通过点击不同板块进⼊浏览，野⽣动物园⽹站整体层次图 如下。 ⼆、⾸页页⾯ 2.1 构建基本结构框架图 ⾸页页⾯整体由六⼤部分组成，菜单栏、视频栏、内容栏（两栏）、版权栏、导航栏，如下图所⽰。 2.2 实现效果及实现代码 整体背景为动态图，使⽤video标签以及css样式修饰，在此不进⾏演⽰。菜单栏部分固定在页⾯顶部，不随页⾯滑动⽽滑动。导航栏 部分随页⾯滚动⽽滚动，效果图如下。 导游图页⾯展⽰。 实现代码。 !doctype html html headheadhead 动物园动物园 titleXXXX动物园/title/title /head bodybodybodybody 欢迎来到XXXX野⽣动物园/span服务热线服务热线服务热线服务热线服务热线 动物园动物园 野⽣动物园/li/a/li/a ⾸页/li/a/li/a 园区介绍/li/a/li/a 游园指南/li/a/li/a 互动展⽰/li/a /ul /div /div /div/div/div/div/div 导游图导游图 导游图/div/a 特⾊动物页⾯展⽰。 由于页⾯具有重复性且结构类似，在此仅以⼀个动物的页⾯进⾏展⽰。 实现代码。 !doctype html html headheadhead 动物园动物园 title熊猫/title/title /head bodybodybodybody 欢迎来到XXXX野⽣动物园/span服务热线服务热线服务热线服务热线服务热线 动物园动物园 野⽣动物园/li/a/li/a 暂时最终版暂时最终版 ⾸页/li/a/li/a 园区介绍/li/a/li/a 游园指南/