国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Flexbox響應(yīng)式網(wǎng)頁布局 - W3Schools視頻02

codecraft / 3463人閱讀

摘要：今日繼續(xù)響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)，采用方案。有經(jīng)驗(yàn)的前端或多或少已經(jīng)接觸過這個(gè)網(wǎng)站，因?yàn)樗?jīng)常出現(xiàn)在搜索結(jié)果的前幾項(xiàng)。因此我想做一系列的影片專門介紹這些。

今日繼續(xù)W3Schools響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)，采用Flexbox方案。使用Flexbox實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局是目前最流行的做法。如果你對(duì)Flexbox并不熟悉，可以查看W3Schools的教學(xué)：

W3Schools Flexbox教學(xué)

Flexbox實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局例子

視頻連結(jié)

B站

YouTube

Flexbox響應(yīng)式網(wǎng)頁布局

透過Flexbox實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局同樣可分為三步：

將容器顯示為flex，并讓它wrap；

將需要響應(yīng)的元素放在容器當(dāng)中，并用百分比設(shè)定每一個(gè)元素的basis；

通過Media Query將容器的flex方向改為column（預(yù)設(shè)為row）。

在W3Schools的例子中，F(xiàn)lex容器是這樣設(shè)定的：

.row {  
  display: flex;
  flex-wrap: wrap;
}

容器當(dāng)中的兩欄，即Flex項(xiàng)目：

/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

最后是媒體查詢，斷點(diǎn)設(shè)在700px:

@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}
改進(jìn)：移動(dòng)優(yōu)先

同樣地，我們也對(duì)這個(gè)例子進(jìn)行移動(dòng)優(yōu)先的改進(jìn)，當(dāng)作是練習(xí)。

Flex容器：

.row {  
  display: flex;
  flex-direction: column
}

Flex項(xiàng)目：

.side {
  padding: 20px;
  background-color: #f1f1f1;
}

/* Main column */
.main {
  padding: 20px;
  background-color: white;
}

媒體查詢：

@media screen and (min-width: 700px) {
  .row {
    flex-direction: row;
  }
  .side {
    flex: 30%;
  }
  .main {
    flex: 70%;
  }
}

一樣是，將媒體查詢內(nèi)外的內(nèi)容交換。

W3Schools系列的代碼都在GitHub上：W3Schools GitHub

W3Schools教學(xué)系列

W3Schools是知名的網(wǎng)頁設(shè)計(jì)／前端開發(fā)教學(xué)網(wǎng)站，不僅提供HTML、CSS、JavaScript等的詳盡教學(xué)，還可以把它當(dāng)作說明文件（Documents）。有經(jīng)驗(yàn)的前端或多或少已經(jīng)接觸過這個(gè)網(wǎng)站，因?yàn)樗?jīng)常出現(xiàn)在搜索結(jié)果的前幾項(xiàng)。其中，它的How To部分更是包含了大量非常實(shí)用的例子，例如，如何制作SlideShow（圖片輪播）、Lightbox、Parallax（視差效果）等等。因此我想做一系列的影片專門介紹這些How To。

Float響應(yīng)式網(wǎng)頁布局

Flexbox響應(yīng)式網(wǎng)頁布局 - W3Schools視頻02

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117464.html

相關(guān)文章

  • 響應(yīng)式網(wǎng)頁布局 - W3Schools How-Tos 01

    摘要：視頻連結(jié)站響應(yīng)式網(wǎng)頁布局今天已經(jīng)是年，基本上所有新建的網(wǎng)頁都會(huì)是響應(yīng)式，以適應(yīng)在手機(jī)顯示。而實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局主要有種方法當(dāng)然，以上三者都需要搭配使用。完全就是為了網(wǎng)頁布局及其他二維橫向加縱向布局而設(shè)計(jì)的，相信未來的網(wǎng)頁都會(huì)采用這一設(shè)計(jì)。 W3Schools教學(xué)系列 W3Schools是知名的網(wǎng)頁設(shè)計(jì)／前端開發(fā)教學(xué)網(wǎng)站，不僅提供HTML、CSS、JavaScript等的詳盡教學(xué)，還可以...

    Heier 評(píng)論0 收藏0

  • CSS Grid響應(yīng)式網(wǎng)頁布局 - W3Schools視頻03

    摘要：繼續(xù)響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)，今日講的是方案。就是為二維布局設(shè)計(jì)的，最適合用來做網(wǎng)頁布局。其中是最小寬度單位，等于六個(gè)等于三個(gè)等于兩個(gè)而則等于五個(gè)。 繼續(xù)W3Schools響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)，今日講的是CSS Grid方案。CSS Grid就是為二維布局設(shè)計(jì)的，最適合用來做網(wǎng)頁布局。目前主流的瀏覽器都已經(jīng)支持CSS Grid，除非你很確定你的用戶常使用較舊的瀏覽器，不然的話，建議使用CS...

    piapia 評(píng)論0 收藏0

  • CSS Grid響應(yīng)式網(wǎng)頁布局 - W3Schools視頻03

    摘要：繼續(xù)響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)，今日講的是方案。就是為二維布局設(shè)計(jì)的，最適合用來做網(wǎng)頁布局。其中是最小寬度單位，等于六個(gè)等于三個(gè)等于兩個(gè)而則等于五個(gè)。 繼續(xù)W3Schools響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)，今日講的是CSS Grid方案。CSS Grid就是為二維布局設(shè)計(jì)的，最適合用來做網(wǎng)頁布局。目前主流的瀏覽器都已經(jīng)支持CSS Grid，除非你很確定你的用戶常使用較舊的瀏覽器，不然的話，建議使用CS...

    leejan97 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<