采用XHTML和CSS设计可重用可换肤网页
.pageHeader
(
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 70px;
)
.pageNav
(
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 30px;
)
.catalogNav
(
float: left;
top: 130px;
padding: 10px;
border: 1px solid #666;
width: 20%;
)
.pageSearch
(
float: left;
top: 130px;
padding: 10px;
border: 1px solid #666;
width: 20%;
)
.pageContent
(
float: left;
padding: 10px;
border: 1px solid #666;
height: 400px;
width: 60%;
)
.pageBottom
(
clear: both;
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 70px;
)
如此，我们定义了一个三列的页面布局:顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度，当然您也可以将页面定义为中间只有两列等等，您只需要调整layout.css文件即可，这样您可以灵活的修改页面的布局，让页面外观发生根本的变化，而不必动到HTML源文件，这一点对于服务器端生成代码的程序尤为重要。 更多关于CSS布局的资料，请参见:http://www.w3cn.org/article/layout/2004/55.html
.pageHeader
(
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 70px;
)
.pageNav
(
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 30px;
)
.catalogNav
(
float: left;
top: 130px;
padding: 10px;
border: 1px solid #666;
width: 20%;
)
.pageSearch
(
float: left;
top: 130px;
padding: 10px;
border: 1px solid #666;
width: 20%;
)
.pageContent
(
float: left;
padding: 10px;
border: 1px solid #666;
height: 400px;
width: 60%;
)
.pageBottom
(
clear: both;
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 70px;
)
如此，我们定义了一个三列的页面布局:顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度，当然您也可以将页面定义为中间只有两列等等，您只需要调整layout.css文件即可，这样您可以灵活的修改页面的布局，让页面外观发生根本的变化，而不必动到HTML源文件，这一点对于服务器端生成代码的程序尤为重要。 更多关于CSS布局的资料，请参见:http://www.w3cn.org/article/layout/2004/55.html
最新相关文章发表评论