當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

使用 flex布局制作携程网首页

發布時間：2023/12/19 综合教程 43 生活家

生活随笔收集整理的這篇文章主要介紹了使用 flex布局制作携程网首页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 技術選型

2. 搭建相關文件夾結構

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

4. 常用初始化樣式

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

index.css

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

index.html

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

</div>

6. 搜索模塊劃分以及 user模塊制作

index.html

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

index.css

/*搜索模塊*/
.search{
    flex: 1;
    /*background-color: red;*/
}
/*用戶模塊*/
.user {
    background-color: purple;
     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;
     23px;
    height: 23px;
    display: block;
    margin: 5px auto 0;
}

7. 搜索模塊制作

index.html

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

index.css

/*使用 css3 盒子模型來做*/
div {
    box-sizing: border-box;
}
/*search-index模塊*/
.search-index{
    /*固定定位跟父級沒有關系，它以屏幕為準*/
   position: fixed;
    top: 0;
    left: 50%;
    /*固定的盒子應該有寬度*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
     100%;
    min- 320px;
    max- 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;
     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 {
     100%;
}

9. local-nav布局

index.html

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

index.css

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{
     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{
     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"]{
     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{
    /* 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{
         600px;
        height: 200px;
        background:-webkit-linear-gradient(left,red,blue);
    }
</style>
<body>
<div></div>
</body>

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

從左到右的漸變：
background:-webkit-linear-gradient(left,red,blue);

不加方向默認是從上往下的方向:
background:-webkit-linear-gradient(red,blue);

左上角到右下角的漸變：
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{
    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;
     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;
     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 {
     100%;
}

總結

以上是生活随笔為你收集整理的使用 flex布局制作携程网首页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SAP Spartacus Consen
下一篇： SAP Spartacus 标准类型的字

综合教程

使用 flex布局 制作携程网首页

1. 技術選型

2. 搭建相關文件夾結構

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

4. 常用初始化樣式

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

6. 搜索模塊劃分以及 user模塊制作

7. 搜索模塊制作

8.焦點圖 focus 的制作

9. local-nav布局

10. 常見flex 布局思路

11. local-nav 內容制作

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

13. nav 外觀布局

14. nav 內容制作

15. 背景線性漸變

16. 設置nav 內容背景漸變

17. subnav-entry 模塊制作

18. 熱門活動模塊制作

19. 獲取更多模塊制作

20. sales-bd模塊內容制作

總結

使用 flex布局制作携程网首页