携程网移动端首页制作（html5+css3）

携程网移动端页面首页制作（html5+css3）

俗世没有清欢

8805人浏览 · 2022-09-14 16:45:40

俗世没有清欢 · 2022-09-14 16:45:40 发布

1.预期完成效果

主要是自己做记录，记录做的过程以及遇到的一些问题

2.开始制作

2.1 搜索框的制作

1.首先引入normal.css（Normalize.css: Make browsers render all elements more consistently.）。其中搜索符号使用图标，阿里图标（iconfont-阿里巴巴矢量图标库）：打开网址搜索需要的图标，添加到自己的项目中，点击“download code” ，下载后将压缩包放进项目中进行解压使用。

2.遇到的问题：手机模式下搜索框显示不完全

解决：给搜索框最大的盒子添加width:100%;

2.2 导航栏的制作

1.上面为图标，下面为文字的，可以采用flex布局将主轴设置成y轴，然后将侧轴设置为居中对齐。

2.渐变色的制作：background: -webkit-linear-gradient(起始方向颜色1, 颜色2,...);

3.flex:wrap;换行

2.3销售模块制作

1.分为两个盒子，采用flex布局，各占50%

2.遇到的问题：

（1）在切换为移动设备仿真时，页面显示不完全，如图

修改了<head></head>标签中的 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0.7,user-scalable=yes,maximum-scale=1.0,minimum-scale=0.7">，将原本的1.0替换成了0.7，虽然可以正常显示了，但是不知道有没有更好的方法。

（2）写“权威排行榜”的时候样式突然不起效果，如图

后来发现自己html代码中把它的类名写错位置了，写在了href里面哈哈哈哈我还疑惑了半天

（3）滚动的时候搜索框无法显示在最上面，如图

给搜索框的大盒子添加 z-index: 1;置于最上层

2.4 底部图片

1.准备一个盒子，放一张图片

2.5 底部工具模块

1.需要下载新图标；小竖线采用伪类选择器做；&nbsp；空格符号

2.遇到的问题：

（1）在做“网站地图”和“电脑版”中间那根小竖线时，用的after伪类选择器，采用定位，但是一直没有内容，后面发现是把background-color写成了color

（2）2022前面的那个符号不会写，不知道是怎么来的

2.6 底部导航栏模块

1.大盒子用flex布局，每个占25%；小盒子为一个图标加文字，采用flex布局，将主轴设置成y轴；图标是精灵图

3. 代码部分

html代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=0.7,user-scalable=yes,maximum-scale=1.0,minimum-scale=0.7">
    <!-- 引入我们的css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>携程旅行-酒店预订，机票预订查询</title>
</head>

<body>
    <!-- 搜索框 -->
    <div class="search-box">
        <div class="search">
            <i class="iconfont icon">&#xe651;</i>
            <span>搜索：目的地/酒店/景点/航班号</span>
        </div>
    </div>
    <!-- 导航栏 -->
    <nav>
        <ul class="nav-entry">
            <li class="nav-entry-li1">
                <a href="#">
                    <span class="nav-entry-icon1"></span>
                    <span>酒店</span>
                </a>
            </li>
            <li class="nav-entry-li2">
                <a href="#">
                    <span class="nav-entry-icon2"></span>
                    <span>机票</span>
                </a>
            </li>
            <li class="nav-entry-li3">
                <a href="#">
                    <span class="nav-entry-icon3"></span>
                    <span>火车票</span>
                </a>
            </li>
            <li class="nav-entry-li4">
                <a href="#">
                    <span class="nav-entry-icon4"></span>
                    <span>旅游</span>
                </a>
            </li>
            <li class="nav-entry-li5">
                <a href="#">
                    <span class="nav-entry-icon5"></span>
                    <span>攻略景点</span>
                </a>
            </li>
            <li class="nav-entry-li6">
                <a href="#">
                    <span class="nav-entry-icon6"></span>
                    <span>民宿/客栈</span>
                </a>
            </li>
            <li class="nav-entry-li7">
                <a href="#">
                    <span class="nav-entry-icon7"></span>
                    <span>机+酒</span>
                </a>
            </li>
            <li class="nav-entry-li8">
                <a href="#">
                    <span class="nav-entry-icon8"></span>
                    <span>汽车/船票</span>
                </a>
            </li>
            <li class="nav-entry-li9">
                <a href="#">
                    <span class="nav-entry-icon9"></span>
                    <span>门票/活动</span>
                </a>
            </li>
            <li class="nav-entry-li10">
                <a href="#">
                    <span class="nav-entry-icon10"></span>
                    <span>美食</span>
                </a>
            </li>
            <li class="nav-entry-li11">
                <a href="#">
                    <span class="nav-entry-icon11"></span>
                    <span>特价/爆款</span>
                </a>
            </li>
            <li class="nav-entry-li12">
                <a href="#">
                    <span class="nav-entry-icon12"></span>
                    <span>接送机/包车</span>
                </a>
            </li>
            <li class="nav-entry-li13">
                <a href="#">
                    <span class="nav-entry-icon13"></span>
                    <span>租车</span>
                </a>
            </li>
            <li class="nav-entry-li14">
                <a href="#">
                    <span class="nav-entry-icon14"></span>
                    <span>周边游</span>
                </a>
            </li>
            <li class="nav-entry-li15">
                <a href="#">
                    <span class="nav-entry-icon15"></span>
                    <span>购物/免税</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- 销售模块 -->
    <div class="sales">
        <div class="salse-hd">
            <!-- 左边 -->
            <div class="sales-tejia">
                <div class="tejia-hd">
                    <a href="#" class="tejia-hd-zuo"></a>
                    <a href="#" class="tejia-hd-you">特价好货直播中</a>
                </div>
                <div class="tejia-bd">
                    <a href="#"></a>
                </div>
                <div class="tejia-ft">
                    <a href="#">￥</a>
                    <a href="#">660</a>
                </div>
            </div>
            <!-- 右边 -->
            <div class="sales-rank">
                <div class="rank-hd">
                    <a href="#" class="rank-hd-zuo"></a>
                    <a href="#" class="rank-hd-you">权威排行榜</a>
                </div>
                <div class="rank-bd">
                    <div class="rank-bd-zuo">
                        <a href="#" class="tu"></a>
                        <span class="tubiao">上海</span>
                        <span class="text">上海10大奢华酒店</span>
                    </div>
                    <div class="rank-bd-you">
                        <a href="#" class="tu"></a>
                        <span class="tubiao">上海</span>
                        <span class="text">上海亲子乐园酒店榜</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部图片 -->
    <div class="bottom-img">
        <a href="#"></a>
    </div>
    <!-- 底部功能模块 -->
    <div class="toolbox">
        <div class="tool-group">
            <a href="#" class="link">
                <span class="iconfont">&#xe88b;</span>
                <span>电话预订</span>
            </a>
            <a href="#" class="download">
                <span class="iconfont">&#xe668;</span>
                <span>下载携程</span>
            </a>
        </div>
        <div class="tool-text">
            <a href="#" class="zuo">网站地图</a>
            <a href="#">电脑版</a>
            <p>c2022携程旅行 &nbsp;泸ICP备08023580号</p>
        </div>
    </div>
    <!-- 底部导航栏 -->
    <!-- 局部导航栏 -->
    <ul class="bottom-nav">
        <li>
            <a href="#">
                <span class="local-nav-icon-icon1"></span>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon2"></span>
                <span>社区</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon3"></span>
                <span>消息</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon4"></span>
                <span>我的</span>
            </a>
        </li>
    </ul>
</body>

</html>

css代码

body {
    color: #000;
    /* 防止水平滚动条出现 */
    overflow-x: hidden;
    /* 防止一些元素点击之后背景会高亮 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, Microsoft Yahei, STXihei, hei;
    background: #f4f4f4;
}

div {
    box-sizing: border-box;
}

ul li {
    list-style: none;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: 'iconfont';
    src: url('../fonts/iconfont.woff2?t=1662898789972') format('woff2'),
        url('../fonts/iconfont.woff?t=1662898789972') format('woff'),
        url('../fonts/iconfont.ttf?t=1662898789972') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 搜索框 */
.search-box {
    /* 因为滚动时一直保持在上面，所以用固定定位 */
    position: fixed;
    /* 在页面最上层 */
    z-index: 1;
    top: 0;
    display: flex;
    width: 100%;
    height: 50px;
    max-width: 540px;
    min-width: 320px;
    background-color: #fff;
}

.search {
    flex: 1;
    width: 516px;
    height: 32px;
    border: 1.5px solid #377ab1;
    border-radius: 16px;
    margin: 10px;
}

.search .icon {
    position: absolute;
    top: 11px;
    left: 24px;
    font-size: 20px;
}

.search span {
    position: absolute;
    top: 13px;
    left: 53px;
    color: #a2a2a2;
    font-size: 16px;
}

/* 导航栏模块 */
nav {
    margin-top: 50px;
    height: 184px;
    width: 100%;
}

.nav-entry {
    display: flex;
    padding: 6px 12px 2px;
    background-color: #fff;
    /* 换行 */
    flex-wrap: wrap;
    /* 因为没有宽度所以只写上面这一句不会换行 将flex写成百分比，相对于父级来说*/
}

.nav-entry li [class^="nav-entry-icon"] {
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background-size: 28px auto;
}

.nav-entry-icon1 {
    background: url(../images/hotel.png) no-repeat;
}

.nav-entry-icon2 {
    background: url(../images/flight.png) no-repeat;
}

.nav-entry-icon3 {
    background: url(../images/train_ticket.png) no-repeat;
}

.nav-entry-icon4 {
    background: url(../images/vacation.png) no-repeat;
}

.nav-entry-icon5 {
    background: url(../images/gs.png) no-repeat;
}

.nav-entry-icon6 {
    background: url(../images/hotel_inn.png) no-repeat;
}

.nav-entry-icon7 {
    background: url(../images/flight_package.png) no-repeat;
}

.nav-entry-icon8 {
    background: url(../images/bus_ticket.png) no-repeat;
}

.nav-entry-icon9 {
    background: url(../images/ticket.png) no-repeat;
}

.nav-entry-icon10 {
    background: url(../images/food.png) no-repeat;
}

.nav-entry-icon11 {
    background: url(../images/hotel_sale.png) no-repeat;
}

.nav-entry-icon12 {
    background: url(../images/airport_transfer.png) no-repeat;
}

.nav-entry-icon13 {
    background: url(../images/car.png) no-repeat;
}

.nav-entry-icon14 {
    background: url(../images/weekend.png) no-repeat;
}

.nav-entry-icon15 {
    background: url(../images/shop.png) no-repeat;
}

.nav-entry [class^="nav-entry-li"] {
    flex: 18%;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.nav-entry-li1 {
    border-radius: 8px 0 0 0;
    /* 渐变色 */
    background: -webkit-linear-gradient(#fb5f53, #fc8251);
}

.nav-entry-li2 {
    background: -webkit-linear-gradient(#3e87fa, #4facf9);
}

.nav-entry-li3 {
    background: -webkit-linear-gradient(#6084fe, #6aa1ff);
}

.nav-entry-li4 {
    background: -webkit-linear-gradient(#32c5b5, #4ed5b4);
}

.nav-entry-li5 {
    border-radius: 0 8px 0 0;
    background: -webkit-linear-gradient(#ff8c39, #ffa338);
}

.nav-entry-li6,
.nav-entry-li11 {
    background-color: #fff6f1;
}

.nav-entry-li11 {
    border-radius: 0 0 0 8px;
}

.nav-entry-li7,
.nav-entry-li12 {
    background-color: #f1f8ff;
}

.nav-entry-li8,
.nav-entry-li13 {
    background-color: #f2f4ff;
}

.nav-entry-li9,
.nav-entry-li14 {
    background-color: #ecfcf9;
}

.nav-entry-li10,
.nav-entry-li15 {
    background-color: #fff8f3;
}

.nav-entry-li15 {
    border-radius: 0 0 8px 0;
}

.nav-entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    color: #fff;
}

.nav-entry [class^="nav-entry-li"]:nth-child(n+6) a {
    color: #2d2824;
}

/* 销售模块 */
.sales {
    display: flex;
    width: 100%;
}

.salse-hd {
    display: flex;
    flex: 1;
}

/* 特价直播 */
.sales-tejia {
    height: 148px;
    flex: 50%;
    background-color: #fff;
    border-radius: 8px;
    margin: -7px 16px;
}

.tejia-hd {
    position: relative;
}

.tejia-hd-zuo {
    display: inline-block;
    width: 73px;
    height: 20px;
    background: url(../images/salezb.png) no-repeat;
    background-size: 73px auto;
    margin: 6px;
}

.tejia-hd-you {
    position: absolute;
    top: 8px;
    right: 9px;
    display: inline-block;
    width: 84px;
    height: 18px;
    color: #ff4607;
    font-size: 12px;
    background-color: #ffebe3;
    padding: 1px 4px;
    border-radius: 2px;
}

.tejia-bd a {
    display: inline-block;
    width: 230px;
    height: 84px;
    border-radius: 8px;
    margin-left: 6px;
    background: url(../upload/02018120008mxmb3g3DDF_D_280_280_R5.jpg) no-repeat center;
    background-size: 238px auto;
}

.tejia-ft a {
    color: #f06500;
    margin: 5px;
    font-weight: 700;
}

.tejia-ft a:nth-child(2) {
    margin: -9px;
}

/* 携程精选榜 */
.sales-rank {
    flex: 50%;
    height: 148px;
    background-color: #fff;
    border-radius: 8px;
    margin: -7px 3px;
}

.rank-hd {
    position: relative;
}

.rank-hd-zuo {
    display: block;
    width: 73px;
    height: 20px;
    background: url(../upload/0zc6g120008g0hcb587E5.png) no-repeat;
    background-size: 73px auto;
    margin: 8px;
}

.rank-hd-you {
    position: absolute;
    top: 1px;
    right: 9px;
    display: inline-block;
    width: 61px;
    height: 18px;
    color: #ae6e15;
    font-size: 12px;
    background-color: #fdefd2;
    padding: 1px 4px;
    border-radius: 2px;
}

.rank-bd {
    display: flex;
}

.rank-bd-zuo {
    position: relative;
    overflow: hidden;
    flex: 50%;
}

.rank-bd .tu {

    display: inline-block;
    width: 117px;
    height: 84px;
    border-radius: 8px;
}

.rank-bd-zuo .tu {
    background: url(../upload/zuo.jpg) no-repeat center;
    background-size: 117px auto;
    margin: 0 6px;
}

.rank-bd-you {
    overflow: hidden;
    position: relative;
}

.rank-bd-you .tu {
    background: url(../upload/you.webp) center;
    background-size: 117px auto;
}

.rank-bd .tubiao {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 30px;
    height: 16px;
    color: #663c00;
    font-size: 12px;
    background-color: #dab996;
    border-radius: 8px 0 8px 0;
}

.rank-bd .rank-bd-zuo .tubiao {
    left: 6px;
}

.text {
    display: block;
    font-size: 12px;
}

/* 底部图片 */
.bottom-img a {
    display: block;
    height: 129px;
    width: 518px;
    background: url(../upload/bottom.jpg)no-repeat;
    background-size: 518px auto;
    margin: 20px 18px;
    border-radius: 8px;
}

/* 底部工具模块 */
.tool-group .link,
.download {
    box-sizing: border-box;
    display: inline-block;
    width: 104px;
    height: 34px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    color: #000;
}

.link {
    margin: 7px 153px 14px 100px;
}

.tool-text a {
    display: inline-block;
    color: #666;
    /* padding: 10px; */
    width: 96px;
    height: 15px;
}

.tool-text a:nth-child(2) {
    margin-left: 12px;
}

.tool-text .zuo {
    position: relative;
    margin-top: 9px;
    margin-left: 200px;
}

.tool-text .zuo::after {
    position: absolute;
    top: 2px;
    left: 85px;
    content: "";
    background-color: #e0e0e0;
    width: 1px;
    height: 18px;
}

.tool-text p {
    color: #666;
    margin-left: 171px;
    font-size: 13px;
}

/* 底部导航栏 */
.bottom-nav {
    display: flex;
    height: 49px;
    background-color: #fff;
}

.bottom-nav li {
    flex: 1;
}

.bottom-nav a {
    display: flex;
    /* 将主轴设置成y轴 */
    flex-direction: column;
    /* 侧轴居中对齐 单行的· */
    align-items: center;
    font-size: 12px;
    color: #666;
}

/* 利用属性选择器 */
.bottom-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background: url(../images/tabbar.png) no-repeat 0 0;
    background-size: 32px auto;
}

.bottom-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}

.bottom-nav li .local-nav-icon-icon3 {
    background-position: 0 -64px;
}

.bottom-nav li .local-nav-icon-icon4 {
    background-position: 0 -96px;
}

.bottom-nav li .local-nav-icon-icon5 {
    background-position: 0 -128px;
}