成都網站建設,原新盒子網絡工作室
專業設計,打造專業品質
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.dqagky.tw/  QQ:357898628 [email protected]
2011 sosbox.cn , All Right Reserved 蜀ICP備09022060號
Share
更多
收縮
  • 電話咨詢

  • 4000-855-316
  • 028-85555316
  • 15608036768
彩客网比分