主机评测网,专注vps、独立服务器等主机评测
最专业的主机评测网站

WordPress主题开发教程20:宽度和布局(WordPress主题文件结构)

WordPress主题开发教程20:宽度和布局(WordPress主题文件结构)

文章快速目录

第一步:设置页面整体宽度第二步:自动页面居中第三步:设置页眉宽度和布局第四步:设置容器宽度和布局第五步:设置侧边栏宽度和布局第六步:设置页脚宽度和布局第七步:在侧边栏中添加剩余的10个像素第八步(多余的一步):修复IE的双倍边距bug它会介绍如何设置每个DIV的宽度和布局, 并且还会展示如何让主题正确显示,同时在Firefox和IE下兼容一致。

在我们开始之前,打开Xampp控件,主题文件夹,火狐浏览器,IE浏览器,index.php和style.css

第一步:设置页面的整体宽度

现在,我们首先需要确定的是主题的整体宽度。我们用750px;主题的大小取决于绝大多数博客访问者的屏幕分辨率。需要避免的是使用宽度过大的主题。如果博客的大部分读者使用800px × 600px的屏幕,在这种情况下,如果使用900px宽的主题,就会超过他们的屏幕100多个像素。显然,这对用户来说是非常不友好的。

反正我们怎么把主题的整体宽度设置成750px呢?

我们需要将当前主题中的所有内容(页眉、容器、侧栏和页脚)放入一个750px的DIV标签中。

在style.css文件中输入以下代码:# wrapper { margin:0 auto 0 auto;宽度:750pxtext -align:left;}

在CSS中,#符号通过id定位页面中的元素,而点符号通过类定位页面中的元素。如果您的代码是

保存index.php和style.css文件。刷新Firefox和IE浏览器(按F5)以查看更改。

详细解释:

边距:0自动0自动;含义(注意顺序):0上边距,自动右边距,0下边距,自动左边距。从现在开始,记住将左右边距设置为自动,这样会使居中对齐。宽度:750px明明是750像素。text -align:left;就是将包装器DIV中的文本靠左对齐,因为我们要对齐正文{ text -align:left;}改为text -align:center;步骤2:自动页面居中

将text-align: left放入正文{ };Text-align:居中;。

为什么?(我假设你用的是火狐和ie 6)。你的布局对你来说可能看起来是正确的,但对使用早期版本的IE用户来说可能不正确。记得把左右页边距设置成自动居中?但这并不适用于所有IE,所以body { text -align:center;}是在旧版本IE中居中wrapperDIV的解决方案。

(对了,火狐和IE中的文字大小是不一样的。我们以后再解决。)

步骤3:设置页眉宽度和布局

让标题向左浮动,并将其宽度设置为750像素:

# header { float:left;宽度:750px}

步骤4:设置容器的宽度和布局。

让容器向左浮动,宽度为500像素:

#容器{ float:left;宽度:500px}

步骤5:设置边栏宽度和布局

让边栏向左浮动,宽度为240像素,背景为灰色:

。侧栏{ float:left;宽度:240px背景:# eeeeee}

#ffffff是白色和背景:# eeeeee它是非常浅的灰色。我们给侧边栏添加了一个背景色,只是为了看看添加了剩余的10个像素后的区别。

步骤6:设置页脚的宽度和布局。

让页脚向左浮动,两边什么都没有,宽度为:750px:

# footer { clear:both;浮动:左;宽度:750px}

页眉页脚的样式和页眉页脚有什么区别?答案很明确:都在页脚{ };。在那里,它使页脚无法与它上面的东西(如侧边栏或容器)连接。

保存并刷新浏览器。

第7步:将剩余的10个像素添加到侧边栏

将剩余的10个像素的边距添加到边栏中。现在侧边栏的CSS应该是:

。侧栏{ float:left;宽度:240px背景:# eeeeee边距:0 0 0 10px}

保存并刷新浏览器,看到10像素的空白已经添加到侧边栏的左侧。

边距:0 0 0 10px上边距为0,右边距为0,下边距为0,左边距为10个像素。当大小为0时,不需要px单位。

第八步(额外步骤):修复IE的双倍边距bug

Internet Explorer有一个双倍边距的错误,所以在IE下,我们的页面间距是20像素。20像素的边距可能会破坏布局,并将侧栏挤到页面底部,因为20像素的边距使得容器和侧栏的宽度之和为760px,而不是750px。要解决这个问题,添加display:inline;到侧边栏。现在你的边栏应该是:

。侧栏{ float:left;宽度:240px背景:# eeeeee边距:0 0 0 10px显示:内嵌;}

以下是当前索引和样式文件的内容。

:WordPress主题开发教程20:宽度和布局(WordPress主题文件结构) https://vps.caogenba.com.com/86427.html

赞(0) 打赏
未经允许不得转载:主机测评 » WordPress主题开发教程20:宽度和布局(WordPress主题文件结构)

评论 抢沙发

登录

找回密码

注册