【导语】大学生网页作业旅游网一共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">
