乐趣区

关于flex:携程网flex布局

jiezi

根本文件夹

设置视口标签及引入 css 初始化款式

留神:css 初始化款式必须位于 css 首页款式前面，否则容易出 bug

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 引入视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 css 首页款式及 css 初始化款式 -->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <title> 携程网 </title>
</head>

<body>

</body>

</html>

body 设置罕用款式

header 局部


注意事项：采纳固定定位，肯定要给最大宽度及最小宽度，利用弹性盒技术及如何让盒子居中对齐 css3 伪元素的办法

焦点图

思路：容器外面放图像 图像的宽度设置为 100%

部分导航

主导航局部

html

<div class="nav">
        <div class="nav_commen">
            <div class="nav_items">
                <a href="#"> 海内酒店 </a>
            </div>
            <div class="nav_items">
                <a href="#"> 海内酒店 </a>
                <a href="#"> 特价酒店 </a>
            </div>
            <div class="nav_items">
                <a href="#"> 海内酒店 </a>
                <a href="#"> 特价酒店 </a>
            </div>
        </div>
        <div class="nav_commen">
            <div class="nav_items">
                <a href="#"> 海内酒店 </a>
            </div>
            <div class="nav_items">
                <a href="#"> 海内酒店 </a>
                <a href="#"> 特价酒店 </a>
            </div>
            <div class="nav_items">
                <a href="#"> 海内酒店 </a>
                <a href="#"> 特价酒店 </a>
            </div>
        </div>
        <div class="nav_commen">
            <div class="nav_items">
                <a href="#"> 海内酒店 </a>
            </div>
            <div class="nav_items">
                <a href="#"> 海内酒店 </a>
                <a href="#"> 特价酒店 </a>
            </div>
            <div class="nav_items">
                <a href="#"> 海内酒店 </a>
                <a href="#"> 特价酒店 </a>
            </div>
        </div>

css

  /* 部分导航局部 */
        
        .local-nav {
            display: flex;
            height: 64px;
            background-color: #fff;
            margin: 5px;
            border-radius: 8px;
        }
        
        .local-nav li {flex: 1;}
        
        .local-nav a {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
        }
        
        span[class^='local-nav-icon'] {
            width: 32px;
            height: 32px;
            background: url(../img/localnav_bg.png) no-repeat;
            background-size: 32px auto;
            margin: 5px;
        }
        
        span.local-nav-icon-icon1 {background-position: 0px 0px;}
        
        span.local-nav-icon-icon2 {background-position: 0px -32px;}
        
        span.local-nav-icon-icon3 {background-position: 0px -64px;}
        
        span.local-nav-icon-icon4 {background-position: 0px -96px;}
        
        span.local-nav-icon-icon5 {background-position: 0px -128px;}
        /* 主导航局部 */
        
        .nav {
            overflow: hidden;
            border-radius: 8px;
        }
        
        div.nav_commen {
            display: flex;
            height: 88px;
            background-color: pink;
        }
        
        .nav_commen:nth-of-type(1) {background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
        }
        
        .nav_commen:nth-of-type(2) {background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
        }
        
        .nav_commen:nth-of-type(3) {background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
        }
        
        .nav_commen .nav_items:nth-of-type(1) a {
            border: none;
            background: url(../img/hotel.png) no-repeat bottom center;
            background-size: 121px auto;
        }
        
        .nav_items {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .nav_items a:nth-of-type(1) {border-bottom: 1px solid #fff;}
        
        .nav_items a {
            flex: 1;
            text-align: center;
            line-height: 44px;
            font-size: 14px;
            color: #fff;
            text-shadow: 1px 1px rgba(0, 0, 0, .2);
        }
        
        .nav_items:nth-of-type(-n+2) {border-right: 1px solid white;}
        
        .nav_commen:nth-of-type(2) {margin: 2px 0px;}

留神: 多应用 flex 技术选型

测导航栏局部 

 <!-- 侧导航栏局部 -->
            <div class="subnav-entry">
                <li>
                    <a href="#">
                        <span class="subnav-icon"></span>
                        <span> 电话费 </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="subnav-icon"></span>
                        <span> 电话费 </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="subnav-icon"></span>
                        <span> 电话费 </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="subnav-icon"></span>
                        <span> 电话费 </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="subnav-icon"></span>
                        <span> 电话费 </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="subnav-icon"></span>
                        <span> 电话费 </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="subnav-icon"></span>
                        <span> 电话费 </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="subnav-icon"></span>
                        <span> 电话费 </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="subnav-icon"></span>
                        <span> 电话费 </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="subnav-icon"></span>
                        <span> 电话费 </span>
                    </a>
                </li>
            </div>

做法：与部分导航统一，利用弹性盒属性

销售模块

多利用伪元素制作图标即可

渐变色

源码

源码：https://pan.baidu.com/s/1h3z4…

退出移动版