首頁 > 博客列表 > 移動商城首頁的頁眉和頁腳的布局和flex項(xiàng)目三個(gè)屬性

博主信息

博文 70

粉絲 4

評論 5

訪問量 122085

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

移動商城首頁的頁眉和頁腳的布局

先來演示一下flex項(xiàng)目三個(gè)屬性

1.項(xiàng)目的縮放比例與基準(zhǔn)寬度

元素	屬性	含義
flex	0 1 auto / initial	默認(rèn)的，禁止放大，允許收縮，寬度自動
flex	1 1 auto / auto	允許放大和收縮
flex	0 0 auto / none	禁止放大和收縮/pc布局

①flex 0 1 auto / initial 演示

flex項(xiàng)目flex 0 1 auto屬性默認(rèn)的就是可以禁止放大，允許收縮，寬度自動，動態(tài)圖我們可以看出效果

②flex 1 1 auto / auto 演示

flex項(xiàng)目flex 1 1 auto屬性,在動態(tài)圖里我們可以看出，項(xiàng)目在里面允許被放大，項(xiàng)目會隨著頁面的寬度大小而變化。

③flex 0 0 auto / none 演示

flex項(xiàng)目flex 0 0 auto屬性，禁止放大，禁止收縮，不會隨著頁面的變化而變化，只會固定自己的值

2.單個(gè)項(xiàng)目在交叉軸上的對齊方式

元素	屬性	含義
align-self	flex-start	起始線
align-self	flex-end	終止線
align-self	stretch	默認(rèn)拉伸
align-self	center	居中

①align-self flex-start演示

默認(rèn)起始線就不說了，就是默認(rèn)的樣式，跳過到第二個(gè)對齊方式。

②align-self flex-end演示

align-self flex-end參數(shù)，可以調(diào)動選擇好的單個(gè)項(xiàng)目移動到交叉軸終止線上。

③align-self stretch演示

這個(gè)原理也是一樣。都是默認(rèn)拉伸，跳過到第四個(gè)對齊方式

④align-self center演示

align-self center參數(shù)，可以把選擇到的項(xiàng)目在垂直線上居中，效果非常的好。

3.項(xiàng)目在主軸上的排列順序

元素	屬性	含義
order	0-100數(shù)值	數(shù)值越大排列在越后，數(shù)值越小排列在越前

①order演示

這里我們可以看到，顏色區(qū)分了項(xiàng)目，然后再代碼塊中給每個(gè)項(xiàng)目都設(shè)置了值，項(xiàng)目數(shù)值越大排列在越后，數(shù)值越小排列在越前。

代碼塊

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex項(xiàng)目的三個(gè)屬性</title>
    <style type="text/css">
      * {
        box-sizing: border-box;
      }
      #box1 {
        border: 1px solid;
        background: lightgreen;
        /* width: 30em; */
        height: 30em;
      }
      #box1 .box {
        border: 1px solid;
        background: lightblue;
        width: 10em;
        height: 10em;
      }
      #box1 {
        display: flex;
      }
      /* .box {
              默認(rèn)的，禁止放大，允許收縮，寬度自動
            flex: 0 1 auto;
          } */
      /* .box {
            允許放大，允許收縮，寬度自動
            flex: 1 1 auto;
          } */
      /* .box {
            禁止放大 禁止收縮 寬度自動
            flex: 0 0 auto;
          } */
      /* .box:nth-of-type(3) {
          單個(gè)項(xiàng)目垂直方向居中
        align-self: center;
      } */
      /* 項(xiàng)目在主軸上的排列順序 order */
      /* order數(shù)值越大排在越后面， order數(shù)值越小排列在越前 */
      .box:nth-of-type(1) {
        order: 100;
      }
      .box:nth-of-type(2) {
        order: 2;
      }
      .box:nth-of-type(3) {
        order: 0;
      }
    </style>
  </head>
  <body>
    <div id="box1">
      <div class="box" style="background: red">項(xiàng)目1</div>
      <div class="box" style="background: lightpink">項(xiàng)目2</div>
      <div class="box">項(xiàng)目3</div>
      <!-- <div class="box">項(xiàng)目4</div>
      <div class="box">項(xiàng)目5</div>
      <div class="box">項(xiàng)目6</div> -->
    </div>
  </body>
</html>

移動商城首頁的頁眉和頁腳的布局

1.先定位一個(gè)網(wǎng)頁頁面布局然后建立一個(gè)css文件給網(wǎng)頁頁面初始化并且用到媒體檢查器設(shè)置好文字大小。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #7b7b7b;
}
li {
  list-style: none;
}
html {
  font-size: 10px;
}
/* 設(shè)置媒體查詢改變字體大小 */
@media screen and (min-width: 480px) {
  html {
    font-size: 12px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 16px;
  }
}

2.接下來用絕對定位和固定定位，定位好頁眉，主體，頁腳三個(gè)部分

/* 初始化樣式表 */
@import url(lnitialize.css);
/* 網(wǎng)頁頁眉 */
.header {
  background: #ce001f;
  color: #fff;
  height: 4.4rem;
  /* 采用固定定位，把頁眉定位到頂端 */
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  font-size: 1.4rem;
}
/* 網(wǎng)頁主體 */
.main {
  background: #fff;
  font-size: 1.4rem;
  /* 采用絕對定位定位到中間部位 */
  position: absolute;
  top: 4.4rem;
  right: 0;
  bottom: 4.4rem;
  left: 0;
}
/* 網(wǎng)頁頁腳 */
.footer {
  background: #ccc;
  color: #fff;
  height: 4.4rem;
  font-size: 1.4rem;
  /* 采用固定定位，定位到底部 */
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}

3.頁眉設(shè)置樣式，采用字體圖標(biāo)和flex布局

這是設(shè)置html頁眉的字體圖標(biāo)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>頁眉</title>
    <link
      rel="stylesheet"
      href="style/css/my-key tubiao/font123/iconfont.css"
    />
    <style type="text/css">
      @import url(style/css/index.css);
      @import url(style/css/header.css);
    </style>
  </head>
  <body>
    <!-- 網(wǎng)頁頁眉 -->
    <div class="header">
      <!-- 字體圖標(biāo)菜單 -->
      <div class="menu iconfont icon-category"></div>
      <!-- logo和放大鏡和搜索框 -->
      <div class="search">
        <div class="logo">JD</div>
        <div class="glass iconfont icon-search"></div>
        <input type="text" class="words" value="立式空調(diào)柜" />
      </div>
      <!-- 登錄按鈕 -->
      <div class="login"><a href="" class="login">登錄</a></div>
    </div>
    <!-- 網(wǎng)頁主體 -->
    <div class="main">main</div>
    <!-- 網(wǎng)頁頁腳 -->
    <div class="footer">footer</div>
  </body>
</html>

這是頁眉的css樣式

/* 獲取到頁眉的類，可以模塊化選擇子元素 */
.header {
  display: flex;
  align-items: center;
}
/* 菜單和搜索框還有登錄按鈕分區(qū)域 */
/* 菜單一份 */
.header .menu {
  flex: 1;
  text-align: center;
  font-size: 3rem;
}
/* 設(shè)置菜單的觸摸樣式 */
.header .menu:hover {
  cursor: pointer;
}
/* 搜索框六份 */
.header .search {
  flex: 6;
  display: flex;
  /* 設(shè)置背景顏色為白色 */
  background: rgb(255, 255, 255);
  /* 定義背景圓角 */
  border-radius: 3rem;
  /* 設(shè)置內(nèi)邊距 */
  padding: 0.3rem;
}
/* 設(shè)置logo樣式 */
.header .search .logo {
  color: #e43130;
  font-size: 2rem;
  flex: 0 1 4rem;
  text-align: center;
  /* 設(shè)置字體型號 */
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
/* 設(shè)置放大鏡樣式 */
.header .search .glass {
  color: #ccc;
  flex: 0 1 4rem;
  font-size: 2rem;
  /* 設(shè)置左邊框 */
  border-left: 1px solid;
  text-align: center;
}
/* 搜索框樣式 */
.header .search .words {
  border: none;
  outline: none;
  color: #ccc;
  flex: 0 0 auto;
}
/* 登錄1份 */
.header .login {
  flex: 1;
  /* 設(shè)置字體顏色 */
  color: rgb(255, 255, 255);
  /* 設(shè)置居中 */
  text-align: center;
  /* 設(shè)置文本加粗 */
  font-weight: 600;

設(shè)置頁腳樣式

這是設(shè)置html頁腳的字體圖標(biāo)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>頁腳</title>
    <link
      rel="stylesheet"
      href="style/css/my-key tubiao/font123/iconfont.css"
    />
    <link rel="stylesheet" href="style/css/my-key tubiao/iconfont.css" />
    <style type="text/css">
      @import url(style/css/index.css);
      @import url(style/css/header.css);
      @import url(style/css/footer.css);
    </style>
  </head>
  <body>
    <!-- 網(wǎng)頁頁眉 -->
    <div class="header">
      <!-- 字體圖標(biāo)菜單 -->
      <div class="menu iconfont icon-category"></div>
      <!-- logo和放大鏡和搜索框 -->
      <div class="search">
        <div class="logo">JD</div>
        <div class="glass iconfont icon-search"></div>
        <input type="text" class="words" value="立式空調(diào)柜" />
      </div>
      <!-- 登錄按鈕 -->
      <div class="login"><a href="" class="login">登錄</a></div>
    </div>
    <!-- 網(wǎng)頁主體 -->
    <div class="main">main</div>
    <!-- 網(wǎng)頁頁腳 -->
    <div class="footer">
      <div>
        <div class="iconfont icon-smile"></div>
        <span>首頁</span>
      </div>
      <div>
        <div class="iconfont icon-all-fill"></div>
        <span>分類</span>
      </div>
      <div>
        <div class="iconfont icon-gift"></div>
        <span>驚喜</span>
      </div>
      <div>
        <div class="iconfont icon-cart-Empty"></div>
        <span>購物車</span>
      </div>
      <div>
        <div class="iconfont icon-account-fill"></div>
        <span>未登錄</span>
      </div>
    </div>
  </body>
</html>

這是頁腳的css樣式

.footer {
  display: flex;
  background: rgb(250, 250, 250);
  color: #666;
  flex: 1 1 auto;
  /* 設(shè)置再主軸方向分散對齊 */
  justify-content: space-around;
  /* 設(shè)置交叉軸居中對齊 */
  align-items: center;
}
/* 設(shè)置div子元素 */
.footer > div {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
/* 設(shè)置首頁圖標(biāo)樣式 */
.footer .iconfont {
  font-size: 2.5rem;
}
/* 設(shè)置字體大小 */
.footer div span {
  font-size: 1rem;
}

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

JavaScript:時(shí)間對象，實(shí)例演示右下角廣告圖

2021-04-23 00:09:02

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

移動商城首頁的頁眉和頁腳的布局

先來演示一下flex項(xiàng)目三個(gè)屬性

1.項(xiàng)目的縮放比例與基準(zhǔn)寬度

①flex 0 1 auto / initial 演示

②flex 1 1 auto / auto 演示

③flex 0 0 auto / none 演示

2.單個(gè)項(xiàng)目在交叉軸上的對齊方式

①align-self flex-start演示

②align-self flex-end演示

③align-self stretch演示

④align-self center演示

3.項(xiàng)目在主軸上的排列順序

①order演示

代碼塊

移動商城首頁的頁眉和頁腳的布局

1.先定位一個(gè)網(wǎng)頁頁面布局然后建立一個(gè)css文件給網(wǎng)頁頁面初始化并且用到媒體檢查器設(shè)置好文字大小。

2.接下來用絕對定位和固定定位，定位好頁眉，主體，頁腳三個(gè)部分

3.頁眉設(shè)置樣式，采用字體圖標(biāo)和flex布局

這是設(shè)置html頁眉的字體圖標(biāo)

這是頁眉的css樣式

設(shè)置頁腳樣式

這是設(shè)置html頁腳的字體圖標(biāo)

這是頁腳的css樣式

1.先定位一個(gè)網(wǎng)頁頁面布局然后建立一個(gè)css文件給網(wǎng)頁頁面初始化并且用到媒體檢查器設(shè)置好文字大小。

2.接下來用絕對定位和固定定位，定位好頁眉，主體，頁腳三個(gè)部分