使用 flex佈局 製做攜程網首頁

時間  2020-12-14
標籤 javascript css html java css3 web 瀏覽器 佈局 flex url 欄目 Flex 简体版
原文   原文鏈接

在這裏插入圖片描述
在這裏插入圖片描述

1. 技術選型

在這裏插入圖片描述

2. 搭建相關文件夾結構

在這裏插入圖片描述

3. 引入視口標籤以及初始化樣式

在這裏插入圖片描述

4. 經常使用初始化樣式

在這裏插入圖片描述

5. 首頁佈局分析以及搜索模塊佈局

index.cssjavascript

/*搜索模塊*/
.search-index{
    /*固定定位跟父級沒有關係，它以屏幕爲準*/
   position: fixed;
    top: 0;
    left: 50%;
    /*固定的盒子應該有寬度*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    height: 44px;
    background-color: pink;
}

index.htmlcss

<!--頂部搜索-->
<div class="search-index">

</div>

在這裏插入圖片描述

6. 搜索模塊劃分以及 user模塊製做

index.htmlhtml

<div class="search-index">
    <div class="search"></div>
    <a class="user">我 的</a>
</div>

index.cssjava

/*搜索模塊*/
.search{
    flex: 1;
    /*background-color: red;*/
}
/*用戶模塊*/
.user {
    background-color: purple;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 12px;
    color: #2eaae0;
}
/*用戶頭像*/
.user::before{
    content: "";
    background: url("../images/sprite.png") no-repeat -59px -194px;
    background-size: 104px auto;
    width: 23px;
    height: 23px;
    display: block;
    margin: 5px auto 0;
}

在這裏插入圖片描述

7. 搜索模塊製做

index.htmlcss3

<div class="search-index">
    <div class="search">搜索:目的地/酒店/景點/航班號</div>
    <a class="user">我 的</a>
</div>

index.cssweb

/*使用 css3 盒子模型來作*/
div {
    box-sizing: border-box;
}
/*search-index模塊*/
.search-index{
    /*固定定位跟父級沒有關係，它以屏幕爲準*/
   position: fixed;
    top: 0;
    left: 50%;
    /*固定的盒子應該有寬度*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    height: 44px;
    /*background-color: pink;*/
    background-color: #F6F6F6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    display: flex;
}

/*search模塊*/
.search{
    flex: 1;
    /*background-color: red;*/
    height: 26px;
    line-height: 24px;
    font-size: 12px;
    border-radius: 5px;
    margin: 7px 10px;
    padding-left: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0, .2);
    position: relative;
}

.search::before{
    content: "";
    /*display: block;*/
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url("../images/sprite.png") no-repeat -59px -279px;
    background-size: 104px auto;
}

在這裏插入圖片描述

8.焦點圖 focus 的製做

index.html瀏覽器

<!--焦點圖模塊-->
<div class="focus">
    <img src="upload/focus.jpg">
</div>

index.css佈局

/*焦點圖模塊*/
.focus {
    padding-top: 44px;
}
.focus img {
    width: 100%;
}

在這裏插入圖片描述

9. local-nav佈局

index.htmlflex

<!--局部導航欄-->
<div class="local-nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</div>

index.cssurl

li {
    margin: 0;
    padding: 0;
    list-style: none;
}
/*局部導航欄模塊*/
.local-nav{
    background-color: #fff;
    height: 64px;
    border-radius: 5px;
    margin: 3px 4px;
    display: flex;
}
.local-nav li {
    flex: 1;
}

在這裏插入圖片描述

10. 常見flex 佈局思路

在這裏插入圖片描述
栗子：
第一步：默認主軸是 x 軸

index.html

<li>
        <a>
            <span class="local-nav-icon"></span>
            <span>景點·玩樂</span>
        </a>
    </li>

index.css

.local-nav a {
    display: flex;
}
.local-nav-icon{
    width: 32px;
    height: 32px;
    background-color: pink;
}

在這裏插入圖片描述
第二步：把主軸設置爲 y 軸

.local-nav a {
    display: flex;
    flex-direction: column;
}

在這裏插入圖片描述
第三步：把側軸設置爲居中對齊

.local-nav a {
    display: flex;
    flex-direction: column;
    /*這裏是單行的，沒有出現換行的狀況，因此使用 align-items*/
    align-items: center;
}

在這裏插入圖片描述

11. local-nav 內容製做

index.html

<!--局部導航欄-->
<div class="local-nav">
    <li>
        <a title="景點·玩樂">
            <span class="local-nav-icon"></span>
            <span>景點·玩樂</span>
        </a>
    </li>
    <li>
        <a title="景點·玩樂">
            <span class="local-nav-icon"></span>
            <span>景點·玩樂</span>
        </a>
    </li>
    <li>
        <a title="景點·玩樂">
            <span class="local-nav-icon"></span>
            <span>景點·玩樂</span>
        </a>
    </li>
    <li>
        <a title="景點·玩樂">
            <span class="local-nav-icon"></span>
            <span>景點·玩樂</span>
        </a>
    </li>
    <li>
        <a title="景點·玩樂">
            <span class="local-nav-icon"></span>
            <span>景點·玩樂</span>
        </a>
    </li>
</div>

index.css

/*local-nav內容製做*/
.local-nav a {
    display: flex;
    flex-direction: column;
    /*這裏是單行的，沒有出現換行的狀況，因此使用 align-items*/
    align-items: center;
    font-size: 12px;
}
.local-nav-icon{
    width: 32px;
    height: 32px;
    /*background-color: pink;*/
    background: url("../images/localnav_bg.png") no-repeat 0 0;
    background-size: 32px auto;
}

在這裏插入圖片描述

12. 利用屬性選擇器更換背景圖片

index.html

<div class="local-nav">
    <li>
        <a title="景點·玩樂">
            <span class="local-nav-icon-icon1"></span>
            <span>景點·玩樂</span>
        </a>
    </li>
    <li>
        <a title="景點·玩樂">
            <span class="local-nav-icon-icon2"></span>
            <span>景點·玩樂</span>
        </a>
    </li>
    <li>
        <a title="景點·玩樂">
            <span class="local-nav-icon-icon3"></span>
            <span>景點·玩樂</span>
        </a>
    </li>
    <li>
        <a title="景點·玩樂">
            <span class="local-nav-icon-icon4"></span>
            <span>景點·玩樂</span>
        </a>
    </li>
    <li>
        <a title="景點·玩樂">
            <span class="local-nav-icon-icon5"></span>
            <span>景點·玩樂</span>
        </a>
    </li>
</div>

index.css

.local-nav li [class^="local-nav-icon"]{
    width: 32px;
    height: 32px;
    /*background-color: pink;*/
    background: url("../images/localnav_bg.png") no-repeat 0 0;
    background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2{
    background-position: 0 -32px;
}
.local-nav li .local-nav-icon-icon3{
    background-position: 0 -64px;
}
.local-nav li .local-nav-icon-icon4{
    background-position: 0 -96px;
}
.local-nav li .local-nav-icon-icon5{
    background-position: 0 -128px;
}

在這裏插入圖片描述

13. nav 外觀佈局

index.html

<!--菜單欄部分-->
<nav>
    <div class="nav-common">
        <div class="nav-items">a</div>
        <div class="nav-items">b</div>
        <div class="nav-items">c</div>
    </div>
    <div class="nav-common">2</div>
    <div class="nav-common">3</div>
</nav>

index.css

/*菜單欄部分*/
nav {
    border-radius: 8px;
    margin: 0 4px 3px;
}
nav .nav-common{
    /*width: 100%;*/
    height: 88px;
    background-color: pink;
    border-radius: 3px;
    display: flex;
}
/* -n+2就是選擇前面兩個元素 */
nav .nav-common:nth-child(2){
    margin: 3px 0;
}

/*.nav-items部分*/
.nav-items{
    flex: 1;
}
.nav-items:nth-child(-n+2){
    border-right: 1px solid #ffffff;
}

在這裏插入圖片描述

14. nav 內容製做

index.html

<!--菜單欄部分-->
<nav>
    <div class="nav-common">
        <div class="nav-items">
            <a>海外酒店</a>
        </div>
        <div class="nav-items">
            <a>海外酒店</a>
            <a>特價酒店</a>
        </div>
        <div class="nav-items">
            <a>海外酒店</a>
            <a>特價酒店</a>
        </div>
    </div>
    <div class="nav-common">
        <div class="nav-items">
            <a>海外酒店</a>
        </div>
        <div class="nav-items">
            <a>海外酒店</a>
            <a>特價酒店</a>
        </div>
        <div class="nav-items">
            <a>海外酒店</a>
            <a>特價酒店</a>
        </div>
    </div>
    <div class="nav-common">
        <div class="nav-items">
            <a>海外酒店</a>
        </div>
        <div class="nav-items">
            <a>海外酒店</a>
            <a>特價酒店</a>
        </div>
        <div class="nav-items">
            <a>海外酒店</a>
            <a>特價酒店</a>
        </div>
    </div>
</nav>

index.css

/*.nav-items部分*/
.nav-items{
    flex: 1;
    display: flex;
    /*這兩個是不衝突的*/
    flex-direction: column;
}
.nav-items a {
    flex: 1;
    text-align: center;
    line-height: 44px;
    color: #ffffff;
}
.nav-common .nav-items:nth-child(1) a{
    border-bottom: 0;
    background: url("../images/hotel.png") no-repeat bottom center;
    background-size: 121px auto;
}
.nav-items a:nth-child(1){
    border-bottom: 1px solid #ffffff;
}

在這裏插入圖片描述

15. 背景線性漸變

在這裏插入圖片描述

在這裏插入圖片描述

栗子：

<style>
    div{
        width: 600px;
        height: 200px;
        background:-webkit-linear-gradient(left,red,blue);
    }
</style>
<body>
<div></div>
</body>

注意： 背景漸變必須添加瀏覽器私有前綴

  1. 從左到右的漸變：
    background:-webkit-linear-gradient(left,red,blue);
    在這裏插入圖片描述

  2. 不加方向 默認是從上往下的方向:
    background:-webkit-linear-gradient(red,blue);
    在這裏插入圖片描述

  3. 左上角到右下角的漸變：
    background:-webkit-linear-gradient(top left,red,blue);
    在這裏插入圖片描述

16. 設置nav 內容背景漸變

index.css

/*背景漸變*/
.nav-common:nth-child(1) {
    background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}

.nav-common:nth-child(2) {
    background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}

.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}

在這裏插入圖片描述

17. subnav-entry 模塊製做

index.html

<div class="subnav-entry">
    <li>
        <a>
            <span class="subnav-entry-icon"></span>
            <span>自由行</span>
        </a>
    </li>
    <li>
        <a>
            <span class="subnav-entry-icon"></span>
            <span>自由行</span>
        </a>
    </li>
    <li>
        <a>
            <span class="subnav-entry-icon"></span>
            <span>自由行</span>
        </a>
    </li>

    <li>
        <a>
            <span class="subnav-entry-icon"></span>
            <span>自由行</span>
        </a>
    </li>

    <li>
        <a>
            <span class="subnav-entry-icon"></span>
            <span>自由行</span>
        </a>
    </li>

    <li>
        <a>
            <span class="subnav-entry-icon"></span>
            <span>自由行</span>
        </a>
    </li>
    <li>
        <a>
            <span class="subnav-entry-icon"></span>
            <span>自由行</span>
        </a>
    </li>

    <li>
        <a>
            <span class="subnav-entry-icon"></span>
            <span>自由行</span>
        </a>
    </li>

    <li>
        <a>
            <span class="subnav-entry-icon"></span>
            <span>自由行</span>
        </a>
    </li>

    <li>
        <a>
            <span class="subnav-entry-icon"></span>
            <span>自由行</span>
        </a>
    </li>

</div>

index.css

/*subnav-entry模塊製做*/
.subnav-entry{
    background: #ffffff;
    margin: 0 4px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;

}
.subnav-entry li {
   flex: 20%;
}
.subnav-entry li a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subnav-entry-icon{
    width:28px;
    height: 28px;
    background-color: pink;
    background: url("../images/subnav-bg.png") no-repeat;
    background-size: 28px auto;
    margin-top: 4px;

}

在這裏插入圖片描述

18. 熱門活動模塊製做

index.html

<!--銷售模塊-->
<div class="sales-box">
    <div class="sales-hd">
        <h2>熱門活動</h2>
        <a>更多</a>
    </div>
</div>

index.css

/*銷售模塊*/
.sales-box {
    border-top: 1px solid #bbb;
    background-color: #fff;
    margin: 4px;
}
.sales-hd {
    height: 44px;
    border-bottom: 1px solid #ccc;
    position: relative;
}
.sales-hd h2 {
    text-indent: -9999px;
    position: relative;
}
.sales-hd h2::after{
    content: "";
    position: absolute;
    top: 5px;
    left: 8px;
    width: 79px;
    height: 15px;
    /*background-color: pink;*/
    background: url("../images/hot.png") no-repeat 0 -20px;
    background-size: 79px auto;
}

在這裏插入圖片描述

19. 獲取更多模塊製做

index.html

<!--銷售模塊-->
<div class="sales-box">
    <div class="sales-hd">
        <h2>熱門活動</h2>
        <a class="more">獲取更多信息</a>
    </div>
</div>

index.css

/*獲取更多信息*/
.more {
    position: absolute;
    right: 5px;
    top: 0px;
    background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}

.more::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

在這裏插入圖片描述

20. sales-bd模塊內容製做

index.html

<div class="sales-bd">
        <div class="row">
            <a href="#">
                <img src="upload/pic1.jpg" alt="">
            </a>
            <a href="#">
                <img src="upload/pic2.jpg" alt="">

            </a>
        </div>
        <div class="row">
            <a href="#">
                <img src="upload/pic3.jpg" alt="">
            </a>
            <a href="#">
                <img src="upload/pic4.jpg" alt="">

            </a>
        </div>
        <div class="row">
            <a href="#">
                <img src="upload/pic5.jpg" alt="">
            </a>
            <a href="#">
                <img src="upload/pic6.jpg" alt="">

            </a>
        </div>

    </div>

index.css

/*sales-bd模塊*/
.row {
    display: flex;
}
.row a {
    flex: 1;
    border-bottom: 1px solid #eee;
}
.row a:nth-child(1) {
    border-right: 1px solid #eee;
}
.row a img {
    width: 100%;
}

在這裏插入圖片描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程