<mark id="n9zld"></mark>

      <thead id="n9zld"><video id="n9zld"></video></thead>

      <ins id="n9zld"></ins>

        <b id="n9zld"></b>

            <font id="n9zld"><video id="n9zld"></video></font>
            <b id="n9zld"></b>

              <dfn id="n9zld"><video id="n9zld"></video></dfn>

                Flex 布局教程:實例篇

                作者: 阮一峰

                日期: 2015年7月14日

                騰訊課堂 NEXT 學院

                上一篇文章介紹了Flex布局的語法,今天介紹常見布局的Flex寫法。

                你會看到,不管是什么布局,Flex往往都可以幾行命令搞定。

                我只列出代碼,詳細的語法解釋請查閱《Flex布局教程:語法篇》。我的主要參考資料是Landon Schropp的文章和Solved by Flexbox

                一、骰子的布局

                骰子的一面,最多可以放置9個點。

                下面,就來看看Flex如何實現,從1個點到9個點的布局。你可以到codepen查看Demo。

                如果不加說明,本節的HTML模板一律如下。

                
                <div class="box">
                  <span class="item"></span>
                </div>
                

                上面代碼中,div元素(代表骰子的一個面)是Flex容器,span元素(代表一個點)是Flex項目。如果有多個項目,就要添加多個span元素,以此類推。

                1.1 單項目

                首先,只有左上角1個點的情況。Flex布局默認就是首行左對齊,所以一行代碼就夠了。

                
                .box {
                  display: flex;
                }
                

                設置項目的對齊方式,就能實現居中對齊和右對齊。

                
                .box {
                  display: flex;
                  justify-content: center;
                }
                

                
                .box {
                  display: flex;
                  justify-content: flex-end;
                }
                

                設置交叉軸對齊方式,可以垂直移動主軸。

                
                .box {
                  display: flex;
                  align-items: center;
                }
                

                
                .box {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
                

                
                .box {
                  display: flex;
                  justify-content: center;
                  align-items: flex-end;
                }
                

                
                .box {
                  display: flex;
                  justify-content: flex-end;
                  align-items: flex-end;
                }
                

                1.2 雙項目

                
                .box {
                  display: flex;
                  justify-content: space-between;
                }
                

                
                .box {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                }
                

                
                .box {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  align-items: center;
                }
                

                
                .box {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  align-items: flex-end;
                }
                

                
                .box {
                  display: flex;
                }
                
                .item:nth-child(2) {
                  align-self: center;
                }
                

                
                .box {
                  display: flex;
                  justify-content: space-between;
                }
                
                .item:nth-child(2) {
                  align-self: flex-end;
                }
                

                1.3 三項目

                
                .box {
                  display: flex;
                }
                
                .item:nth-child(2) {
                  align-self: center;
                }
                
                .item:nth-child(3) {
                  align-self: flex-end;
                }
                

                1.4 四項目

                
                .box {
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: flex-end;
                  align-content: space-between;
                }
                

                HTML代碼如下。

                
                <div class="box">
                  <div class="column">
                    <span class="item"></span>
                    <span class="item"></span>
                  </div>
                  <div class="column">
                    <span class="item"></span>
                    <span class="item"></span>
                  </div>
                </div>
                

                CSS代碼如下。

                
                .box {
                  display: flex;
                  flex-wrap: wrap;
                  align-content: space-between;
                }
                
                .column {
                  flex-basis: 100%;
                  display: flex;
                  justify-content: space-between;
                }
                

                1.5 六項目

                
                .box {
                  display: flex;
                  flex-wrap: wrap;
                  align-content: space-between;
                }
                

                
                .box {
                  display: flex;
                  flex-direction: column;
                  flex-wrap: wrap;
                  align-content: space-between;
                }
                

                HTML代碼如下。

                
                <div class="box">
                  <div class="row">
                    <span class="item"></span>
                    <span class="item"></span>
                    <span class="item"></span>
                  </div>
                  <div class="row">
                    <span class="item"></span>
                  </div>
                  <div class="row">
                     <span class="item"></span>
                     <span class="item"></span>
                  </div>
                </div>
                

                CSS代碼如下。

                
                .box {
                  display: flex;
                  flex-wrap: wrap;
                }
                
                .row{
                  flex-basis: 100%;
                  display:flex;
                }
                
                .row:nth-child(2){
                  justify-content: center;
                }
                
                .row:nth-child(3){
                  justify-content: space-between;
                }
                

                1.6 九項目

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

                二、網格布局

                2.1 基本網格布局

                最簡單的網格布局,就是平均分布。在容器里面平均分配空間,跟上面的骰子布局很像,但是需要設置項目的自動縮放。

                HTML代碼如下。

                
                <div class="Grid">
                  <div class="Grid-cell">...</div>
                  <div class="Grid-cell">...</div>
                  <div class="Grid-cell">...</div>
                </div>
                

                CSS代碼如下。

                
                .Grid {
                  display: flex;
                }
                
                .Grid-cell {
                  flex: 1;
                }
                

                2.2 百分比布局

                某個網格的寬度為固定的百分比,其余網格平均分配剩余的空間。

                HTML代碼如下。

                
                <div class="Grid">
                  <div class="Grid-cell u-1of4">...</div>
                  <div class="Grid-cell">...</div>
                  <div class="Grid-cell u-1of3">...</div>
                </div>
                
                
                .Grid {
                  display: flex;
                }
                
                .Grid-cell {
                  flex: 1;
                }
                
                .Grid-cell.u-full {
                  flex: 0 0 100%;
                }
                
                .Grid-cell.u-1of2 {
                  flex: 0 0 50%;
                }
                
                .Grid-cell.u-1of3 {
                  flex: 0 0 33.3333%;
                }
                
                .Grid-cell.u-1of4 {
                  flex: 0 0 25%;
                }
                

                三、圣杯布局

                圣杯布局(Holy Grail Layout)指的是一種最常見的網站布局。頁面從上到下,分成三個部分:頭部(header),軀干(body),尾部(footer)。其中軀干又水平分成三欄,從左到右為:導航、主欄、副欄。

                HTML代碼如下。

                
                <body class="HolyGrail">
                  <header>...</header>
                  <div class="HolyGrail-body">
                    <main class="HolyGrail-content">...</main>
                    <nav class="HolyGrail-nav">...</nav>
                    <aside class="HolyGrail-ads">...</aside>
                  </div>
                  <footer>...</footer>
                </body>
                

                CSS代碼如下。

                
                .HolyGrail {
                  display: flex;
                  min-height: 100vh;
                  flex-direction: column;
                }
                
                header,
                footer {
                  flex: 1;
                }
                
                .HolyGrail-body {
                  display: flex;
                  flex: 1;
                }
                
                .HolyGrail-content {
                  flex: 1;
                }
                
                .HolyGrail-nav, .HolyGrail-ads {
                  /* 兩個邊欄的寬度設為12em */
                  flex: 0 0 12em;
                }
                
                .HolyGrail-nav {
                  /* 導航放到最左邊 */
                  order: -1;
                }
                

                如果是小屏幕,軀干的三欄自動變為垂直疊加。

                
                @media (max-width: 768px) {
                  .HolyGrail-body {
                    flex-direction: column;
                    flex: 1;
                  }
                  .HolyGrail-nav,
                  .HolyGrail-ads,
                  .HolyGrail-content {
                    flex: auto;
                  }
                }
                

                四、輸入框的布局

                我們常常需要在輸入框的前方添加提示,后方添加按鈕。

                HTML代碼如下。

                
                <div class="InputAddOn">
                  <span class="InputAddOn-item">...</span>
                  <input class="InputAddOn-field">
                  <button class="InputAddOn-item">...</button>
                </div>
                

                CSS代碼如下。

                
                .InputAddOn {
                  display: flex;
                }
                
                .InputAddOn-field {
                  flex: 1;
                }
                

                五、懸掛式布局

                有時,主欄的左側或右側,需要添加一個圖片欄。

                HTML代碼如下。

                
                <div class="Media">
                  <img class="Media-figure" src="" alt="">
                  <p class="Media-body">...</p>
                </div>
                

                CSS代碼如下。

                
                .Media {
                  display: flex;
                  align-items: flex-start;
                }
                
                .Media-figure {
                  margin-right: 1em;
                }
                
                .Media-body {
                  flex: 1;
                }
                

                六、固定的底欄

                有時,頁面內容太少,無法占滿一屏的高度,底欄就會抬高到頁面的中間。這時可以采用Flex布局,讓底欄總是出現在頁面的底部。

                HTML代碼如下。

                
                <body class="Site">
                  <header>...</header>
                  <main class="Site-content">...</main>
                  <footer>...</footer>
                </body>
                

                CSS代碼如下。

                
                .Site {
                  display: flex;
                  min-height: 100vh;
                  flex-direction: column;
                }
                
                .Site-content {
                  flex: 1;
                }
                

                七,流式布局

                每行的項目數固定,會自動分行。

                CSS的寫法。

                
                .parent {
                  width: 200px;
                  height: 150px;
                  background-color: black;
                  display: flex;
                  flex-flow: row wrap;
                  align-content: flex-start;
                }
                
                .child {
                  box-sizing: border-box;
                  background-color: white;
                  flex: 0 0 25%;
                  height: 50px;
                  border: 1px solid red;
                }
                

                (完)

                留言(126條)

                正想學這個,你就來了

                這個感覺好有用啊!

                非常感謝,嘗試使用下。看樣子能簡化好多東西。

                骰子應該是6點

                里面這“vertical-align: center;”還有用么。

                很好,很實用

                太帥了!

                很好很實用

                引用Cola的發言:

                里面這“vertical-align: center;”還有用么。

                vertical-align 沒有 center 的值,要給也只能給 middle。反正好像也沒有用到。

                贊,大愛這篇示例,原先感覺非常理解不了,看完后、、嘿嘿,真的理解大半了。。非常感謝

                阮老師的文章就是干。

                骰子這個例子很有意思,工作中很多場景都有骰子這個例子的應用。學習了~~!233333

                引用Cheney的發言:

                vertical-align 沒有 center 的值,要給也只能給 middle。反正好像也沒有用到。

                codepen 的demo里面有這一句

                對于兼容問題該如何處理呢?

                關于四項目的第二個布局(四個角各一個點):
                如果骰子的四個點大小變小,
                flex-wrap;flex-basis:100%;
                的解決方案會導致下方的兩個點不會對齊在左下角右下角

                原作者給的方案會好些:
                .box {
                display: flex;
                justify-content: space-between;
                }

                .box .column {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                }

                display:flex現在應該是用兼容性的吧,在部分的安卓手機里面不好用,現在還在用display:box

                有個項目就是用的display:-webkit-flex,然后使用overflow:scroll-y進行滾動,不過滾動效果遠沒有使用原生滾動好,不知道有沒有什么其他比較好的解決方案。

                非常感謝,最近正學習flex布局,寫的很清楚。

                非常棒的文章。以后做內容流時可以嘗試使用~

                CSS終于有了像樣的自動布局了~

                這么難懂的知識經過阮老師的講解都變得如此簡單,贊!阮老師的文筆真是厲害

                純干貨 不錯

                不錯,博主這圖文并茂的 杠杠的

                寫的不錯,贊一個!

                學習了。

                色子以下的網頁布局部分說的很籠統啊,希望以后能再說的詳細一點,謝謝啦

                Visual Studio .Net 的布局方式, flex 能做到么
                如一下兩者格式,都要把主內容放在第一
                樹| 主內容
                樹|_______
                樹|底板

                樹| 主內容
                __|_______
                底板

                阮老師的東西不錯

                謝謝樓主這么詳細的教程
                但是項目三是有點問題的,在容器上應該加上一個flex-direction:column的屬性

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

                .item:nth-child(2) {
                align-self: center;
                }

                .item:nth-child(3) {
                align-self: flex-end;
                }

                引用前端菜鳥的發言:

                display:flex現在應該是用兼容性的吧,在部分的安卓手機里面不好用,現在還在用display:box

                覺得應該與時俱進,4.0安卓的用戶都占據了97%以上了吧。還有2.x的,估計也是不怎么上網不怎么用手機的用戶吧。所以可以放心大膽放心用。

                太神了,寫得很好,通俗易懂

                骰子的布局,阮老師的從左到右排版,我學了一下,改成從上到下,哈哈,flex太好用了,http://codepen.io/anon/pen/qOywrB

                在骰子的布局中的第四個項目中確定能達到像圖中所示的嗎,如果每個項目之間沒有margin值,從主軸的右邊對齊那不是第一行的三個點都要靠右嗎,而不是每個都有間隔

                我的代碼設置成如下才能達到阮老師的效果

                display: flex;
                flex-wrap: wrap;
                flex-direction:row-reverse;
                justify-content:space-between;
                align-content:space-between;

                非常謝謝!你的文章對我很有幫助!:)

                中間那個網格布局的百分比布局,是不是少啊了很多元素。css代碼和html代碼對不上號啊

                是不是

                justify-content: 還有等等……ie10 都不兼容的

                很好用,使用之后發覺……兼容性堪憂啊,過段時間用就很好

                不知道阮老師對flex在安卓的微信中的各種問題有什么建議,是換掉這種布局呢還是用各種兼容方法寫。有類似的兼容性的文章嗎

                .Grid-cell2.u-1of3 {
                flex: 1 0 33.3333%;
                background-color:#7CFC00;
                }

                .Grid-cell2.u-1of4 {
                flex: 1 0 25%;
                background-color:#E74D3C;
                }

                如果flex的放大比例都為1的話,那它的寬度在什么基礎上進行變化的啊?一直沒搞懂這個

                在UC瀏覽器下 不支持吧

                請問下,第三個 圣杯布局,為什么css中要寫很多個 flex:1

                關于flex的2篇文章都看完了,但阮大神沒有講,flex與盒模型相比的最大優勢在何處,以及為何在移動端要使用flex布局

                學習了,非常詳細易懂,適合入門!

                flex:1的意思是什么?

                非常感謝,很喜歡您的教程,發現1.3三項目少了.box{justify-content: space-between;},難道只有我一個人發現了...

                這個是不是兼容性不算太好呀,只有chrome完全支持呀

                "1.4 四項目"的代碼有點問題,如果設置justify-content:flex-end的話,第一行的3個元素不會那么平均的分布的,而是擠在右邊,像float:right似的

                單項目中第五個,水平和垂直居中,父級設置display:flex;后,子元素設置margin:auto;應該是最簡單的。我是在新書css揭秘上看的。具體的原理我還不太懂。

                我只想說阮老師這篇大部分是抄的
                https://philipwalton.github.io/solved-by-flexbox/

                引用Eliza的發言:

                我只想說阮老師這篇大部分是抄的
                https://philipwalton.github.io/solved-by-flexbox/

                他自己開篇就說了= =

                引用Eliza的發言:

                我只想說阮老師這篇大部分是抄的
                https://philipwalton.github.io/solved-by-flexbox/

                黑的毫無水平,按你這個思路,所有這類文章都是“抄”的CSS官方文檔。

                贊,篩子布局非常易懂。實際示例開發過程中非常常見,很實用。
                干貨!很喜歡阮老師寫作的風格

                太厲害了,就連菜鳥教程的flex教程都是轉自這里的。
                http://www.runoob.com/w3cnote/flex-grammar.html

                項目1.3是錯的,這樣寫樣式不能是截圖上面的。
                flex-direction: column;justify-content: space-between;
                box得加上這兩條屬性

                膜拜大牛

                引用session的發言:

                骰子應該是6點

                不不不, 阮老師的意思應該是最多可以放九點,哈哈。

                圣杯布局,IE11完全亂掉了

                阮老師,我想問一下。flex布局中,各個item之間的間距是如何設置的呢?用margin可以做到,但是面試的時候面試官說不用margin也可以。不是很理解。我看到的flex布局都是item連接到一起的。

                flex布局能不能實現這樣的效果:容器內的項目固定寬高,設備寬度減小,項目自動換行,換行之后內容部分整體保持水平居中,同時保持項目七的流式布局?能的話改如何實現?

                收獲很大,感謝

                非常好的教程。看了受益匪淺。

                全部看明白了,感覺收獲很大。

                厲害啊,寫的很精簡,沒有多少廢話。贊

                非常給力,感謝!

                引用tolerious的發言:

                不不不, 阮老師的意思應該是最多可以放九點,哈哈。

                那還是麻將九餅吧

                受益匪淺,豁然開朗!

                1.2那
                .box {
                display: flex;
                }

                .item:nth-child(2) {
                align-self: center;
                }
                這個錯了,得不到圖中的效果。

                屬性是好屬性,但是兼容性還是不怎么好,IE和一票國產移動端瀏覽器就坑死了

                懸掛布局里面的基本栗子里面第三個塊怎么能緊接著在第一個塊的下面,而不受第二個塊的高度影響

                flex布局怎樣設置單個子項在主軸上的位置?

                多謝,看過最好的博客

                感謝!非常感謝!不敢碰觸的問題,在研究了一天后,就豁然開朗了。知識分享者,贊!我也會去教更多的人掌握flex技能。

                圣杯布局的header,
                footer {
                flex: 1;
                }
                大了些吧 flex:0.3這樣

                看了這個,瞬間覺得 flex 要顛覆以前小心謹慎的display+float布局啊啊啊

                flex-basis: 100%有什么用

                flex: 1是什么哪個屬性

                引用不再猶豫的發言:

                flex布局怎樣設置單個子項在主軸上的位置?

                我也有在想呢,有時候需要將子項設置在位置,特別是需要按某個比例。

                引用Cola的發言:

                里面這“vertical-align: center;”還有用么。

                設為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。

                一個點的時候,只設置.box {display:flex} 是不行的,因為父元素的align-items默認值為stretch,會使子元素的高度充滿整個容器,而不是在左上角。所以應該還要給.box加上align-items: flex-start;

                .item {
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 0%;
                }

                flex:1 => 1 1 0

                引用koz的發言:

                1.2那
                .box {
                display: flex;
                }

                .item:nth-child(2) {
                align-self: center;
                }
                這個錯了,得不到圖中的效果。

                非常實用 謝謝老師 跟著學習了一遍 讓我對布局更加深入了

                1.5第三個少了:
                .row:nth-child(1){
                justify-content: space-between;
                }

                謝謝,好文章,學習啦,簡單易懂!

                @phc:

                對的,我也是親自寫了一遍才感覺這里阮老師寫得達不到效果

                flex: 0 0 25%;
                這是多個屬性連用嗎?分別是什么屬性?

                引用季一輝的發言:

                我試了也不行,是不是作者代碼沒有給全

                五、懸掛式布局 那里的效果是怎樣實現的呢?感覺像瀑布流的布局

                阮老師的文章就是鞭辟入里,精煉而不冗雜,膜拜大神了,有些剛好有用

                色子布局中兩個點的項目中的倒數第二個:一個點在正中間另一個點在左上角那個布局不對吧?
                .box {
                display: flex;
                }

                .item:nth-child(2) {
                align-self: center;
                }
                這樣寫并不能保證到達效果,當外層盒子的尺寸變大時候,正中間的那個點就偏離中心位置了,圖例中的‘視覺居中’是色子的尺寸和點的尺寸湊巧的結果吧

                后面的例子父元素的寬度是怎么設置的?

                初學,目前骰子項目里有的無法實現,比如二項目倒數第二個,三項目第一個,四項目第一個,九項目

                從來都是抵觸寫css的,自從看到flex后,才發現原來布局也挺有意思的

                現在剛開始接觸微信小程序,原來是做安卓的,看新程序十分蒙蔽,不懂布局,看完這個信心大增啊

                1.4 四項目 第一個是錯的,您那種寫法寫出來上面三個是挨在一起的,我修改了一下應該是
                .boxFlex15 {
                justify-content:space-between;
                flex-direction: row-reverse;
                }

                .boxFlex15 .item:last-child {
                align-self: flex-end;
                }

                2.1 基本網格布局 的代碼是不是省略了很多,不可能實現縮略圖的效果啊,我自己改寫了一份,不知道能不能這么寫
                .Grid {
                width: 950px;
                height: 460px;
                background: #fff;
                border: 5px solid #e0e0e0;
                border-radius: 10px;
                display: flex;
                flex-wrap: wrap;
                }
                .Grid-cell {
                background: #f4f4f4;
                border-radius: 10px;
                margin: 1.5%;
                }
                .Grid-cell:nth-child(1),
                .Grid-cell:nth-child(2),
                .Grid-cell:nth-child(10),
                .Grid-cell:nth-child(11) {
                flex: 0 47%;
                }
                .Grid-cell:nth-child(3),
                .Grid-cell:nth-child(4),
                .Grid-cell:nth-child(5) {
                flex: 0 30.3%;
                }
                .Grid-cell:nth-child(6),
                .Grid-cell:nth-child(7),
                .Grid-cell:nth-child(8),
                .Grid-cell:nth-child(9) {
                flex: 0 22%;
                }

                收益匪淺,以前布局沒考慮這么多

                第一次留言,感謝阮老師,讓我們學到了很多東西!

                三個點的那個box上少了justify-content: space-between;



                這樣的情況多加了一個類名,在瀏覽器不能正確的顯示,這是為什么啊

                1.4 四項目的第一張圖 實現代碼沒看懂 我用了兩個div 第二個div寫了flex-direction:row-reverse,才實現。
                文章寫的很細緻看兩遍 寫個筆記就記住基本的應用了 謝謝!

                引用shangga的發言:

                flex:1的意思是什么?

                flex-grow:1;
                flex-shrink:1;
                flex-basis:100%;

                感覺圣杯布局那個,不用order屬性更方便,直接按照正常的順序寫就好了。

                引用軍的發言:

                項目1.3是錯的,這樣寫樣式不能是截圖上面的。
                flex-direction: column;justify-content: space-between;
                box得加上這兩條屬性

                引用feline的發言:

                感覺圣杯布局那個,不用order屬性更方便,直接按照正常的順序寫就好了。

                這是為了SEO,重要的東西寫在前面永遠是有利于搜索引擎的。

                想請教一個問題,五、懸掛式布局這個例子中 前兩個小欄目在左側,一個大欄目在右側,這樣的布局也可以用flex實現嗎

                求教,例子中骰子兩個的布局(左上和右下分別兩個),如果第一個黑點在右上,第2個黑點在左下,怎么寫CSS?
                好像很難啊

                引用成東的發言:

                求教,例子中骰子兩個的布局(左上和右下分別兩個),如果第一個黑點在右上,第2個黑點在左下,怎么寫CSS?
                好像很難啊

                這樣:

                .box {
                diplay: flex;
                justify-content: space-between;
                }
                .item:nth-child(1){
                align-self: flex-end;
                }

                好文章值得反復閱讀

                用了好久的傳統布局,也簡單學習過flex,這次照著實例做了一遍后,我都快感動哭了,Flex布局太好用了,特別是flex: 0 0 100%;這個屬性太美好了,跟吃到了特級廚師的頂級料理一樣。。。。

                不錯!學習了!!

                666 解決了好多布局問題 在也不用擔心花時間在布局上了

                這個可太經典了

                求教,1.4 四項目,4個點可以不用分開div嗎?直接分為兩行,css怎么寫?拜托拜托

                一個點在垂直居中使用align-items: center;時,需要添加一個高度才有效果。
                .box {
                display: flex;
                align-items: center;
                height: 100%;
                }

                1.3 三項目
                是不是有些問題呀
                .box {
                display: flex;
                }

                .item:nth-child(2) {
                align-self: center;
                }

                .item:nth-child(3) {
                align-self: flex-end;
                }
                .box是不是還需要加一個justify-content:space-around;如果不加的話 ;這樣能成立,只能是三個點大小一致,而且容器的大小能剛剛好容納這三個點

                引用shangga的發言:

                flex:1的意思是什么?

                子元素在父元素中均分寬度,與自己的寬度無關了

                emmmmm。。。。。為什么沒有點贊

                還是阮老師的文章講的清楚。贊。

                講的非常透徹,圖文條理非常清晰。學習了,太感謝分享了。

                之前偷懶只看了第一篇就覺的滿足了,這回看了一下第二篇,又收獲許多。

                看了下MDN,flex:auto;代表flex:1 1 auto;按照之前的理解,應該代表0 1 auto才是,感覺這么搞,可讀性不好,規則越來越多了。

                建議實例中的...可以換成具體的名字或是加個背景色

                @xiaoyujia:

                我試了下兩點布局第二個點不能居中

                看到博客園有篇文章明明就是抄襲阮一峰大神的,不標明原文轉載,還說自己是原創,說撒子都是參考別人的,但是相似度高達99.9%,連所有內容標點符號都一樣,就是換湯不換也已,真是從未見過如此厚顏無恥之人,鏈接如下,

                我絕對沒有胡編亂造,https://www.cnblogs.com/sqyambition/p/9254648.html

                群眾的眼睛是雪亮的

                厲害了,阮老師,一篇好的文章不單單是內容滿是干活,更重要的是還能夠通俗而又清晰的講述出來。這一點阮老師真的是厲害????

                暈,IPHONE的設計師肯定很早就看過你博客了

                除了圣杯布局還有別的常用布局嗎?可不可以推薦一本css+html的書籍

                我要發表看法

                «-必填

                «-必填,不公開

                «-我信任你,不會填寫廣告鏈接

                99爱视频