首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>湖北旅游网</title>
<!-- 链接外嵌式css样式表 -->
<link rel="stylesheet" type="text/css" href="css/1.css"/>
<!-- 写入外部字体图标链接 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<header>
<a href="#" class="logo"><span>湖北旅游网</span></a>
<nav class="navbar">
<a href="index.html">首页</a>
<a href="2.html">预定</a>
<a href="2.html">套餐</a>
<a href="3.html">服务</a>
<a href="3.html">相册</a>
<a href="4.html">评价</a>
<a href="4.html">联系我们</a>
<a href="service.html">售后</a>
</nav>
<!-- 图标 -->
<div class="icons">
<i class="fas fa-search" id="search-btn"></i><!-- 引用外部字体图标 -->
<i class="fas fa-user" id="login-btn"></i><!-- 引用外部字体图标 -->
</div>
<!-- 搜索框 -->
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="请输入内容">
<label for="search"></label><!-- 将上面的input关联在一起，点击lable标签时input标签就会弹出来 -->
</form>
</header>
<!-- 登录表单 -->
<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i><!-- 引用外部字体图标，将其设置为退出按钮 -->
<form>
<h3>登录</h3>
<input type="text" class="box" placeholder="请输入账号/手机号/邮箱">
<input type="password" class="box" placeholder="请输入密码">
<input type="submit" value="登录" class="btn">
<input type="checkbox" id="remember">
<label for="remember">我同意授权</label>
<p>忘记密码 <a href="#">点击找回</a></p>
<p>注册账号 <a href="#">点击注册</a></p>
</form>
</div>
<!-- 主页视频区 -->
<section class="home" id="home">
<!-- 主页视频标题 -->
<div class="content">
<h3>旅游是一种信仰</h3>
<p>世界不至眼前的苟且，还有诗和远方</p>
<a href="#" class="btn">查看更多</a>
</div>
<!-- 主页5个可切换视频 -->
<div class="controls">
<span class="vid-btn active" data-src="video/5.mp4"></span>
<span class="vid-btn" data-src="video/1.mp4"></span>
<span class="vid-btn" data-src="video/2.mp4"></span>
<span class="vid-btn" data-src="video/3.mp4"></span>
<span class="vid-btn" data-src="video/4.mp4"></span>
</div>
<!-- 主页第一个视频进入时自动播放 -->
<div class="video-container">
<!-- 设置进入主页时的默认视频 -->
<video src="video/5.mp4" id="video-slider" loop="loop" autoplay="autoplay" muted="muted"></video>
</div>
</section>
<script src="js/1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/1.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<header>
<a href="#" class="logo"><span>湖北旅游网</span></a>
<nav class="navbar">
<a href="index.html">首页</a>
<a href="2.html">预定</a>
<a href="2.html">套餐</a>
<a href="3.html">服务</a>
<a href="3.html">相册</a>
<a href="4.html">评价</a>
<a href="4.html">联系我们</a>
<a href="service.html">售后</a>
</nav>
<!-- 图标 -->
<div class="icons">
<i class="fas fa-search" id="search-btn"></i>
<i class="fas fa-user" id="login-btn"></i>
</div>
<!-- 搜索框 -->
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="请输入内容">
<label for="search-bar" class="fas fa-search"></label>
</form>
</header>
<!-- 登录表单 -->
<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i>
<form class="#form">
<h3>登录</h3>
<input type="email" class="box" placeholder="请输入账号/手机号/邮箱">
<input type="password" class="box" placeholder="请输入密码">
<input type="submit" value="登陆" class="btn">
<input type="checkbox" id="remember">
<label for="remember">我同意授权</label>
<p>忘记密码 <a href="#">点击找回</a></p>
<p>注册账号 <a href="#">点击注册</a></p>
</form>
</div>
<!-- 预订部分 -->
<section class="book">
<h1 class="heading">
<span>N</span>
<span>E</span>
<span>W</span>
<span class="space"></span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>
</h1>
<div class="row">
<div class="image">
<img src="img/2.jpg" alt="">
</div>
<form action="">
<div class="inputBox">
<h3>目的地</h3>
<input type="text" placeholder="去哪里">
</div>
<div class="inputBox">
<h3>人数</h3>
<input type="number" placeholder="总人数">
</div>
<div class="inputBox">
<h3>多久到</h3>
<input type="date">
</div>
<div class="inputBox">
<h3>多久离开</h3>
<input type="date">
</div>
<input type="submit" class="btn" value="立即 预定">
</form>
</div>
</section>
<!-- 套餐部分 -->
<section class="packages">
<h1 class="heading">
<span>s</span>
<span>c</span>
<span>e</span>
<span>n</span>
<span>i</span>
<span>n</span>
<span class="space"></span>
<span>s</span>
<span>p</span>
<span>o</span>
<span>t</span>
</h1>
<div class="box-container">
<div class="box">
<img src="img/3.JPG" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 恩施 </h3>
<p>和我在恩施的街头走一走。</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> ￥90.00 <span>￥120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
<div class="box">
<img src="img/4.jpg" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 武汉 </h3>
<p>武汉的樱花有如我和你初见时的阳光只是多了一些忧愁。</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> ￥90.00 <span>￥120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
<div class="box">
<img src="img/5.jpeg" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 宜昌 </h3>
<p>两千多年沉淀，打磨出中国独树一帜的海阔天空之城。</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> ￥90.00 <span>￥120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
<div class="box">
<img src="img/6.webp" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 荆州 </h3>
<p>荆州你爱来不来。</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> ￥90.00 <span>￥120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
<div class="box">
<img src="img/7.webp" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 襄阳 </h3>
<p>素有“华夏第一城池”的襄阳你确定不来吗？</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> ￥90.00 <span>￥120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
<div class="box">
<img src="img/8.jpeg" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 十堰 </h3>
<p style="font-size: 0.75rem;">十堰的建筑美确定不来欣赏吗？</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> ￥90.00 <span>￥120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
</div>
</section>
<script src="js/1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/1.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<!-- 套用主页导航栏 -->
<header>
<a href="#" class="logo"><span>湖北旅游网</span></a>
<nav class="navbar">
<a href="1.html">首页</a>
<a href="2.html">预定</a>
<a href="2.html">套餐</a>
<a href="3.html">服务</a>
<a href="3.html">相册</a>
<a href="4.html">评价</a>
<a href="4.html">联系我们</a>
<a href="service.html">售后</a>
</nav>
<!-- 图标 -->
<div class="icons">
<i class="fas fa-search" id="search-btn"></i><!-- 引用外部字体图标 -->
<i class="fas fa-user" id="login-btn"></i><!-- 引用外部字体图标 -->
</div>
<!-- 搜索框 -->
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="请输入内容">
<label></label><!-- 将上面的input关联在一起，点击lable标签时input标签就会弹出来 -->
</form>
</header>
<!-- 登录表单 -->
<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i><!-- 引用外部字体图标，将其设置为退出按钮 -->
<form class="#form">
<h3>登录</h3>
<input type="text" class="box" placeholder="请输入账号/手机号/邮箱">
<input type="password" class="box" placeholder="请输入密码">
<input type="submit" value="登录" class="btn">
<input type="checkbox" id="remember">
<label for="remember">我同意授权</label>
<p>忘记密码 <a href="#">点击找回</a></p>
<p>注册账号 <a href="#">点击注册</a></p>
</form>
</div>
<!-- 服务部分 -->
<section class="services">
<h1 class="heading">
<span>s</span>
<span>e</span>
<span>r</span>
<span>v</span>
<span>i</span>
<span>c</span>
<span>e</span>
<span>s</span>
</h1>
<div class="box-container">
<div class="box">
<i class="fas fa-hotel"></i><!-- 引用外部字体图标 -->
<h3>酒店</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="box">
<i class="fas fa-utensils"></i><!-- 引用外部字体图标 -->
<h3>饮食</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="box">
<i class="fas fa-bullhorn"></i><!-- 引用外部字体图标 -->
<h3>安全</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="box">
<i class="fas fa-globe-asia"></i><!-- 引用外部字体图标 -->
<h3>环游指南</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="box">
<i class="fas fa-plane"></i><!-- 引用外部字体图标 -->
<h3>出行交通</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="box">
<i class="fas fa-hiking"></i><!-- 引用外部字体图标 -->
<h3>旅行</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</div>
</section>
<!-- 相册部分 -->
<section class="gallery">
<h1 class="heading">
<span>v</span>
<span>i</span>
<span>e</span>
<span>w</span>
</h1>
<div class="box-container">
<div class="box">
<img src="img/8.webp" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="img/9.webp" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="img/10.webp" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="img/11.webp" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="img/12.webp" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="img/13.webp" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="img/14.webp" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="img/15.webp" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="img/16.webp" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
</div>
</section>
<script src="js/1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/1.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<!-- 套用主页导航栏 -->
<header>
<a href="#" class="logo"><span>湖北旅游网</span></a>
<nav class="navbar">
<a href="index.html">首页</a>
<a href="2.html">预定</a>
<a href="2.html">套餐</a>
<a href="3.html">服务</a>
<a href="3.html">相册</a>
<a href="4.html">评价</a>
<a href="4.html">联系我们</a>
<a href="service.html">售后</a>
</nav>
<!-- 图标 -->
<div class="icons">
<i class="fas fa-search" id="search-btn"></i><!-- 引用外部字体图标 -->
<i class="fas fa-user" id="login-btn"></i><!-- 引用外部字体图标 -->
</div>
<!-- 搜索框 -->
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="请输入内容">
<label></label><!-- 将上面的input关联在一起，点击lable标签时input标签就会弹出来 -->
</form>
</header>
<!-- 登录表单 -->
<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i><!-- 引用外部字体图标，将其设置为退出按钮 -->
<form class="#form">
<h3>登录</h3>
<input type="text" class="box" placeholder="请输入账号/手机号/邮箱">
<input type="password" class="box" placeholder="请输入密码">
<input type="submit" value="登录" class="btn">
<input type="checkbox" id="remember">
<label for="remember">我同意授权</label>
<p>忘记密码 <a href="#">点击找回</a></p>
<p>注册账号 <a href="#">点击注册</a></p>
</form>
</div>
<!-- 评价部分 -->
<section class="review">
<h1 class="heading">
<span>c</span>
<span>a</span>
<span>r</span>
<span>d</span>
</h1>
<div class="swiper-container review-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="box">
<img src="img/01.webp" alt="">
<h3>小黑</h3>
<p>xxxxxxxxxx</p>
<div class="stars">
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="far fa-star"></i><!-- 引用外部字体图标 -->
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img src="img/02.webp" alt="">
<h3>小白</h3>
<p>xxxxxxxxxxxx</p>
<div class="stars">
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="far fa-star"></i><!-- 引用外部字体图标 -->
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img src="img/03.webp" alt="">
<h3>小红</h3>
<p>xxxxxxxxxxxx</p>
<div class="stars">
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="far fa-star"></i><!-- 引用外部字体图标 -->
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img src="img/04.webp"">
<h3>小黄</h3>
<p>xxxxxxxxxxxxx</p>
<div class="stars">
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="fas fa-star"></i><!-- 引用外部字体图标 -->
<i class="far fa-star"></i><!-- 引用外部字体图标 -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系我们 -->
<section class="contact">
<h1 class="heading">
<span>c</span>
<span>o</span>
<span>n</span>
<span>t</span>
<span>a</span>
<span>c</span>
<span>t</span>
</h1>
<div class="row">
<div class="image">
<img src="img/101.webp"">
</div>
<form action="">
<div class="inputBox">
<input type="text" placeholder="您的姓名">
<input type="email" placeholder="您的邮箱">
</div>
<div class="inputBox">
<input type="number" placeholder="您的电话">
<input type="text" placeholder="反馈主题">
</div>
<textarea placeholder="您反馈的内容" name="" id="" cols="30" rows="10"></textarea>
<input type="button" class="btn" value="发送给我们">
</form>
</div>
</section>
<!-- 底部 -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>关于我们</h3>
<p>恩施职业技术学院</p>
<p>信息工程学院</p>
</div>
<div class="box">
<h3>党群部门</h3>
<a href="#">校办</a>
<a href="#">组织部与统战部</a>
<a href="#">宣传部</a>
<a href="#">工会</a>
<a href="#">纪委、监察专员办公室</a>
<a href="#">团委</a>
</div>
<div class="box">
<h3>快速链接</h3>
<a href="1.html">首页</a>
<a href="2.html">预定</a>
<a href="2.html">套餐</a>
<a href="3.html">服务</a>
<a href="3.html">相册</a>
<a href="4.html">评价</a>
<a href="4.html">联系我们</a>
</div>
<div class="box">
<h3>教学院部</h3>
<a href="#">信息工程学院</a>
<a href="#">机电工程学院</a>
<a href="#">生物工程学院</a>
<a href="#">人文教育学院</a>
<a href="#">体育学院</a>
<a href="#">中职部</a>
<a href="#">经济管理学院</a>
<a href="#">建筑工程学院</a>
<a href="#">医学院</a>
<a href="#">马克思主义学院</a>
<a href="#">公共课部</a>
<a href="#">旅游管理学院</a>
</div>
<div class="box">
<h3>关于我们</h3>
<a href="#"><img src="img/wb.png" >微博</a>
<a href="#"><img src="img/QQ.png" >QQ</a>
<a href="#"><img src="img/yx.png" >邮箱</a>
<a href="#"><img src="img/vx.png" >微信</a>
</div>
</div>
<h1 class="credit"> <img src="img/eszylogo.png" ></h1>
</section>
<script src="js/1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>旅游</title>
</head>
<link rel="stylesheet" type="text/css" href="css/service.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<body>
<header>
<a href="#" class="logo"><span>湖北旅游网</span></a>
<nav class="navbar">
<a href="index.html">首页</a>
<a href="2.html">预定</a>
<a href="2.html">套餐</a>
<a href="3.html">服务</a>
<a href="3.html">相册</a>
<a href="4.html">评价</a>
<a href="4.html">联系我们</a>
<a href="service.html">售后</a>
</nav>
<!-- 图标 -->
<div class="icons">
<i class="fas fa-search" id="search-btn"></i>
<i class="fas fa-user" id="login-btn"></i>
</div>
<!-- 搜索框 -->
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="请输入内容">
<label for="search-bar" class="fas fa-search"></label>
</form>
</header>
<!-- 登录表单 -->
<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i>
<form class="#form">
<h3>登录</h3>
<input type="email" class="box" placeholder="请输入账号/手机号/邮箱">
<input type="password" class="box" placeholder="请输入密码">
<input type="submit" value="登陆" class="btn">
<input type="checkbox" id="remember">
<label for="remember">我同意授权</label>
<p>忘记密码 <a href="#">点击找回</a></p>
<p>注册账号 <a href="#">点击注册</a></p>
</form>
</div>
<div class="search">
<div class="search-ipt">
<input type="text" placeholder="请输入你想去的地方">
<div class="search-btn">搜索</div>
</div>
<div class="enume">
<span class="active">梅里雪山</span>
<span>洱海</span>
<span class="active">首尔</span>
<span>纽约</span>
<span>阿尔卑斯山</span>
</div>
</div>
<img width="100%" height="420" src="img/hb.webp" alt="">
<div class="tab ban">
<div style="width: 272px;display: inline-block;">
<h2>售后保障</h2>
</div>
<div
style="width: 100px;padding:16px;background: #ffb923;color:#fff;display: inline-block;text-align: center;">
售后服务</div>
<div style="width: 100px;padding:16px;display: inline-block;">相关法律</div>
<div style="width: 100px;padding:16px;display: inline-block;">制作团队</div>
<div style="width: 100px;padding:16px;display: inline-block;">关于我们</div>
</div>
<div class="content ban">
<div style="width:210px;padding:10px;border: 1px solid #666666;float: left;" class="content-item">
<h3>推荐目的地</h3>
<a style="display: inline-block; padding: 12px 20px;" href="#">恩施</a>
<a style="display: inline-block; padding: 12px 20px;" href="#">荆州</a>
<a style="display: inline-block; padding: 12px 20px;" href="#">襄阳</a>
<a style="display: inline-block; padding: 12px 20px;" href="#">武汉</a>
<a style="display: inline-block; padding: 12px 20px;" href="#">宜昌</a>
<a style="display: inline-block; padding: 12px 20px;" href="#">十堰</a>
<a style="display: inline-block; padding: 12px 20px;" href="#">孝感</a>
<a style="display: inline-block; padding: 12px 20px;" href="#">黄冈</a>
<a style="display: inline-block; padding: 12px 20px;" href="#">天门</a>
<a style="display: inline-block; padding: 12px 20px;" href="#">仙桃</a>
<a style="display: inline-block; padding: 12px 20px;" href="#">咸宁</a>
</div>
<div style="margin-top: 50px;width: 910px;height: :153px;margin-left: 300px;">
<table style="border: 1px #666666 solid;width: 904px;">
<tr>
<td style="border-right: 1px #666666 solid;width: 111px;height: 64px;text-align: center;"><img
src="img/sh_list_pic_03.gif"></td>
<td><strong>1.提供旅游正规发票</strong><br>
当您在湖北旅游网上购买任何旅游产品，湖北旅游网均提供正规发票。
</td>
</tr>
</table>
<table style="border: 1px #666666 solid;margin-top: 10px;width: 904px;">
<tr>
<td style="border-right: 1px #666666 solid;width: 111px;height: 64px;text-align: center;"><img
src="img/sh_list_pic_06.gif"></td>
<td><strong>2.安排专属私人旅游顾问</strong><br>
专属私人旅游顾问是将从您预定开始直至旅游结束全程为您服务。她将帮您处理：建议旅游.买贵退钱.投诉维权等。
</td>
</tr>
</table>
</div>
</div>
<div class="foot ban">
<table>
<tr>
<td width="200">
<h3>新手指南</h3>
</td>
<td width="200">会员注册/登录</td>
<td width="200">会员章程</td>
<td width="200">隐私政策</td>
<td width="200">预订流程</td>
<td width="200">在线预订条款</td>
</tr>
<tr>
<td>
<h3>签约及发票制度</h3>
</td>
<td>门市签约</td>
<td>线上签约</td>
<td>发票制度</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<h3>支付方式</h3>
</td>
<td>在线支付</td>
<td>门市现付</td>
<td>银行汇款</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<h3>售后服务</h3>
</td>
<td>退款方式</td>
<td>订单查询</td>
<td>订单变更及取消</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<h3>旅游资讯</h3>
</td>
<td>旅游贴士</td>
<td>湖北官方微博</td>
<td>旅游会员刊物</td>
<td></td>
<td></td>
</tr>
</table>
<div style="margin-top: 50px;text-align: center;">
<img src="img/eszylogo.png" >
</div>
</div>
<script src="js/1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
js
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: capitalize;
outline: none;
border: none;
text-decoration: none;
transition: all .2s linear;
}
/* 导航栏 */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #333;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 9%;
}
header .logo span {
color: #ffa500;
}
header .logo {
font-size: 1.5rem;
font-weight: bolder;
color: #fff;
text-transform: uppercase;
}
header .navbar a {
color: #fff;
font-size: 1rem;
font-weight: bold;
margin: 0 .8rem;
}
header .navbar a:hover {
color: #ffa500;
}
header .icons i {
font-size: 1.2rem;
color: #fff;
cursor: pointer;
margin-right: 1rem;
}
header .icons i:hover {
color: #ffa500;
}
/* 搜索框 */
header .search-bar-container {
position: absolute;
top: -150%;
left: 0;
right: 0;
padding: 0.5em 1rem;
background: #333;
border-top: .1rem solid rgba(255, 255, 255, .2);
display: flex;
align-items: center;
z-index: 1001;
}
header .search-bar-container.active {
top: 100%;
}
header .search-bar-container #search-bar {
width: 100%;
padding: .5rem;
text-transform: none;
color: #333;
font-size: 1rem;
}
header .search-bar-container label {
color: #fff;
cursor: pointer;
font-size: 1rem;
margin-left: 1rem;
}
header .search-bar-container label:hover {
color: #ffa500;
}
/* 登录表单 */
.login-form-container {
position: fixed;
top: -120%;
left: 0;
z-index: 10000;
min-height: 100vh;
width: 100%;
background: rgba(0, 0, 0, .7);
display: flex;
align-items: center;
justify-content: center;
}
.login-form-container.active {
top: 0;
}
.login-form-container form {
margin: 2rem;
padding: 1.5rem 2rem;
border-radius: .5rem;
background: #fff;
width: 30rem;
}
.login-form-container form h3 {
font-size: 2rem;
color: #444;
text-transform: uppercase;
text-align: center;
padding: 1rem 0;
}
.login-form-container form .box {
width: 100%;
padding: 1rem;
font-size: 1.5rem;
color: #333;
margin: .6rem 0;
border: .1rem solid rgba(0, 0, 0, .3);
text-transform: none;
}
.login-form-container form .box:focus {
border-color: #ffa500;
}
.login-form-container form #remember {
margin-top: 1.5rem;
}
.login-form-container form label {
font-size: 1.5rem;
}
.login-form-container form .btn {
display: block;
width: 100%;
}
.login-form-container form p {
padding: .5rem 0;
font-size: 1.0rem;
color: #666;
}
.login-form-container form p a {
color: #ffa500;
}
.login-form-container form p a:hover {
color: #333;
text-decoration: underline;
}
.login-form-container #form-close {
position: absolute;
top: 2rem;
right: 3rem;
font-size: 4rem;
color: #fff;
cursor: pointer;
}
.btn {
display: inline-block;
margin-top: 1rem;
background: #ffa500;
color: #fff;
padding: .8rem 3rem;
border: .2rem solid #ffa500;
cursor: pointer;
font-size: 1.5rem;
}
.btn:hover {
background: rgba(255, 165, 0, .2);
color: #ffa500;
}
/* 主页的视频播放区 */
.home {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 0;
}
.home .content {
text-align: center;
}
.home .content h3 {
font-size: 2rem;
color: #fff;
text-transform: uppercase;
text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .1);
}
.home .content p {
font-size: 2rem;
color: #fff;
padding: .5rem 0;
}
.home .video-container video {
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 100%;
object-fit: cover;
}
.home .controls {
padding: 0.5rem;
border-radius: 4rem;
background: rgba(0, 0, 0, .7);
position: relative;
top: 10rem;
}
.home .controls .vid-btn {
height: 2rem;
width: 2rem;
display: inline-block;
border-radius: 50%;
background: #fff;
cursor: pointer;
margin: 0 .5rem;
}
.home .controls .vid-btn.active {
background: #ffa500;
}
.heading {
text-align: center;
padding: 2.5rem 0
}
.heading span {
font-size: 2.5rem;
background: rgba(255, 165, 0, .2);
color: #ffa500;
border-radius: .5rem;
padding: .2rem 1rem;
}
.heading span.space {
background: none;
}
section {
padding: 2rem 9%;
}
/* 预定部分 */
.book .row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.book .row .image {
flex-grow: 1;
flex-basis: 15rem;
}
.book .row .image img {
width: 100%;
}
.book .row form {
flex-grow: 1;
flex-basis: 20rem;
padding: .5rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
border-radius: .5rem;
}
.book .row form .inputBox {
padding: .5rem 0;
}
.book .row form .inputBox input {
width: 100%;
padding: .5rem;
border: .1rem solid rgba(0, 0, 0, .1);
font-size: 1rem;
color: #333;
text-transform: none;
}
.book .row form .inputBox h3 {
font-size: 1rem;
padding: .5rem 0;
color: #666;
}
/* 套餐部分 */
.packages .box-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.packages .box-container .box {
flex: 1 1 25rem;
margin-right: 10px;
margin-bottom: 10px;
border-radius: .5rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}
.packages .box-container .box img {
height: 15rem;
width: 100%;
background-size: contain;
}
.packages .box-container .box .content {
padding: 0.5rem;
}
.packages .box-container .box .content h3 {
font-size: 2rem;
color: #333;
}
.packages .box-container .box .content h3 i {
color: #ffa500;
}
.packages .box-container .box .content p {
font-size: 1rem;
color: #666;
padding: 0.5rem 0;
}
.packages .box-container .box .content .stars i {
font-size: 1.5rem;
color: #ffa500;
}
.packages .box-container .box .content .price {
font-size: 1.5rem;
color: #333;
padding-top: 0.5rem;
}
.packages .box-container .box .content .price span {
color: #666;
font-size: 1rem;
text-decoration: line-through;
}
/* 服务部分 */
.services .box-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.services .box-container .box {
flex: 1 1 20rem;
border-radius: .5rem;
padding: 1rem;
text-align: center;
}
.services .box-container .box i {
padding: 0.5rem;
font-size: 2.5rem;
color: #ffa500;
}
.services .box-container .box h3 {
font-size: 1.5rem;
color: #333;
}
.services .box-container .box p {
font-size: 1rem;
color: #666;
padding: 0.5rem 0;
}
.services .box-container .box:hover {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .1);
}
/* 相册部分 */
.gallery .box-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.gallery .box-container .box {
overflow: hidden;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
border: 1rem solid #fff;
border-radius: .5rem;
flex: 1 1 20rem;
height: 15rem;
position: relative;
}
.gallery .box-container .box img {
height: 100%;
width: 100%;
object-fit: cover;
}
.gallery .box-container .box .content {
position: absolute;
top: -100%;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba(0, 0, 0, .7);
padding: 1rem;
padding-top: 2.5rem;
}
.gallery .box-container .box:hover .content {
top: 0;
}
.gallery .box-container .box .content h3 {
font-size: 1.5rem;
color: #ffa500;
}
.gallery .box-container .box .content p {
font-size: 1rem;
color: #eee;
padding: .5rem 0;
}
.contact .row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.contact .row .image {
flex: 1 1 25rem;
}
.contact .row .image img {
width: 100%;
}
.contact .row form {
flex: 1 1 25rem;
padding: 1rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
border-radius: .5rem;
}
.contact .row form .inputBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact .row form .inputBox input,
.contact .row form textarea {
width: 49%;
margin: 1rem 0;
padding: 1rem;
font-size: 1rem;
font-weight: bold;
color: #333;
background: #f7f7f7;
text-transform: none;
}
.contact .row form textarea {
height: 8rem;
resize: none;
width: 100%;
}
/* 评价部分 */
.review .review-slider {
padding-bottom: 1rem;
}
.review .box {
padding: 1rem;
text-align: center;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
border-radius: .5rem;
}
.review .box img {
height: 7rem;
width: 7rem;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1rem;
}
.review .box h3 {
color: #333;
font-size: 1.5rem;
}
.review .box p {
color: #666;
font-size: 1rem;
padding: 1rem 0;
}
.review .box .stars i {
color: #ffa500;
font-size: 1.5rem;
}
/* 图标 */
.brand-container {
margin-bottom: 30px;
text-align: center;
}
.brand-container img{
width: 100px;
height: 50px;
}
/* 底部 */
.footer {
background: #333;
}
.footer .box-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.footer .box-container .box {
padding: 1rem 0;
flex: 1 1 12rem;
}
.footer .box-container .box h3 {
font-size: 1.5rem;
padding: .5rem 0;
color: #fff;
}
.footer .box-container .box p {
font-size: 1.0rem;
padding: .5rem 0;
color: #eee;
}
.footer .box-container .box a {
display: block;
font-size: 1rem;
padding: .5rem 0;
color: #eee;
}
.footer .box-container .box img {
width: 20px;
}
.footer .box-container .box a:hover {
color: #ffa500;
text-decoration: underline;
}
.footer .credit {
text-align: center;
padding: 1rem 0.5rem;
margin-top: 0.5rem;
border-top: .1rem solid rgba(255, 255, 255, .2);
}
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
