携程手机端网页设计效果图

最新推荐文章于 2022-10-16 16:54:42 发布

青柠小苍兰

最新推荐文章于 2022-10-16 16:54:42 发布

阅读量1.6k

点赞数 5

分类专栏： Webstrom 文章标签： css html 网页设计

本文链接：https://blog.csdn.net/qq_45642410/article/details/112801966

版权

携程手机端网页设计效果图

为了避免挂科，该做的还是得做，自己学得也不咋会，就瞎写的，反正只要效果图出来就完事。所以代码极其啰嗦哈哈哈哈。

效果图如下：
在这里插入图片描述
文件总的放置路径是这样的 :

这个是 html ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>L-King</title>
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="fa/css/all.css">
    <!-- 引入当前页面的样式表 -->
    <link rel="stylesheet" href="css/style.css">
    <link href="css/swiper.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/swiper.min.js"></script>
</head>
<body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/1.jpg"></div>
                <div class="swiper-slide"><img src="images/2.jpg"></div>
                <div class="swiper-slide"><img src="images/3.jpg"></div>
            </div>
        </div>

        <script>
            var mySwiper = new Swiper
            ('.swiper-container', {
    
                direction: 'horizontal', // 水平切换选项
                spaceBetween: 20,
                slidesPerView: 'auto',
                loop: true, // 循环模式选项
                loopedSlides: 5,
                autoplay: {
    
                    delay: 1500,
                    disableOnInteraction: false,
                },
            })
        </script>

        <div class="search">
            <button></button>
            <input type="text" value="搜索：目的地/酒店/景点/航班号">
        </div>
        <div class="users">
            <div class="user"></div>
            <a href="#" class="me">我 的</a>
        </div>

        <div class="nav">
                <div>
                    <a href="#">
                        <img src="images/1.png" alt="">
                        攻略·景点
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="images/2.png" alt="">
                        门票·玩乐
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="images/3.png" alt="">
                        美食林
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="images/4.png" alt="">
                        周边游
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="images/5.png" alt="">
                        一日游
                    </a>
                </div>
        </div>

    <div class="main">
        <nav>
            <div class="nav-common">
                <div class="nav-items">
                    <a href="#" id="hotel">酒店</a

最低0.47元/天解锁文章

青柠小苍兰

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
携程手机端网页设计效果图

携程手机端网页设计效果图为了避免挂科，该做的还是得做，自己学得也不咋会，就瞎写的，反正只要效果图出来就完事。所以代码极其啰嗦哈哈哈哈。效果图如下：文件总的放置路径是这样的 :这个是 html ：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>L-King</title> <!-- 引入图标字体库 --&
复制链接

扫一扫

专栏目录