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

创建一个跨浏览器兼容的750px宽度网页布局指南

在开始之前，请确保已启动Xampp控制台，打开主题文件夹，同时在Firefox和Internet Explorer (IE)浏览器中加载index.php和style.CSS文件。

**第一步：设定页面整体宽度**
首先，我们需要确定整个网页的宽度，这里设定为750px，以适应大多数用户的屏幕分辨率。避免设置过宽的主题，以免超出部分用户800px x 600px屏幕的显示范围。

在`style.css`中，添加以下代码：
“`css
#wrapper {
margin: 0 auto;
width: 750px;
text-align: left;
}
“`
这里的`#wrapper`是通过ID选择器定位页面元素，`margin: 0 auto;`用于水平居中，`text-align: left;`则是让内部内容左对齐。

**第二步：自动页面居中**
为了确保在Firefox和早期版本的IE中居中，修改主体内容的对齐方式：
“`css
body {
text-align: center;
}

#contAIner {
text-align: left;
float: left;
width: 500px;
}
“`

**第三步：设置页眉宽度和布局**
将页眉宽度设置为750px，并让它向左浮动：
“`css
#header {
float: left;
width: 750px;
}
“`

**第四步：设置容器宽度和布局**
容器宽度设为500px，同样向左浮动：
“`css
#container {
float: left;
width: 500px;
}
“`

**第五步：设置侧边栏宽度和布局**
侧边栏宽度设为240px，背景为浅灰色，并向左浮动：
“`css
#sidebar {
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}
“`

**第六步：设置页脚宽度和布局**
页脚宽度设为750px，向左浮动，清除两侧浮动：
“`css
#footer {
clear: both;
float: left;
width: 750px;
}
“`

**第七步：添加侧边栏的10px空白**
在侧边栏的左侧添加10px的空白：
“`css
#sidebar {
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}
“`

**第八步：修复IE的双倍边距bug**
为解决IE的这个已知问题，向侧边栏添加`display: inline;`属性：
“`css
#sidebar {
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}
“`

完成以上步骤后，保存并刷新Firefox和IE浏览器，你应该能看到一个在不同浏览器间表现一致的750px宽度网页布局。