关于flex:携程网flex布局

根本文件夹

设置视口标签及引入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…

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据