web前端大作业-酷炫响应式风景旅游网页设计（国庆旅游主题-HTML+CSS+JavaScript）【源码分享】
站长
· 阅读数 19
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的酷炫漂亮响应式风景旅游网页设计制作，画面精明，非常适合初学者学习使用。
视频演示： 响应式旅游网页设计.mp4
网页实现截图：
网站首页
关于我们
途牛旅游网创立于2006年10月，以“让旅游更简单”为使命，为消费者提供由北京、xx、广州、深圳等180个城市出发的旅游产品预订服务，产品全面，价格透明，全年365天24小时400电话预订，并提供丰富的后续服务和保障。目前，途牛旅游网提供100万余种旅游产品供消费者选择，涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等，已成功服务累计超过1500万人次出游。同时基于途牛旅游网全球中文景点目录以及中文旅游社区，可以更好地帮助游客了解目的地信息，妥善制定好出游计划，并方便地预订旅程中的服务项目。
主题旅游
<p class="tt3">香港2日半自助游</p>
<p class="tt4">特色：港式早茶 线路编号:HK01
<br> 销量：1348484 满意度：100% 推荐：五星<br>
行程：2日半自助游 出团日期：2017-2-6</p>
<p class="tt5"><em>原价：499</em><span><i>348</i>起/人</span></p>
热门目的地
新闻资讯
舒适酒店
联系我们
项目组织结构：
主要源码展示：
index.html、
<!DOCTYPE html>
<html lang="en">
<head>
<title>主题旅游_响应式旅游旅行社类网页设计</title>
<body data-spy="scroll">
<div id="wrap_index">
<!-- 侧边导航 -->
<div class="class page-prev visible-xs visible-sm">
<div class="close"></div>
<div class="class-top">
<form name="formsearch" action="/plus/search.php">
<input type="hidden" name="kwtype" value="0">
<input type="text" class="txt1" name="q" value="请输入关键字">
<input type="submit" class="btn1" value="">
</form>
</div>
<div class="class-m">
<ul class="nnav">
<li><a href="../../../13097.html" class="ce">网站首页</a></li>
<li class="menu_head"> <a href="../guanyuwomen/Index.html" class="ce">关于我们</a>
<ul class="menu_body">
</ul>
</li>
<li class="menu_head">
<dl class="ericon">
<span class="icon1"></span><span class="icon2"></span>
</dl>
<a href="" class="ce">主题旅游</a>
<ul class="menu_body">
<li><a href="guonayou/Index.html" class="er">国内游</a></li>
<li><a href="chujingyou/Index.html" class="er">出境游</a></li>
</ul>
</li>
<li class="menu_head">
<dl class="ericon">
<span class="icon1"></span><span class="icon2"></span>
</dl>
<a href="../remenmudedi/Index.html" class="ce">热门目的地</a>
<ul class="menu_body">
<li><a href="../remenmudedi/yunnan/Index.html" class="er">云南</a></li>
</ul>
</li>
<li class="menu_head"> <a href="../xinwenzixun/Index.html" class="ce">新闻资讯</a>
<ul class="menu_body">
</ul>
</li>
<li class="menu_head">
<dl class="ericon">
<span class="icon1"></span><span class="icon2"></span>
</dl>
<a href="../shushijiudian/Index.html" class="ce">舒适酒店</a>
<ul class="menu_body">
<li><a href="../shushijiudian/shuangrenjian/Index.html" class="er">双人间</a></li>
<li><a href="../shushijiudian/danrenjian/Index.html" class="er">单人间</a></li>
<li><a href="../shushijiudian/zongtongtaofang/Index.html" class="er">总统套房</a></li>
</ul>
</li>
<li class="menu_head"> <a href="../lianxiwomen/Index.html" class="ce">联系我们</a>
<ul class="menu_body">
</ul>
</li>
</ul>
</div>
</div>
<div class="opacity2"></div>
<div id="header" class="head visible-lg visible-md">
<div class="container-fluid">
<div class="logo wow fadeInLeft col-md-3"><a href="../../../13097.html"><img src="../../../static/picture/logo.png"></a></div>
<div class="col-md-9" style="height: 56px;">
<div class="search col-md-3 wow fadeInRight" style="float: right;">
<form name="formsearch" action="/plus/search.php">
<input type="hidden" name="kwtype" value="0">
<input class="txt1" type="text" name="q" placeholder="请输入关键字">
<input class="btn1" type="submit" value="">
</form>
</div>
<div class="col-md-9 nav wow fadeInDown navbar-nav nav_box" style="float: right; text-align: right;">
<div class="yiji current"><a href="../../../13097.html">首页</a></div>
<div class="yiji"><a href="../guanyuwomen/Index.html"><em>关于我们</em></a>
<div style="display:none">
</div>
</div>
<div class="yiji"><a href=""><em>主题旅游</em></a>
<div class="libox">
<a href="guonayou/Index.html"><em>国内游</em></a> <a href="chujingyou/Index.html"><em>出境游</em></a> </div>
</div>
<div class="yiji"><a href="../remenmudedi/Index.html"><em>热门目的地</em></a>
<div class="libox">
<a href="../remenmudedi/yunnan/Index.html"><em>云南</em></a> <a href="../remenmudedi/sichuan/Index.html"><em>四川</em></a> <a href="../remenmudedi/fujian/Index.html"><em>福建</em></a> </div>
</div>
<div class="yiji"><a href="../xinwenzixun/Index.html"><em>新闻资讯</em></a>
<div style="display:none">
</div>
</div>
<div class="yiji"><a href="../shushijiudian/Index.html"><em>舒适酒店</em></a>
<div class="libox">
<a href="../shushijiudian/shuangrenjian/Index.html"><em>双人间</em></a> <a href="../shushijiudian/danrenjian/Index.html"><em>单人间</em></a> <a href="../shushijiudian/zongtongtaofang/Index.html"><em>总统套房</em></a> </div>
</div>
<div class="yiji"><a href="../lianxiwomen/Index.html"><em>联系我们</em></a>
<div style="display:none">
</div>
</div>
</div>
</div>
</div>
</html>
style.css
img {
max-width: 100%;
outline: none;
}
.vcenter {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
display: block;
vertical-align: middle;
margin: auto;
}
.tHide {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-appearance: none;
}
textarea {
-webkit-appearance: none;
}
.blockFull {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.relative {
position: relative;
}
a:hover {
color: #8c673e;
text-decoration: none;
}
* {
transition: All 0.2s ease-in-out;
-webkit-transition: All 0.2s ease-in-out;
-moz-transition: All 0.2s ease-in-out;
-o-transition: All 0.2s ease-in-out;
}
.left {
float: left;
}
备注：部分作品来自于网络收集、侵权立删
大家点赞、收藏、关注、评论啦 、 打卡 文章 更新 102/ 365天
转载自:https://juejin.cn/post/7030289809046241294