446.少林寺旅游主题网页大学生期末大作业 Web前端网页制作 html+css

最新推荐文章于 2024-11-27 19:21:10 发布

原创最新推荐文章于 2024-11-27 19:21:10 发布 · 1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #html5 #javascript #css #jquery #正则表达式

Web网页设计实例同时被 2 个专栏收录

826 篇文章

订阅专栏

旅游

99 篇文章

订阅专栏

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css，div+css布局，代码精简，适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含5个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>

<body>
<div class="head">
<div class="ban"><img src="images/ban.jpg" width="1000" height="500" border="0"></div>
<div class="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="zhuti.html">主体建筑</a></li>
<li><a href="wenwu.html">文物遗存</a></li>
<li><a href="lisji.html">历史文化</a></li>
<li><a href="lvyou.html">旅游指南</a></li>
</ul>
</div>
<div class="xia">
<h2>少林寺</h2>
<div class="zi">
<img src="images/t.jpg" width="268" height="310" align="right" style=" margin-left:20px;">
<Br>
<p>少林寺，位于河南省郑州市登封市嵩山五乳峰下，因坐落于嵩山腹地少室山茂密丛林之中，故名“少林寺”。是中国佛教禅宗祖庭和中国功夫的发源地之一，世界文化遗产、全国重点文物保护单位、国家AAAAA级旅游景区。</p>
<p>少林寺始建于北魏太和十九年（495年），是孝文帝为了安置他所敬仰的印度高僧跋陀尊者，在与都城洛阳相望的嵩山少室山北麓敕建而成。少林寺常住院占地面积约57600平方米，现任方丈是曹洞正宗第47世、第33代嗣祖沙门释永信。少林寺是世界著名的佛教寺院，是汉传佛教的禅宗祖庭，在中国佛教史上占有重要地位，被誉为“天下第一名刹”。因其历代少林武僧潜心研创和不断发展的少林功夫而名扬天下，素有“天下功夫出少林，少林功夫甲天下”之说。</p>
<p>2010年8月，包括少林寺常住院、初祖庵、塔林在内的天地之中历史建筑群被联合国科教文组织列为世界文化遗产。</p>
<p></p>
</div><div class="clearit"></div>


<h2>布局结构</h2>

<div class="zi">
<img src="images/t1.jpg" align="right" style=" margin-left:20px;">
<Br>
<p>少林寺常住院建筑在河南登封少溪河北岸，从山门到千佛殿，共七进院落，总面积约57600平方米。主要包括常住院、塔林和初祖庵等。常住院的建筑沿中轴线自南向北依次是山门、天王殿、大雄宝殿、藏经阁（法堂）、方丈院、立雪亭、千佛殿。另外，寺西有塔林，北有初祖庵、达摩洞、甘露台，西南有二祖庵，东北有广慧庵。</p>
<p>寺周还有同光禅师塔、法如禅师塔和法华禅师塔等古塔10余座。</p>
</div><div class="clearit"></div>

</div>

<div class="foot">少林寺</div>
</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

body, html, div, blockquote, img, label, p, h1, h2, h3, ul,
li, form, a
{margin: 0; padding: 0; border: 0; outline: none;}
body { font-family: "微软雅黑";font-size: 14px;color: #000;line-height: 20px;text-align:left;}

a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}

ul,li{list-style-type:none;}
.clearit{clear:both;}

.head {width:1000px; margin:0 auto; }
.ban {width:1000px; height:500px;}
.nav { width:1000px; height:50px; background:#20140e }
.nav ul li {width:200px; float:left; text-align:center; line-height:50px;}
.nav ul li a { color:#FFF; font-size:16px; width:200px;height:50px; display:block }
.nav ul li A:hover { background: #4f3423;}
.xia h2 { width:1000px; height:35px; border-bottom:1px solid #333; line-height:35px; margin-top:30px;}
.zi { margin-top:20px;}
.zi p { line-height:30px; text-indent:2em;}
.foot { width:1000px; height:60px; background:#20140e;text-align:center; line-height:60px; font-size:16px; margin-top:25px; color:#FFF }
.tu img { margin-top:20px; margin-left:20px;}

...