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

資訊專欄INFORMATION COLUMN

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

piapia / 3349人閱讀

摘要：繼續(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，除非你很確定你的用戶常使用較舊的瀏覽器，不然的話，建議使用CSS Grid來設(shè)計(jì)網(wǎng)頁布局。如果你對CSS Grid并不熟悉，可以參考以下的教學(xué)：

CSS網(wǎng)格(CSS Grid)完整教學(xué)

W3Schools CSS Grid教學(xué)

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

視頻連結(jié)

B站

YouTube

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

透過CSS Grid實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局的方法有很多種，最簡單，也最能體現(xiàn)CSS Grid的特點(diǎn)的方法是使用grid-template-areas（注意是復(fù)數(shù)，結(jié)尾有s）。這種方法同樣可分為三步：

為每一個(gè)Grid項(xiàng)賦與一個(gè)名字；

用grid-template-areas來控制每一個(gè)Grid項(xiàng)所占的空間；

通過Media Query改變每一個(gè)Grid項(xiàng)所占的空間。

在W3Schools的例子中，一開始便為每一個(gè)div取了一個(gè)相應(yīng)的名稱：

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

注意這里的grid-area是單數(shù)。接著在包含這些div的容器中控制它們的所占空間比例。

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header header header header"
    "menu main main main right right"
    "menu footer footer footer footer footer";
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

重點(diǎn)在于grid-template-areas，可以看到這里的設(shè)定便是CSS Grid最終的顯示效果。其中menu是最小寬度單位，header等于六個(gè)menu；main等于三個(gè)menu；right等于兩個(gè)menu；而footer則等于五個(gè)menu。menu的寬度為1個(gè)單位，但高度卻跨兩行。

在W3Schools的例子中，并沒有實(shí)現(xiàn)響應(yīng)式的部分，但我們可以自行加入媒體查詢的部分來實(shí)現(xiàn)。透過這個(gè)實(shí)現(xiàn)，你可以看到CSS Grid的神奇、直觀、易用的特點(diǎn)。

@media screen and (max-width: 700px) {
  .grid-container {
    grid-template-areas:
        "header"
        "menu"
        "main"
        "right"
        "footer"
  }
}

在媒體查詢的部分，只要更改grid-template-areas的設(shè)定就能改變整個(gè)布局。

同樣地，這個(gè)例子也沒有采用移動(dòng)優(yōu)先原則。你也可以將這個(gè)例子改為移動(dòng)優(yōu)先作為練習(xí)，由于前兩篇中都做過這樣的嘗試，這里就不再贅述了。

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。

W3Schools系列全部視頻：

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

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

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

幻燈片如何實(shí)現(xiàn)

響應(yīng)式導(dǎo)航如何實(shí)現(xiàn)

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

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

相關(guān)文章

  • 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 評論0 收藏0

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

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

    Heier 評論0 收藏0

  • 響應(yīng)式導(dǎo)航如何實(shí)現(xiàn) - W3Schools視頻05

    摘要：系列全部視頻響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局幻燈片如何實(shí)現(xiàn)響應(yīng)式導(dǎo)航如何實(shí)現(xiàn) 響應(yīng)式導(dǎo)航即是讓導(dǎo)航變成響應(yīng)式。常見的做法是在小屏幕時(shí)不將全部導(dǎo)航項(xiàng)目列出，而是顯示一個(gè)導(dǎo)航圖標(biāo)，點(diǎn)擊該圖標(biāo)時(shí)才會顯示出完整導(dǎo)航。今天我們就來按照W3Schools的方法完成一個(gè)響應(yīng)式導(dǎo)航。 W3Schools 響應(yīng)式導(dǎo)航教學(xué) 響應(yīng)式導(dǎo)航例子 視頻連結(jié) B站 YouTube 響應(yīng)式導(dǎo)航（Re...

    stefanieliang 評論0 收藏0

發(fā)表評論

0條評論

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