<ruby id="bjlp5"><noframes id="bjlp5"><del id="bjlp5"></del><dfn id="bjlp5"></dfn>

<font id="bjlp5"></font><mark id="bjlp5"><big id="bjlp5"></big></mark>

    <listing id="bjlp5"><ruby id="bjlp5"></ruby></listing>

    <mark id="bjlp5"><thead id="bjlp5"><mark id="bjlp5"></mark></thead></mark>

    成都網站建設,原新盒子網絡工作室
    專業設計,打造專業品質
    Professional design, to create professional quality
    WordPress簡單的CSS網格布局
    來源: 作者:成都網站制作 日期:2012-07-07 09:11:22 點擊:0

    步驟1:確定您的網格寬度

    在開始之前,您需要確定您的網格,將需要有多寬。對于我的WordPress網站,我可以看到,通過使用谷歌瀏覽器的“檢查元素”功能,當你右鍵點擊對象,我的主柱的寬度是450px。這是我發現最快的方式,可以快速確定網頁上的對象的寬度和高度

    01a width Integrating Simple CSS Grid Layouts into WordPress

    步驟2:網格設計

    而不是hand-building網格,您可以做的,如果你想要的,我建議要與許多可用網格生成器工具。在本文中,我將使用網格MindPlay生成器。這是一個非常簡單的和輕型網格生成器。

    02a grid gen Integrating Simple CSS Grid Layouts into WordPress

    我想要一個三列的顯示和我需要確保我的像素是450。所以做相應的調整和跳到“Export”選項卡。

    02b details Integrating Simple CSS Grid Layouts into WordPress

    在導出選項卡,使用top-most的“Style Sheet”的框架并向下滾動,直到你看到“Grid”的評論。你要拷貝一切從評論底下的框架。它應該只會在大約30行<pre >。

    02c code Integrating Simple CSS Grid Layouts into WordPress

    第3步:更新你的WordPress的樣式

    登錄到你的WordPress網站和外觀>編輯器

    03a editor Integrating Simple CSS Grid Layouts into WordPress

    在編輯器的右下角面板,你將看到一個風格。css文件(或類似的東西,這取決于你的主題)。點擊這個打開。

    03b styles Integrating Simple CSS Grid Layouts into WordPress

    滾動到底部的表并粘貼您從MindPlay.dk pre:

    03c paste Integrating Simple CSS Grid Layouts into WordPress

     

    步驟4:實施網格

    使用網格,您只需創建一個“網格”類<DIV>。每個網格面積在CSS定義。開辟了新的一頁或后。去的HTML標簽,開始建立您的網格

    04a new Integrating Simple CSS Grid Layouts into WordPress

    下面是一些示例前,您可以粘貼到位,讓你開始:

    <div class="grid">

    <p class="grid-m1"> </p>

    <p class="grid-c1">Left Column</p>

    <p class="grid-m2"></p>

    <p class="grid-c2">Middle Column</p>

    <p class="grid-m3"> </p>

    <p class="grid-c3">Right Column</p>

    <p class="grid-m4"> </p>

    </div>

    下面是它看起來像在WordPress:

    04b pasted Integrating Simple CSS Grid Layouts into WordPress

    保存/更新的頁面,看看結果。在我的情況,這是該網站的主頁:

    04c columns Integrating Simple CSS Grid Layouts into WordPress

    正如您可以看到的從上面的屏幕截圖中,我們有三列,一切都是正確的,我們希望它能。你可以添加任意數量的行作為你想通過簡單地從以下<pre >:

    <div class="grid">

    <!-- Row #1 -->

    <p class="grid-m1"></p>

    <p class="grid-c1"> Left Column</p>

    <p class="grid-m2"></p>

    <p class="grid-c2"> Middle Column</p>

    <p class="grid-m3"></p>

    <p class="grid-c3"> Right Column</p>

    <p class="grid-m4"></p>

    <!-- Row #2 -->

    <p class="grid-m1"></p>

    <p class="grid-c1"> Left Row #2</p>

    <p class="grid-m2"></p>

    <p class="grid-c2"> Middle Row #2</p>

    <p class="grid-m3"></p>

    <p class="grid-c3"> Right Row #2</p>

    <p class="grid-m4"></p>

    </div>

    這是到目前為止,它看起來如何:

    04d text Integrating Simple CSS Grid Layouts into WordPress

    技巧的調整

    你可能無法在一些瀏覽器中當你有多行。如果您使用的是250像素250像素的圖像,然后在grid-m4行的高度是250像素。

    .grid-m4 {

    float:left;

    width:20px;

    height:250px;

    }

    這將確保你的。grid-m1左邊的下一行不飄到它上面的行。

    如果你想風格整個網格的背景,您可能需要調整網格的高度。我們假定您有四行網格,每個250 px。你要加的高度。網格類在1000 px所以任何樣式元素添加將覆蓋整個網格的設計。

    .grid {

    width:450px;

    height:1000px;

    margin:auto;

    }

    根據MindPlay的版本.dk網格generator 使用,該網站可能不會生成”.grid-m4”,相反,您將需要使用.grid-m1之后。確保你的網格grid-c3延伸到合適位置:

    <div class="grid">

    <p class="grid-m1"> </p>

    <p class="grid-c1"> Left Column</p>

    <p class="grid-m2"> </p>

    <p class="grid-c2"> Middle Column</p>

    <p class="grid-m3"> </p>

    <p class="grid-c3"> Right Column《/p>

    <p class="grid-m1"> </p>

    </div>

    最終結果

    下面是我最后的結果看起來像有兩行和一些簡單的圖形:

    00 final Integrating Simple CSS Grid Layouts into WordPress

    有樂趣的設計,并記住,你可以在你想要的任何方式的風格你的網格。

    Address
    咨詢熱線:028-85555316 and 15378179975
    地址:成都市青羊區北大街19號正成·財富領地1棟2901(省市政務中心斜對面)
    電話:028-85555316 15378179975
    網址:http://www.fadedz.com/  QQ:357898628 snjeso@qq.com
    2011 sosbox.cn , All Right Reserved 蜀ICP備09022060號
    Share
    更多
    收縮
    • 電話咨詢

    • 4000-855-316
    • 028-85555316
    • 15608036768
    秋霞二级理论,小说区 图片区 综合区,欧美国产日韩a在线视频y,亚洲欧美AV中文日韩二区试看