H5静态网页设计与制作_川西旅游网设计作品（HTML+CSS+jQuery）
2024-04-08 05:42:49
【导语】大学生网页作业旅游网一共5种不同页面样式，川西旅游题材并采用flex布局方式，内置轮播、选项卡切换、css动效、缩略图移入放大等多种特效。不仅如此，还有网页截图展示，源码在线下载，在线解答常见问题多种干货大学生网页作业等你来下。
一、文章目录
- 作品介绍
- 作品截图
- 代码实现
- 获取源码
- 常见问答
- 更多干货
二、作品介绍
- 题目：大学生网页作业旅游网
- 题材：川西旅游
- 布局方式：flex布局，浮动布局
- 特效：轮播、选项卡切换、css动效、缩略图移入放大
- 主要技术：flex弹性盒布局，float浮动布局，swiper、superslide插件
- 编辑器：vscode（Chinese、Easy LESS、Live Server）
二、作品截图
- 首页
2. 列表页
3. 内容页
三、代码实现
代码目录
- index.html
- list.html
- show.html
HTML首页部分
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>xx旅游网</title><link rel="stylesheet" href="./css/swiper-bundle.min.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css"> </head><body><!-- 头部 --><header><div class="head-top"><div class="w"><p>欢迎来到xx旅游网</p><form action="" method="get"><input type="text" placeholder="请输入热门景点"><button type="button"><img src="./images/search.png" alt=""></button></form></div></div><div class="head-con w"><div class="logo"><a href="/"><img src="./images/logo.png" alt=""></a></div><nav><ul class="nav-box"><li><a href="">首页</a></li><li><a href="">热门景点</a></li><li><a href="">旅游攻略</a></li><li><a href="">打卡瞬间</a></li></ul></nav></div></header><!-- 内容 --><section><div class="swiper"><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><div class="w"><img src="./images/1.jpg" alt=""><a class="more" href="">点击了解详情</a></div></div><div class="swiper-slide"><div class="w"><img src="./images/2.jpg" alt=""><a class="more" href="">点击了解详情</a></div></div><div class="swiper-slide"><div class="w"><img src="./images/3.jpg" alt=""><a class="more" href="">点击了解详情</a></div></div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div></div><div class="tabbox w"><div class="hd"><ul><li class="on"><img src="./images/tab-ico1.svg" alt=""> <img src="./images/tab-1.svg" alt=""> 热门景点</li><li><img src="./images/tab-ico1.svg" alt=""> <img src="./images/tab-1.svg" alt=""> 打卡必去</li><li><img src="./images/tab-ico1.svg" alt=""> <img src="./images/tab-1.svg" alt=""> 精彩瞬间</li></ul></div><div class="bd"><ul class="clear"><li><a href=""><img src="./images/c1.jpg" alt=""><div class="text-box"><h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3><p class="text-hid"><span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。</p></div></a></li><li><a href=""><img src="./images/c2.jpg" alt=""><div class="text-box"><h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3><p class="text-hid"><span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。</p></div></a></li><li><a href=""><img src="./images/c3.jpg" alt=""><div class="text-box"><h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3><p class="text-hid"><span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。</p></div></a></li><a href="" class="more">查看更多</a></ul><ul class="clear"><li><a href=""><img src="./images/c4.jpg" alt=""><div class="text-box"><h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3><p class="text-hid"><span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。</p></div></a></li><li><a href=""><img src="./images/c5.jpg" alt=""><div class="text-box"><h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3><p class="text-hid"><span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。</p></div></a></li><li><a href=""><img src="./images/c6.jpg" alt=""><div class="text-box"><h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3><p class="text-hid"><span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。</p></div></a></li><a href="" class="more">查看更多</a></ul><ul class="clear"><li><a href=""><img src="./images/c7.jpg" alt=""><div class="text-box"><h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3><p class="text-hid"><span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。</p></div></a></li><li><a href=""><img src="./images/c8.jpg" alt=""><div class="text-box"><h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3><p class="text-hid"><span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。</p></div></a></li><li><a href=""><img src="./images/c9.jpg" alt=""><div class="text-box"><h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3><p class="text-hid"><span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。</p></div></a></li><a href="" class="more">查看更多</a></ul></div></div><!-- 关于 --><div class="about"><div class="w"><div class="ab-top clear"><div class="box-img"><img src="./images/ab-img.jpg" alt=""></div><div class="ab-box"><h3>走进川西</br>从这里开始</h3><div class="tit">川西有哪些美景？</div><div class="con">《中国国家地理》在十多年前就曾这样说——“徘徊于北纬30度的横断山区，是中国最美的地方。”而川西，就是横断山区里，最核心、最美丽的部分。咱就说川西的美景多到你数不过来呀！！！异域星球般的墨石公园、人间瑶池般的黄龙景区、世界最高城理塘、高原明珠花湖。。。。。。等等美景，实在目不接瑕。正因为她复杂、神秘、多姿多彩，才给我们无限的探索可能。</div></div></div><div class="ab-botm clear"><div class="ab-l"><div class="hd">川西地区游客增长速度：</div><ul><li><p>海螺沟景区</p><img src="./images/ab-num1.png" alt=""></li><li><p>墨石公园景区</p><img src="./images/ab-num1.png" alt=""></li><li><p>塔公草原景区</p><img src="./images/ab-num1.png" alt=""></li></ul><div class="botm"><p>数据来源：以上数据为演示数据，不具参考价值<span>2020</span><span>2021</span><span>2022</span></p></div></div><div class="ab-r"><div class="hd">2020-2022年旅客增长速度：</br>各景区同比爆发式增长</div><div class="bd"><div class="ab-r-img"><img src="./images/guoqi-1.jpg" alt=""><img src="./images/guoqi-2.jpg" alt=""><img src="./images/guoqi-3.jpg" alt=""><img src="./images/guoqi-4.jpg" alt=""></div><ul><li><span>四姑娘山景区</span><div class="shape"><p style="width: 100%;"></p></div><div class="data">80%</div></li><li><span>新都桥景区</span><div class="shape"><p style="width: 30%;"></p></div><div class="data">24%</div></li><li><span>黄龙景区</span><div class="shape"><p style="width: 40%;"></p></div><div class="data">39%</div></li></ul></div></div></div></div></div><!-- 产品 --><div class="product"><div class="pro-slide"><div class="hd"><div class="w"><ul><li></li><li></li></ul></div></div><div class="bd"><ul><li><div class="w"><img src="./images/pro-slide1.jpg" alt=""><div class="pro-text"><h3>国际网友评价，</br>我想我一定会去的，一定的</h3><p>Metta World Peace 前NBA著名球员 对美景的赞叹</p><a href="" class="more">了解详情</a></div></div></li><li><div class="w"><img src="./images/pro-slide2.jpg" alt=""><div class="pro-text"><h3>由衷的感叹，</br>中国简直太令人惊讶了</h3><p>来自一家人的心声</p><a href="" class="more">了解详情</a></div></div></li></ul></div><img class="video-img" src="./images/video-img.png" alt=""></div><div class="pro-list"><ul class="w"><li><div class="box"><div class="box-hd"><h3 class="text-hid2">简直是太美了，很令人惊讶</h3><div class="stars"><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""></div></div><div class="box-bd"><div class="cg">发布者： 佩奇-小猪</div><div class="time">发布时间:2022-09-25</div><div class="country"><img src="./images/us.gif" alt=""><span>United States</span></div><div class="con">简直是太美了，很令人惊讶，中国不仅有惊人的发展速度，万万没想到自然景观也如此令人向往，到底是大自然的鬼斧神工...</div><a href="" class="box-more">了解更多</a></div></div></li><li><div class="box"><div class="box-hd"><h3 class="text-hid2">常年不化的雪山，远观如同一幅画...</h3><div class="stars"><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""></div></div><div class="box-bd"><div class="cg">发布者： 基尼特梅</div><div class="time">发布时间:2021-07-25</div><div class="country"><img src="./images/us.gif" alt=""><span>United States</span></div><div class="con">常年不化的雪山，远观如同一幅画，加上高山森林和清澈的湖泊，真的有点瑞士的感觉。 这里的四季皆美，还是个适合拍写真的地方，雪山、湖泊、溪流、草甸作为布景，怎么拍都是大片，这就是美丽的毕棚沟。</div><a href="" class="box-more">了解更多</a></div></div></li><li><div class="box"><div class="box-hd"><h3 class="text-hid2">这是我拍到过最美的景观了，山脉绵长，沟壑纵横...</h3><div class="stars"><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""></div></div><div class="box-bd"><div class="cg">发布者： 乔治</div><div class="time">发布时间:2021-07-25</div><div class="country"><img src="./images/us.gif" alt=""><span>United States</span></div><div class="con">这是我拍到过最美的景观了，山脉绵长，沟壑纵横，沟内大小海子密布，有葱绿高大的森林植被还有峻拔挺立的雪峰山脉，漫步在高山草甸，尽情的享受蓝天白云、巍巍雪山、原始森林、牛羊经幡、野花溪流的美妙画卷，也可以选择骑马游览，感受另一种悠然...</div><a href="" class="box-more">了解更多</a></div></div></li><li><div class="box"><div class="box-hd"><h3 class="text-hid2">中路藏寨，这里是我去过最冷的地方了，不过风景绝美</h3><div class="stars"><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""><img src="./images/wjx.png" alt=""></div></div><div class="box-bd"><div class="cg">发布者： yunxi</div><div class="time">发布时间:2022-07-22</div><div class="country"><img src="./images/us.gif" alt=""><span>United States</span></div><div class="con">中路藏寨，这里是我去过最冷的地方了，不过风景绝美，这里有历史悠久的古碉楼，古朴隆重的成人仪式，形式多样的锅庄舞，庄严肃穆的古藏戏，华美艳丽的嘉容藏服，妙趣横生的顶毪衫习俗，热气腾腾的酥油茶，香脆可口的火烧馍馍，活色生香，有漫步桃源之感...</div><a href="" class="box-more">了解更多</a></div></div></li></ul></div></div><!-- 优势 --><div class="adv"><div class="w"><div class="adv-top">川西几月份是最佳时间？<br> 川西的最佳旅游时间是每年的五月到十月。</div><a class="adv-more" href="">查看更多 <span>></span></a><ul><li><div class="adv-hd"><h3> <span>十</span> 月下旬，是风景是最好的。</h3><p>五月到十月这个时节川西的温度很舒适，到处都是花红草绿，一片生机盎然，游客可以来此避暑。八月到十月，来川西可以看到秋季的炫彩：红叶、黄草以及雪山。尤其是十月下旬，这个时候游客比较少，但是风景却是最好的。</p></div><div class="adv-botm"><img src="./images/adv-botm1.png" alt=""><div class="box-text">游客1<p>2022年旅游心得</p></div></div></li><li><div class="adv-hd"><h3> <span>四</span> 大景点</h3><p>1、稻城亚丁被国际友人誉为水蓝色星球上的最后一片净土，是摄影爱好者的天堂。 2、甲居藏寨将田园牧歌式的画卷展示在人们眼前，以一种艺术品的形态存在。 3、色达佛学院在重重的群山环绕之中 4、四姑娘山登山者的天堂、徒步人的迷宫、摄影家的乐园。</p></div><div class="adv-botm"><img src="./images/adv-botm2.png" alt=""><div class="box-text">游客2<p>游玩前的攻略</p></div></div></li></ul></div></div><!-- 服务 --><div class="service"><div class="box-tit">全程无忧服务，旅游省心，收获开心<p>合理的旅游路线，让旅行更放心</p></div><ul class="w"><li><div class="box-img"><img src="./images/ser-img2.png" alt=""></div><div class="box-text"><h3>线上报名</h3><p>互联网各大平台都可报名，诚信有保障 </br>买卖交易安全可靠。</p></div></li><li><div class="box-img"><img src="./images/ser-img1.png" alt=""></div><div class="box-text"><h3>接机服务</h3><p>全国服务网点，跟团游首选</br>就近机场接送</p></div></li><li><div class="box-img"><img src="./images/ser-img3.png" alt=""></div><div class="box-text"><h3>路线清晰</h3><p>提前告知旅游路线，错峰到达打卡点 </br>与大自然亲密接触。</p></div></li></ul></div><!-- 贸易 --><div class="trade"><div class="box-tit">轻松四步，开启川西旅游</div><ul class="w"><li><div class="nun"><img src="./images/tra-num1.png" alt=""></div><h3>确定旅游路线</h3><p>在线查看旅行路线，确定出行时间</p></li><li><div class="nun"><img src="./images/tra-num2.png" alt=""></div><h3>网上报名</h3><p>在线填写个人信息，进行网上登记</p></li><li><div class="nun"><img src="./images/tra-num3.png" alt=""></div><h3>登机接送</h3><p>准备好生活日常用品，及高原应急物品登机</p></li><li><div class="nun"><img src="./images/tra-num4.png" alt=""></div><h3>自驾/跟团</h3><p>到达目的地可选择自驾或者跟团，进行选择</p></li></ul></div><!-- 优惠 --><div class="discount"><div class="box-tit">即刻启程，立享优惠</div><div class="box w"><ul class="hd"><li><h3>特惠旅行卷A</h3><p>75折直达飞机<span>含返程 <b>领</b></span></p><p>飞行直达</p></li><li><h3>特惠旅行卷A</h3><p>75折直达飞机<span>含返程 <b>领</b></span></p><p>飞行直达</p></li><li><h3>特惠旅行卷A</h3><p>75折直达飞机<span>含返程 <b>领</b></span></p><p>飞行直达</p></li></ul><div class="bd"><img src="./images/dis-bd.png" alt=""><a class="dis-more" href="">即刻启程，立享优惠</a></div></div></div></section><!-- 尾部 --><footer><div class="w"><div class="foot-logo"><img src="./images/logo.png" alt=""></div><div class="foot-nav"><div class="con"><h3>快速通道</h3><a href="">热门景点</a><a href="">旅游攻略</a><a href="">打卡瞬间</a></div><div class="con"><h3>重要规则</h3><a href="">禁限售规则</a><a href="">知识产权保护政策</a><a href="">隐私权政策</a><a href="">使用条款</a><a href="">© 2021-2022 stuweb.cn </br> 版权所有</a></div></div><div class="foot-code"><h3>关注我们</h3><div class="con"><img src="./images/weixin.jpg" alt=""><p>扫一扫</p><p>微信</p></div><div class="con"><img src="./images/qq.jpg" alt=""><p>扫一扫</p><p>QQ</p></div><div class="con"><img src="./images/gongzhonghao.jpg" alt=""><p>扫一扫</p><p>公众号</p></div></div></div></footer><!-- JS --><script src="./js/jquery1.42.min.js"></script><script src="./js/swiper-bundle.min.js"></script><script src="./js/jquery.SuperSlide.2.1.3.js"></script><script>var swiper = new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination',clickable: true,},autoplay: true,autoplay: {disableOnInteraction: false, //用户拖动轮播图之后继续轮播，该属性默认是true},loop: true,});jQuery(".tabbox").slide({effect: "fold",delayTime: 1000});jQuery(".pro-slide").slide({mainCell: ".bd ul",effect: "leftLoop",autoPlay: true});</script> </body></html>更多请获取源码进行测试与学习
四、获取源码——关注不迷路——获取更多精选原创作品
- 添加公众号 “云曦网络推广” 获取更多精彩内容
- 在线下载请移步至云曦模板网（https://www.stuweb.cn/1.html）
- 同款动态网页（带后台版本请@作者进行获取）
- 作品代码及前台内容均有作者原创，请放心下载
五、常见问答
问：手机端下载方式？
- 答：手机端一般是微信或者QQ打开，默认是没有下载地址的，需要复制链接到浏览器打开进行浏览和下载
问：pc端下载方式？
- 答：pc端是推荐的下载途径，如遇到链接打不开等情况请及时联系在线客服解决
问：静态网页下载后用什么工具编辑和修改？
- 答：静态网页用DW、hbuilder、vscode、Sublime Text3等任意html编辑软件，新手建议Sublime Text3，熟悉开发的同学用vscode
问：静态网页下载后如何运行到浏览器？
- 答：下载解压到指定文件夹后双击html文件会自动跳转到默认浏览器，或者用鼠标按住不动拖拽到浏览器中进行浏览
H5静态网页设计与制作_川西旅游网设计作品（HTML+CSS+jQuery）相关推荐
- html静态网页制作的博客,[推荐]初学制作静态网页HTML推荐标准_
[推荐]初学制作静态网页HTML推荐标准_ (2012-05-19 10:46:32) 标签: 网页 制作 杂谈 a双 定义一个链接name=text 本网页内目标名称(书签),可为数字或文本href ...
- HTML+CSS静态页面网页设计作业——洪江市旅游网(7页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:洪江市旅游网站设计--洪江市旅游网(7页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个人. 美食. 公司. ...
- HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...
- HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码...
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...
- html大学生网站开发实践作业：旅游网站设计——联途旅游网(39页) HTML+CSS+JavaSc 旅游网页html 开心旅游网html 旅游网前端框架HTML模板...
HTML5期末大作业:旅游网站设计--联途旅游网(39页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材 ...
- HTML5期末大作业：旅游出行网站设计——旅游网设计(15页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生旅游网站模板
HTML5期末大作业:旅游出行网站设计--旅游网设计(15页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生旅游网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校 ...
- html大学生网站开发实践作业：旅游网站设计——联途旅游网(39页) HTML+CSS+JavaSc 旅游网页html 开心旅游网html 旅游网前端框架HTML模板
HTML5期末大作业:旅游网站设计--联途旅游网(39页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材 ...
- DIV布局大作业：仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业
HTML5期末大作业:仿悦世界游戏网站设计--仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
- HTML5期末大作业：旅游网站设计——开心旅游网(15页) HTML+CSS+JavaScript 主题度假酒店
HTML5期末大作业:旅游网站设计--开心旅游网(15页) HTML+CSS+JavaScript 主题度假酒店 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
最新文章
- CVE-2018-20169漏洞学习
- javascript数据结构-介绍
- 实战项目---模拟商品采购中心信息平台
- Linux环境安装zookeeper3.5.5后，总是启动不了
- Two-Stream RNN/CNN for Action Recognition in 3D Videos－阅读笔记
- SQL Server2000企业管理器在Win7中新建表错误的解决方法
- java版电子商务spring cloud分布式微服务b2b2c社交电商（一）服务的注册与发现（Eureka）...
- 使用Sakura查看字符十六进制编码（附带ASCII编码表）
- 关于ADO.Net连接池（Connection Pool）的一些个人见解
- Python文件中，reload(sys)找不到的问题
- win7卡在正在启动windows界面_Windows系统电脑卡在开机界面进不去系统解决方法
- 在机器学习领域，主要有哪三类不同的学习方法
- 神州行省内流量套餐6元500M申请,发送BLSN6到10086即可
- 计算机群等级,腾讯客服-群成员活跃等级规则
- 九爷带你玩转 php单元测试
- python-字符串容器
- 华为荣耀路由器虚拟服务器,荣耀路由器怎么设置？
- 7个可以改变一生的自学网站，每天3小时，效果直线上升！
- WXSS-WXML-WXS语法
- linux nvcc未找到命令,NVCC CUDA编译流程