292.大学生HTML期末大作业 —【旅游季旅游中国网页】 Web前端网页制作 html+css+js
目录
5000+网页案例完整代码，主题涵盖30+种类型:
二、网页简介
本实例应用html+css+js： 菜单栏、三级页面、图片轮翻效果、视频、注册页面、登录页面等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
三、网页文件
本网页实例共包含11个页面：
四、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
五、代码展示
1.html
<html>
<head>
<meta charset="UTF-8">
<title>旅游中国</title>
<link href="css/style.css" rel="stylesheet" media="all" type="text/css">
<script src="js/lunbo.js" type="text/javascript"></script>
</head>
<body>
<div class="head"><img src="images/logo.png" width="240"></div>
<div class="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="ziyouxing.html">自由行</a></li>
<li><a href="gentuanyou.html">跟团游</a></li>
<li><a href="zixun.html">新闻资讯</a></li>
<li><a href="fengguang.html">图片风光</a></li>
<li><a href="shipin.html">精彩视频</a></li>
<li><a href="denglu.html">会员登录</a></li>
<li><a href="zhuce.html">会员注册</a></li>
</ul>
</div>
<div class="banner2" id="banner">
<ul id="b_pic">
<li style="display: block;"><img src="images/banner1.jpg" alt=""></li>
<li><img src="images/banner2.jpg" alt=""></li>
<li><img src="images/banner3.jpg" alt=""></li>
</ul>
<ul id="b_an">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="main">
<div class="fls" >
<h2 class="bar">自由行</h2>
<ul>
<li><img src="images/1.jpg" width="100%">
<p>四川成都+稻城亚丁+理塘+珍珠海+新都桥7日6晚私家团·越野自驾·</p>
</li>
<li><img src="images/2.jpg" width="100%">
<p>可选专车接送站/一日游/包车|穿越时光·遇见长安|停留天数随心定·旅行说走就走</p>
</li>
<li><img src="images/3.jpg" width="100%">
<p>住1晚市区+1晚黄山山顶+1晚宏村 · 严选包车游</p>
</li>
</ul>
</div>
<div class="mls">
<h2 class="bar">推荐线路</h2>
<ul class="txtlist">
<li> <a href="zyinfo.html"><img src="images/b1.jpg" width="140"></a>
<div> <a href="zyinfo.html">阿坝3日2晚跟团游·纯玩丨九寨沟+黄龙【熊猫乐园/都江堰任选其一】（可升级头等舱/熊猫主题食宿/千古情晚会/三钻-五钻多档住宿·供君选择）赠价值150元藏家晚会（酥油茶、青稞酒、土火锅）+含去程动车费用+三环内包接~</a>
<p></p>
</div>
</li>
<li> <a href="gtyinfo.html"><img src="images/b2.jpg" width="140"></a>
<div> <a href="gtyinfo.html">九寨沟+成都3日2晚跟团游·3晚+去程动车票| 真纯玩0购物0自费4钻｜小团/旅拍/熊猫主题｜A线熊猫乐园/B线都江堰/C线峨眉乐山/D线达古冰川/E线四姑娘山/F线若尔盖草原，赠送百元川秀/升级/玩法任选|三环包接~</a>
<p></p>
</div>
</li>
<li> <a href="zyinfo.html"><img src="images/b3.jpg" width="140"></a>
<div> <a href="zyinfo.html">成都+九寨沟+黄龙风景名胜区4日3晚跟团游·全程入住优选4钻酒店+成都首尾自由活动+有限的时间只与美景相遇+高端真纯玩精选行程无猫腻+24小时免费接送机站让你的假期出行无忧+可选升级保姆车2+1座椅</a>
<p></p>
</div>
</li>
<li> <a href="gtyinfo.html"><img src="images/b4.jpg" width="140"></a>
<div> <a href="gtyinfo.html">海南海口+三亚蜈支洲岛5日4晚跟团游·亲子出游升级海口五星*三亚连住海边不挪窝+蜈支洲岛畅游+浪漫雨林天堂公园+南山+打卡网红亚特兰蒂斯水世界+扬帆出海【爸妈·蜜月·亲子·闺蜜出游必选】24H在线管家服务~~</a>
<p></p>
</div>
</li>
<li> <a href="zyinfo.html"><img src="images/b5.jpg" width="140"></a>
<div> <a href="zyinfo.html">三亚+蜈支洲岛+亚龙湾5日4晚跟团游·【五•一特惠 高端出游行程】赠送好莱坞车技表演 0购物纯玩 单/双飞可选 全程五星度假酒店 4大5A热门景点 海南美食盛宴升级海鲜大餐+养生素斋 本土导游跟随讲解</a>
<p></p>
</div>
</li>
</ul>
</div>
<div class="rls" >
<h2 class="bar">跟团游</h2>
<ul>
<li><img src="images/c1.jpg" width="100%">
<p>贵州黄果树+梵净山+镇远+西江千户苗寨+荔波7...</p>
</li>
<li><img src="images/c2.png" width="100%">
<p>海南三亚+蜈支洲岛6日5晚跟团游(5钻)·限时特惠...</p>
</li>
<li><img src="images/c3.jpg" width="100%">
<p>成都+稻城亚丁4日3晚跟团游·稻城出发 【纯玩无购物...</p>
</li>
</ul>
</div>
<div style="clear:both"></div>
<h2 class="bar">风光图片</h2>
<ul class="imglist">
<li><img src="images/f1.jpg"></li>
<li><img src="images/f2.jpg"></li>
<li><img src="images/f3.jpg"></li>
<li><img src="images/f4.jpg"></li>
</ul>
<div style="clear:both"></div>
</div>
<div class="end">旅游网</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
/* CSS Document */
body{width:1200px; background-color:#fff; line-height:24px; font-size:13px; margin:0px auto; background:#C2E7FC}
.main{padding:20px; background:#FFFFFF}
.fls{float:left; width:220px; margin-right:30px; }
.mls{float:left; width:640px; margin-left:20px; }
.rls{float:right; width:200px; }
a{ text-decoration:none;}
ul,li{list-style:none; margin:0; padding:0;}
.nav{ height:50px; background:#0066CC}
.nav li{ display:inline-block; line-height:50px }
.nav li a{color:#fff; font-size:18px; padding:10px 40px}
.end{ background:#0066CC; color:#fff; padding:11px 0; text-align:center}
.c li{ box-shadow:0px 0px 15px #888888;margin-top:30px; height:350px; width:30%; margin:1.666%; float:left;}
.c li img{ max-width:100%; height:200px}
.c li p{ padding:0 20px}
.c a{ color:#000; font-size:16px;}
.clear{ clear:both}
.dl2{ margin:0 auto; font-size:16px; background:url(../images/login.jpg) no-repeat; background-size:cover; padding:120px}
...
3.JS
代码如下（节选示例）：
window.οnlοad=function(){
//第一个幻灯
var pic_lis=document.getElementById('b_pic').getElementsByTagName('li');
var an_lis=document.getElementById('b_an').getElementsByTagName('li');
an_lis[0].style.background='#31b3a8';
var c=0;
function h_slide(){
c++;
if(c==pic_lis.length){c=0;}
for(var i=0; i<pic_lis.length; i++){
pic_lis[i].style.display='none';
an_lis[i].style.background='#fff';
}
pic_lis[c].style.display='block';
an_lis[c].style.background='#31b3a8';
}
var timer=setInterval(h_slide,4000);
for(var j=0; j<pic_lis.length; j++){
an_lis[j].index=j;
an_lis[j].οnmοuseοver=function(){
index=this.index;
clearInterval(timer);
for(var k=0; k<an_lis.length; k++){
pic_lis[k].style.display='none';
an_lis[k].style.background='#fff';
}
pic_lis[index].style.display='block';
an_lis[index].style.background='#31b3a8';
}
an_lis[j].οnmοuseοut=function(){
timer=setInterval(h_slide,4000);
}
}
}
...
六、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
558
暂无认证
到【灌水乐园】发言
