旅游网页实现

最新推荐文章于 2024-07-26 11:41:15 发布

无非905

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量557

点赞数 14

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_70532458/article/details/136159081

版权

1:案列需求

2:案列分析

2.1 先将页面拆分成多个,进行逐一完成

第一部分:顶部搜索栏

第二部分:轮播图

第三部分:金刚区图标

第四部分:广告图标

第五部分:底部菜单

3:案列源码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <!-- 引入全局公共样式文件 -->
    <link rel="stylesheet" href="css/common.css" />
    <!-- 引入当前页面样式文件 -->
    <link rel="stylesheet" href="css/index.css" />
    <!-- 引入swiper样式文件 -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />
  </head>
  <body>
    <!-- 搜索栏 -->
    <div class="search">
      <div class="search-box">
        <img class="search-icon" src="images/功能图标-01@2x.png" alt="" />
        <input type="text" placeholder="搜索你想去的地方" />
      </div>
      <img class="info-icon" src="images/功能图标-02@2x.png" alt="" />
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="images/banner@2x.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="images/banner@2x.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="images/banner@2x.png" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- 金刚区 -->
    <div class="icons">
      <div>
        <img src="images/金刚区图标-01@2x.png" alt="" /><span>必去景点</span>
      </div>
      <div>
        <img src="images/金刚区图标-02@2x.png" alt="" /><span>美食广场</span>
      </div>
      <div>
        <img src="images/金刚区图标-03@2x.png" alt="" /><span>当地玩乐</span>
      </div>
      <div>
        <img src="images/金刚区图标-04@2x.png" alt="" /><span>行程路线</span>
      </div>
      <div>
        <img src="images/金刚区图标-05@2x.png" alt="" /><span>问大家</span>
      </div>
      <div>
        <img src="images/金刚区图标-06@2x.png" alt="" /><span>语音导览</span>
      </div>
      <div>
        <img src="images/金刚区图标-07@2x.png" alt="" /><span>当地购物</span>
      </div>
      <div>
        <img src="images/金刚区图标-08@2x.png" alt="" /><span>交通出行</span>
      </div>
    </div>
    <!-- 广告 -->
    <div class="ad"><img src="images/组 15@2x.png" alt="" /></div>
    <!-- 超值特惠 -->
    <div class="cheap">
      <img class="word" src="images/超值特惠@2x.png" alt="" />
      <span>最高性价比国内游玩路线</span>
      <img class="more" src="images/椭圆 6@2x.png" alt="" />
    </div>
    <div class="travel">
      <div class="box1">
        <img src="images/组 16@2x.png" alt="" />
      </div>
      <div class="box2">
        <img src="images/组 17@2x.png" alt="" />
        <img src="images/组 17 副本@2x.png" alt="" />
      </div>
    </div>
    <!-- 底部tab菜单 -->
    <div class="tabbar">
      <div><img src="images/功能图标-05@2x.png" alt="" /><span>首页</span></div>
      <div><img src="images/功能图标-08@2x.png" alt="" /><span>推荐</span></div>
      <div><img src="images/" alt="" /><span>攻略</span></div>
      <div><img src="images/功能图标-12@2x.png" alt="" /><span>我的</span></div>
    </div>
    <!-- 引入swiper.js文件 -->
    <script src="js/swiper-bundle.min.js"></script>
    <script>
      var mySwiper = new Swiper(".swiper", {
        autoplay: true,
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
      });
    </script>
  </body>
</html>

样式源码:

/*首页样式*/
body{
    height: 47.07vw;
    background: linear-gradient(180deg, #888AFF, #4E6EFF) no-repeat;
}
/*搜索栏样式*/
.search{
    display: flex;
    margin: 4vw 0;
    justify-content: space-between;
    align-items: center;
    
}
.search .search-box{
    display: flex;
    background-color:white;
    width: 85.47vw;
    height: 9.07vw;
    border-radius: 3.33vw;
    align-items: center;
}
.search .search-box input{
    border: none;
}
.search .search-icon{
    width: 4.27vw;
    height: 4.27vw;
    margin: 2.4vw 2.53vw;
}
.search .info-icon{
    width: 5.07vw;
    height: 5.07vw;
    margin-right: 2vw;
}
/*swiper样式*/
.swiper {
    width: 96.8vw;
    height: 41.07vw;
}  
.swiper img{
    width: 100%;
    height: 100%;
}
.icons{
    display: flex;
    flex-wrap: wrap;
    margin: 5.33vw 0 0 0;
}
.icons div{
    width: 20%;
    height: 23vw;
    text-align: center;
}
.icons div img{
width: 10vw;
height: 10vw;
margin: 0 auto;
}
.icons div span{
display: block;
font-size: 3.2vw;
}
.ad{
    width: 96.8vw; 
    height: 25vw;
}
.ad img{
    width: 100%;
}
.cheap{
    width: 96.8vw; 
    height: 9.73vw;
    margin-top: 2.67vw;
}
.cheap .word{
    width: 17.07vw;
    height: 4.27vw;
}
.cheap span{
    font-size: 13px;
    padding-left: 33.33vw;
    font-weight: bold;
    color: #565656;
}
.travel{
    width: 96.8vw;
    height: 28.93vw;
    display: flex;
    justify-content: space-between;
}
.travel .box1{
    width: 47.33vw;
    height: 28.93vw;
}
.travel .box1 img{
    width: 100%;
}
.travel .box2{
    width: 47.2vw;
    height: 28.93vw;
    padding-left: 10px;
}
.travel .box2 img{
    width: 100%;
    
}
.tabbar{
    display: flex;
    justify-content: space-between;
    width: 100%;
    bottom: 0;
    position: fixed;
    border-top: 1px solid #ccc;
    padding: 2vw 0;
    background-color: white;
}
.tabbar div{
    text-align: center;
    width: 25%;
}
.tabbar div img{
    width: 4.27vw;
    height: 4.27vw;
}
.tabbar span{
    display: block;
    font-size: 3.2vw;
}