設計在線
聯系我們
步驟1:確定您的網格寬度
在開始之前,您需要確定您的網格,將需要有多寬。對于我的WordPress網站,我可以看到,通過使用谷歌瀏覽器的“檢查元素”功能,當你右鍵點擊對象,我的主柱的寬度是450px。這是我發現最快的方式,可以快速確定網頁上的對象的寬度和高度
步驟2:網格設計
而不是hand-building網格,您可以做的,如果你想要的,我建議要與許多可用網格生成器工具。在本文中,我將使用網格MindPlay生成器。這是一個非常簡單的和輕型網格生成器。
我想要一個三列的顯示和我需要確保我的像素是450。所以做相應的調整和跳到“Export”選項卡。
在導出選項卡,使用top-most的“Style Sheet”的框架并向下滾動,直到你看到“Grid”的評論。你要拷貝一切從評論底下的框架。它應該只會在大約30行<pre >。
第3步:更新你的WordPress的樣式
登錄到你的WordPress網站和外觀>編輯器
在編輯器的右下角面板,你將看到一個風格。css文件(或類似的東西,這取決于你的主題)。點擊這個打開。
滾動到底部的表并粘貼您從MindPlay.dk pre:
步驟4:實施網格
使用網格,您只需創建一個“網格”類<DIV>。每個網格面積在CSS定義。開辟了新的一頁或后。去的HTML標簽,開始建立您的網格
下面是一些示例前,您可以粘貼到位,讓你開始:
<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:
保存/更新的頁面,看看結果。在我的情況,這是該網站的主頁:
正如您可以看到的從上面的屏幕截圖中,我們有三列,一切都是正確的,我們希望它能。你可以添加任意數量的行作為你想通過簡單地從以下<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>
這是到目前為止,它看起來如何:
技巧的調整
你可能無法在一些瀏覽器中當你有多行。如果您使用的是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>
最終結果
下面是我最后的結果看起來像有兩行和一些簡單的圖形:
有樂趣的設計,并記住,你可以在你想要的任何方式的風格你的網格。