HTML5期末大作业：旅游网站设计——随行旅游网 HTML+CSS+JavaScript

最新推荐文章于 2024-03-29 10:31:11 发布

@码出未来-web网页设计

最新推荐文章于 2024-03-29 10:31:11 发布

阅读量3.5k

点赞数 6

分类专栏： web课程设计网页规划与设计 Html+Css+JavaScript HTML期末大作业文章标签： css html5 javascript HTML5期末大作业旅游网站设计

本文链接： https://blog.csdn.net/ruan365392777/article/details/119993474

版权

HTML期末大作业同时被 3 个专栏收录

290 篇文章 293 订阅

订阅专栏

Html+Css+JavaScript

195 篇文章 124 订阅

订阅专栏

web课程设计网页规划与设计

172 篇文章 28 订阅

订阅专栏

web课程设计网页规划与设计：旅游网站设计——绿色的随行旅游网站页面模板html源码 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

文章目录

web课程设计网页规划与设计：旅游网站设计——绿色的随行旅游网站页面模板html源码 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业(成品下载)
- >>>戳我>>>点击进入200例期末大作业作品

一、作品演示

二、代码目录

三、代码实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>随行网，随心而行，随意而留</title>
<link rel="shortcut icon" href="bitbug_favicon.ico"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" /> 
</head>
<body>
<div class="header1">
    <div class="header1-in">
        <div class="logo">
            <a href="#"><img src="img/logo.jpg" alt="说行就行，随行" /></a>
        </div>
        <div class="search">
            <div class="search-left">搜索目的地</div>
            <div class="search-center">
            <input type="text" class="tex1" placeholder="邂逅慵懒的小时光" />
            </div>
            <div class="search-right"></div>
        </div>
        <div class="zuce">
            <a href="#">登录|注册</a>&nbsp
            <a href="#">语言（简体中文）</a>
        </div>
    </div>
</div>
<div class="nav">
    <ul class="ul1">
        <li class="level1 cur first"><a class="a1" href="#">首页</a></li>
        <li class="level1"><a  class="a1" href="">目的地</a>
            <ul class="yincang">
                <li><a href="#">境内游</a></li>
                <li><a href="#">境外游</a></li>
                <li><a href="#">周边游</a></li>
                
            </ul>
        </li>
        <li class="level1"><a class="a1" href="#">发现</a>
            <ul class="yincang">
                <li><a href="#">美景</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">美女</a></li>
                
            </ul>
        </li>
        <li class="level1"><a class="a1" href="#">社区</a></li>
        <li class="level1"><a class="a1" href="#">自驾</a>
         
        </li>
        <li class="level1"><a class="a1" href="#">预定</a>
            <ul class="yincang">
                <li><a href="#">酒店</a></li>
                <li><a href="#">机票</a></li>
                <li><a href="#">地接</a></li>
                
            </ul>
        </li>
    </ul>
</div>
<div class="banner">
           
            <ul class="list0">
                <li class="cur"><a href="#"><img src="img/bg-1.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/bg-2.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/bg-3.jpg" alt="" /></a></li>
              
            </ul>
            <div class="fadeCover"></div>
            <ul class="circle">
                <li class="cur">1</li>
                <li>2</li>
                <li>3</li>
             
            </ul>
</div>
<!-- 内容区域 -->
<!-- 分享 -->

<div class="cl"></div>
<div class="hot">
    <div class="new">最新点评
        <span></span>
    </div>
    <div class="main">
        <ul>
            <li class="cur">马尔代夫真的太美了，下次还要再去！</li>
            <li>丽江之美，美及天下</li>
            <li>做一个没有故事的人,与我一起游世界。</li>
            <li>转机的时候还能在新加坡机场免税店购物,</li>

        </ul>
    </div>
<script type="text/javascript" src="js/hot.js"></script>
    <div class="manyidu">满意度：
        <span>100%</span>
    </div>
    <div class="comeon">即刻出发
        <span></span>
    </div>
</div>
<div class="cl"></div>
<div class="tejia">
    <p class="wenzi">
        
            <span class="cur">每日特价</span>
            <span>特价机票</span>
        
    </p>
    <p class="sanjiao"></p>
    <p class="more"><a href="#">更多>></a></p>
</div>
<div class="youhuitu">
    <ul>
        <li><img src="img/te01.jpg" alt="" />
            <div class="youhuitu-in">
            <div class="youhuitu-inl"> 优惠</div>
            <div class="youhuitu-inr">迪拜帆船游超值特惠</div>
            <div class="xiangxi">全国联运-迪拜帆船酒店三天三晚自由行，奢华体验 都套餐选择住帆船，做土豪，享好礼。</div>
			</div>
        </li>
        <li><img src="img/te02.jpg" alt="" />
            <div class="youhuitu-in">
				<div class="youhuitu-inl"> 优惠</div>
				<div class="youhuitu-inr">澳洲三城游超值特惠</div>
				<div class="xiangxi">澳洲三城自由行8/9天，悉尼黄金海岸布尼斯班 豪华酒店南航 广州飞不回头</div>
			</div>
        </li>
        <li><img src="img/te03.jpg" alt="" />
            <div class="youhuitu-in">
            <div class="youhuitu-inl"> 优惠</div>
            <div class="youhuitu-inr">亚德里亚海超值特惠</div>
			<div class="xiangxi">全国联运-亚德里亚自由行，奢华体验 都套餐选，做土豪，享好礼。</div>
			</div>
        </li>
        <li><img src="img/te04.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl"> 优惠</div>
			<div class="youhuitu-inr">美国自由行超值特惠</div>
			<div class="xiangxi">美国自由行西岸10天7晚 自驾游全国出发一价全包含签证 全国联运7晚酒店自驾签证费全包</div>
			</div>
        </li>
    </ul>
    
</div>
<div class="youhuitu">
    <ul>
        <li><img src="img/te05.jpg" alt="" />
            <div class="youhuitu-in">
            <div class="youhuitu-inl"> 优惠</div>
            <div class="youhuitu-inr">迪拜帆船游超值特惠</div>
            <div class="xiangxi">全国联运-迪拜帆船酒店三天三晚自由行，奢华体验 都套餐选择住帆船，做土豪，享好礼。</div>
			</div>
        </li>
        <li><img src="img/te06.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl"> 优惠</div>
			<div class="youhuitu-inr">澳洲三城游超值特惠</div>
			<div class="xiangxi">澳洲三城自由行8/9天，悉尼黄金海岸布尼斯班 豪华酒店南航 广州飞不回头</div>
			</div>
        </li>
        <li><img src="img/te07.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl"> 优惠</div>
			<div class="youhuitu-inr">亚德里亚海超值特惠</div>
			<div class="xiangxi">全国联运-亚德里亚自由行，奢华体验 都套餐选，做土豪，享好礼。</div>
			</div>
        </li>
        <li><img src="img/te08.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl"> 优惠</div>
			<div class="youhuitu-inr">美国自由行超值特惠</div>
			<div class="xiangxi">美国自由行西岸10天7晚 自驾游全国出发一价全包含签证 全国联运7晚酒店自驾签证费全包</div>
			</div>
        </li>
    </ul>
    
</div>
<div class="yaotiao">
        <img src="img/yaotiao.jpg" alt="" />
</div>
<div class="pinpai">
    <p class="wenzi">
        品牌目的地    
    </p>
    <p class="more"><a href="#">更多>></a></p>
</div>
<div class="pinpai_in">
    <div class="pinpai_inl">
        <img src="img/pinpai_left.png" alt="" />
        <div class="pinpai_inlin">
        </div>
        <span class="pinpai_inl_span1">马尔代夫超值连线游</span>
        <span class="pinpai_inl_span2">让你一次游个够，心动不如行动吧！</span>
    </div>
    <div class="pinpai_inr">
        <ul>
            <li class="cur"><img src="img/fuzhou.jpg" alt="" />
                <span ></span>  
                <p>福州</p>     
            </li>
            <li><img src="img/libo.jpg" alt="" />
                <span></span>
                <p>荔波</p>
            </li>
            <li><img src="img/malai.jpg" alt="" />
                <span></span>
                <p>马来西亚</p>
            </li>
            <li><img src="img/rongshui.jpg" alt="" />
                <span></span>
                <p>融水</p>
            </li>
            <li><img src="img/shannan.jpg" alt="" />
                <span></span>
                <p>山南</p>
            </li>
            <li><img src="img/shilin.jpg" alt="" />
                <span></span>
                <p>石林</p>
            </li>
            <li><img src="img/shanqiu.jpg" alt="" />
                <span></span>
                <p>山丘</p>
            </li>
            <li><img src="img/xian.jpg" alt="" />
                <span></span>
                <p>西安</p>
            </li>
        </ul>
    </div>


</div>
<div class="pinpai">
    <p class="wenzi">
        出境游    
    </p>
    <p class="more"><a href="#">更多>></a></p>
</div>
<div class="chujingyou">
    <div class="chujingyou-l">
        <ul>
            <li class="li11 tututu">
                <img src="img/11.jpg" alt=""  class="img11" />
                <span>怦然心动·吉之岛</span>
                <div class="heibu1 heibu">心动吉之岛</div>
            </li>
            <li class="tututu">
                <img src="img/12.jpg" alt="" />
                <span>第一缕阳光·斐然</span>
                <div class="heibu">第一缕阳光</div>
            </li>
            <li class="tututu">
                <img src="img/13.jpg" alt="" />
                <span>马尔代夫·度蜜月</span>
                <div class="heibu">度蜜月</div>
            </li>
            <li class="li21 tututu">
                <img src="img/21.jpg" alt=""  class="img21" />
                <span>欧冠·巴塞罗那 </span>
                <div class="heibu2 heibu">巴塞罗那 </div>
            </li>
            <li class="tututu">
                <img src="img/22.jpg" alt="" />
                <span>恋爱国度·巴黎</span>
                <div class="heibu">恋爱国度</div>
            </li>
            <li class="tututu">
                <img src="img/23.jpg" alt="" />
                <span> 执子之手·希腊</span>
                <div class="heibu">执手希腊</div>
            </li>
        </ul>
    </div>

    <div class="chujingyou-r">
            <span></span>
            <img src="img/cheshow.jpg" alt="" />
            <div class="show">
                <ul>
                    <li><a href="#">【游记】致青春之旅 锡勒草原</a></li>
                    <li><a href="#">【游记】自驾重庆武隆风景区</a></li>
                    <li><a href="#">【游记】无止境之征探索未历之美</a></li>
                    <li><a href="#">【游记】骏雅新派逛古都</a></li>
                    <li><a href="#">【游记】奥迪2015国际露营大会</a></li>
                  
                </ul>
            </div>
        
    </div>
</div>
<div class="footer">
    <div class="navfoot">
   <ul>
       <li><a href="#">关于我们</a></li>
       <li><a href="#">营销服务</a></li>
       <li><a href="#">商家服务</a></li>
       <li><a href="#">新手上路</a></li>
       <li><a href="#">合作伙伴</a></li>
       <li><a href="#">关注我们</a></li>
   </ul>
   </div>
    <div class="share">
        <span class="s1"></span>
        <span class="s2"></span>
        <span class="s3"></span>
        <span class="s4"></span>
    </div>
    <div class="cl"></div>
    <p>版权所有&copy;2015 FREE TRAVEL北京随行网有限公司</p>
    <p>京ICP备11011333号 京公网安备110105007294</p>
</div>
<!-- topback -->

</body>
</html>

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可wx公Z号 ---> web前端小日记 获取更多源码 !

六、更多HTML期末大作业(成品下载)

>>>戳我>>>点击进入200例期末大作业作品

200多例 HTML5期末考核大作业源码 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!