该网页是一个使用HTML、CSS和JavaScript技术制作的关于西安旅游的网站，主要内容包括对西安的介绍、名胜古迹展示、旅游攻略提示以及联系信息和美食推荐。网站设计包含了导航栏、景点描述、图片展示和用户订阅功能，旨在为游客提供西安的旅游信息和服务。
-
主页效果
结合HTML\CSS\JavaScript制作西安旅游题材的网站；
如下，为网站代码（首页）：
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>首页</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link href="css/public.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="warp">
<div class="header">
<main>
<div class="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="mudidi.html">目的地</a></li>
<li><a href="lyal.html">旅行案例</a></li>
<li><a href="gywm.html">西安文旅</a></li>
<li><a href="xinwen.html">新闻播报</a></li>
<li><a href="lxwm.html">联系我们</a></li>
</ul>
</div>
<div class="sdd">
<h2>大唐不夜城--西安</h2>
<p>西安是中国历史上建都朝代最多，影响力最大的都城。在《史记》中被誉为“金城千里，天府之国”。西安的景点多为历史古迹，市区内的古城墙、大雁塔、钟（鼓）楼都是不能错过的。</p>
<p class="lvx">一起来探索西安</p>
</div>
</main>
</div>
<main>
<div class="box1">
<ul>
<li><img src="images/wz.png"><p>去哪里游玩？</p></li>
<li><img src="images/wz.png"><p>何时出发？</p></li>
<li><img src="images/wz.png"><p>我们的的旅行足迹</p></li>
<li><p>查看攻略</p></li>
</ul>
</div>
<div class="box2">
<h2>西安的名胜古迹</h2>
<p class="nr">西安，古称长安、镐京，是陕西省省会、副省级市、关中平原城市群核心城市、中国西部地区重要的国家中心城市，国家重要的科研、教育、工业基地。西安是中国四大古都之一，联合国科教文组织1981年确定的“世界历史名城”，美媒评选的世界十大古都之一。<br>中华文明和中华民族重要发祥地，丝绸之路起点。</p>
<div class="ulda">
<ul>
<img src="images/index1.jpg">
<li class="nr1">
<span>古丝绸之路的起点</span>
<p>大唐芙蓉园</p>
</li>
<li class="nr2">
<p>胡同学作</p>
</li>
<li class="nr3">
<p>古丝绸之路，简称“丝路”，是指西汉（前202年—8年）时期，由张骞出使西域开辟的以长安（今西安）为起点，经甘肃、新疆，到中亚、西亚，并联结地中海各国的陆上通道。张骞两次通西域，开辟了中外交流的新纪元，并成功将东西方之间最后的“珠帘”掀开。</p>
</li>
<li class="red">
<img src="images/5.png">
<p>西安，古称“长安”，取久远的祥和安定之意</p>
</li>
</ul>
<ul>
<img src="images/index2.jpg">
<li class="nr1">
<span>是陕西最早创建的博物馆，主要收藏历代碑刻、墓志和石刻为主。</span>
<p>书院门</p>
</li>
<li class="nr2">
<p>胡同学作</p>
</li>
<li class="nr3">
<p>“书院门”是西安碑林博物馆到关中书院门口的一条步行街，细心淘还是能淘到不少有趣的东西。喜欢字画、古玩的朋友一定不要错过“书院门”。全国四大著名书院之一。西北四大书院之冠。</p>
</li>
<li class="red">
<img src="images/5.png">
<p>是西安碑林博物馆到关中书院门口的一条步行街。</p>
</li>
</ul>
<ul>
<img src="images/index3.jpg">
<li class="nr1">
<span>西安地标——大雁塔</span>
<p>大雁塔</p>
</li>
<li class="nr2">
<p>胡同学作</p>
</li>
<li class="nr3">
<p>大雁塔是国家5A级旅游景区，位于大慈恩寺内，是现存最早、规模最大的四方阁楼式砖塔。大雁塔的广场很美，两旁鲜花锦簇，中央是大型的音乐喷泉，颇为壮观。</p>
</li>
<li class="red">
<img src="images/5.png">
<p>持续半小时的音乐喷泉，现代技术与古代建筑相得益彰。</p>
</li>
</ul>
</div>
</div>
</main>
<div class="box3">
<main>
<p>名胜景点</p>
<ul>
<li>兵马俑</li>
<li>大雁塔</li>
<li>华清宫</li>
<li>芙蓉园</li>
<li>大明宫</li>
<li>科研院所</li>
</ul>
</main>
</div>
<main>
<div class="box4">
<ul>
<li><p>欢迎订阅西安旅游时报</p>Subscribe to Xi'an travel events</li>
<li><input name="" type="text" placeholder="请输入您的联系方式"></li>
<li><input type="submit" value="立即提交"></li>
</ul>
</div>
<div class="box5">
<div class="left">
<h2>西安美食</h2>
<P>讲到西安，总是绕不开美食这个话题，而西安美食，总会给人一种粗犷的、接地气的印象。作为十三朝古都和古丝绸之路的起点，西安的历史之深厚自然不用多说，但凡历史悠久的城市，也一定藏着最独一无二的美食渊源！</P>
<ul>
<li>
<img src="images/6.jpg">
<p>羊肉泡馍</p>
</li>
<li>
<img src="images/6.jpg">
<p>潼关肉夹馍</p>
</li>
<li>
<img src="images/6.jpg">
<p>刘峰糊辣汤——腊牛肉</p>
</li>
<li>
<img src="images/6.jpg">
<p>陕西凉皮</p>
</li>
<li>
<img src="images/6.jpg">
<p>臊子面</p>
</li>
<li>
<img src="images/6.jpg">
<p>西安桂花糕</p>
</li>
</ul>
<ul>
<li>
<img src="images/7.jpg">
<p>运动单车之旅</p>
</li>
<li>
<img src="images/7.jpg">
<p>运动单车之旅</p>
</li>
<li>
<img src="images/7.jpg">
<p>运动单车之旅</p>
</li>
<li>
<img src="images/7.jpg">
<p>运动单车之旅</p>
</li>
<li>
<img src="images/7.jpg">
<p>运动单车之旅</p>
</li>
<li>
<img src="images/7.jpg">
<p>运动单车之旅</p>
</li>
</ul>
</div>
<div class="right fl">
<ul>
<li><p>西安之窗</p></li>
<li><p>中国立方体历史博物馆</p></li>
<li><img src="images/宣传3.jpg"></li>
<li><p>西安的文物古迹不仅丰富独特，而且具有系统性和完整性，堪称中国历史的缩影，其数量之多、密度之大、等级之高均居全国之首。现已查明的文物古迹有上万处，已出土文物12万余件，许多是稀世珍宝；有重点保护文物258处，其中国家级20处，省级68处。半坡氏族社会遗址、秦始皇兵马俑、大雁塔、华清池、碑林、明城墙等都有很高的游览和研究价值，享誉海内外。</p></li>
<!-- <li><img src="images/tx.png"></li> -->
<li><p>胡一鑫 郝辉森</p></li>
<li></li>
</ul>
</div>
</div>
</main>
<footer>
<div class="foot">
<div class="foot1">
<ul>
<li>欢迎来到西安旅游网</li>
<li>十三朝古都的有趣故事</li>
<li>古代丝绸之路的起点,内陆大城市</li>
<li>秦之故都,唐之圣地</li>
<li>创作者:胡一鑫 郝辉森</li>
</ul>
</div>
<div class="foot2">
<p>西安旅游</p>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="mudidi.html">目的地</a></li>
<li><a href="lyal.html">旅游景点</a></li>
<li><a href="gywm.html">关于我们</a></li>
<li><a href="xinwen.html">新闻播报</a></li>
<li><a href="lxwm.html">联系我们</a></li>
</ul>
</div>
<div class="foot3">
<p>西安交通大学985 211</p>
<ul>
<li><img src="./images/school1.jpg" alt=""></li>
<li><img src="./images/school1.jpg" alt=""></li>
<li><img src="./images/school1.jpg" alt=""></li>
<li><img src="./images/school1.jpg" alt=""></li>
<li><img src="./images/school1.jpg" alt=""></li>
<li><img src="./images/school1.jpg" alt=""></li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>-
如需其他页面，请私信留言
扫一扫
1131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
