WordPress主题教给你“从零开始”的方法来完成网格

天外飘仙

　　获得一个一致的、坚实的网格布局到WordPress可以是一个痛苦的过程，如果你使用正确的工具。在本教程中，您将学习如何一步一步来快速设置一个网格系统在WordPress是非常轻量级的，很容易修改。我们将保持简单的设计，这样我们可以集中在使用正确的工具来建立你的网格，但记住，你可以在你自己的风格网格，如果需要的话。
　　我将使用在WordPress主题教给你“从零开始”的方法来完成网格。
　　步骤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标签，开始建立您的网格



　　下面是一些示例前，您可以粘贴到位，让你开始：

1. <div class="grid">
   
2. <p class="grid-m1"> </p>
   
3. <p class="grid-c1">Left Column</p>
   
4. <p class="grid-m2"></p>
   
5. <p class="grid-c2">Middle Column</p>
   
6. <p class="grid-m3"> </p>
   
7. <p class="grid-c3">Right Column</p>
   
8. <p class="grid-m4"> </p>
   
9. </div>

复制代码

　　查看更多 wordpress教程 wordpress主题