5. 老君山旅游景区网页大学生期末大作业 Web前端网页制作 html+css

一只小小的眠羊

已于 2024-06-04 00:12:09 修改

阅读量595

点赞数 11

分类专栏：大学生期末大作业旅游文章标签：前端课程设计 html css jquery javascript html5

于 2024-06-03 23:58:24 首次发布

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

版权

大学生期末大作业同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

旅游

2 篇文章 0 订阅

订阅专栏

一、网页简介

本实例共包含4个页面，应用html+css，包括Div、菜单栏、文字轮翻等。页面简单，代码精简，为初级的学生水平，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等主流编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页效果

三、代码展示

节选代码示例如下：

1.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="./css/style.css">
       <title>老君山</title>
   </head>
   <body>
       <header class="auto">
           <img src="./images/图标.png" alt="">
           河南老君山名胜景区
       </header>
       <div class="hd auto flex">
           <p>洛阳老君山欢迎您</p>
           <ul class="flex">
               <li style="background-color: #eee;"><a href="index.html">首页</a></li>
               <li><a href="file2.html">奇景一览</a></li>
               <li><a href="file3.html">美文美图</a></li>
               <li><a href="file4.html">关于我们</a></li>
           </ul>
       </div>
       <div class="banner auto">
           <img src="./images/13.jpg" alt="">
       </div>
       <div class="main1 auto flex">
           <div>
               <h2>洛阳老君山风景区介绍</h2>
               <p>老君山风景名胜区位于河南省栾川县城东区，面积2666公顷，是伏牛山世界地质公园、国家AAAAA级旅游景区、国家级自然保护区、省级风景名胜区、省级文物保护单位。
    　老君山古号景室山，因东周道家始祖老子归隐修炼于此而得名；是八百里伏牛山主峰，海拔2217米。老君山形成于十九亿年前的大陆造山运动，造就了其千姿百态、群峰竞秀，拔地通天、气势磅礴的景观；塑造了“华夏绿色心脏，世界地质奇观”的主题形象。</p>
           </div>
           <img src="./images/10.jpg" alt="">
       </div>
       <div class="main1 auto flex">
           <div>
               <h2>地理位置</h2>
               <p>老君山庙宇道观群历史悠久，道教文化源远流长，自北魏建老君庙以来，已成为中原香客朝拜中心，明万历十九年颁赐老君山道经诏谕，封为“天下名山”。已建成灵官殿、淋醋殿、救苦殿、老君庙、道德府等庙宇群落，且文物古迹众多。</p>
           </div>
           <img src="./images/7.jpg" alt="">
       </div>
       <div class="main1 auto flex">
           <div>
               <h2>历史文化</h2>
               <p>老君山集自然景观与道教文化与一身，终以其雄险奇秀的神采成为中华大地的瑰宝。目前已开发建成了八大景区，138个景点，是旅游观光、祭拜朝圣、休闲度假、科考探险、动植物观赏的理想目的地。</p>
           </div>
           <img src="./images/4.jpg" alt="">
       </div>
       <footer class="auto">
           <p>咨询电话：xxx-xxx               邮箱：xxx@126.com</p>
           <p>微信服务号：xxx</p>
       </footer>
   </body>
</html>

...

2.CSS

html{
   font-family: "microsoft yahei,arial, helvetica, sans-serif";
   font-size: 16px;
}
*{
   margin: 0;
   padding: 0;
}
li,ul,ol{
   list-style: none;
}
a{
   text-decoration: none;
   color: #000;
}
.flex{
   display: flex;
}
.auto{
   margin: 0 auto;
}
.clearfix::after{
   content: '';
   display: block;
   clear: both;
}
header{
   width: 1100px;
   height: 80px;
   background-color: #B0C2D8;
   font-size: 40px;
   font-weight: 600;
   letter-spacing: 8px;
}
header img{
   width: 70px;
   height: 70px;
   margin: 5px 14px 0 14px;
   vertical-align: middle;
}
.hd{
   width: 1100px;
   height: 40px;
   margin: 10px auto;
   justify-content: space-between;
}
.hd p{
   width: 300px;
   line-height: 40px;
   font-family: "楷体";
   font-size: 30px;
   color: skyblue;
}
.hd ul{
   width: 460px;
   height: 40px;
   justify-content: space-between;
}
.hd ul li{
   width: 100px;
   height: 40px;
   line-height: 40px;
   text-align: center;
   font-size: 24px;
}
.hd ul li a{
   display: block;
}
.banner,.banner img{
   width: 1100px;
   height: 450px;
}

...

四、要点解析

1.页头引用CCS样式：

2.应用DIV布局,设置菜单栏：

3.插入主图：

4.div布局“地理位置”分栏，设置二级目录及其介绍说明：

html代码

css定义“main1”的样式

5.页脚设置：

6.文字向上轮翻设置：

五、更多推荐

【关注作者|获取更多源码|优质文章】Web前端网页制作、大学生毕业辅导和期末大作辅导、案例模板源码、技术交流，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，3Q！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

一只小小的眠羊

关注

11
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
5. 老君山旅游景区网页大学生期末大作业 Web前端网页制作 html+css

本实例共包含4个页面，应用html+css，包括Div、菜单栏、文字轮翻等。页面简单，代码精简，为初级的学生水平，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等主流编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
复制链接

扫一扫