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

Wordpress2个月前更新 SUYEONE
390 0 0

创建一个跨浏览器兼容的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宽度网页布局。

© 版权声明

相关文章

暂无评论

暂无评论...
☺一键登录开启个人书签等功能!