携程网（flex布局）

基本文件夹

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

注意:css初始化样式必须位于css首页样式后面，否则容易出bug

body设置常用样式

header部分

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

焦点图

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

局部导航

主导航部分

html

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技术选型

测导航栏部分

做法：与局部导航一致，利用弹性盒属性

销售模块

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

渐变色

源码

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

携程网（flex布局）

基本文件夹

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

body设置常用样式

header部分

焦点图

局部导航

主导航部分

测导航栏部分

销售模块

渐变色

源码

你可能感兴趣的:(flex)