XHTML+CSS制作样式风格切换的WEB站点

作者佚名技术来源 CSS技术浏览发布时间 2012-03-06

页面都是由一些类似的内容区块所组成，如：

站点标题区
站点导航(主菜单，次及菜单)
功能区(例如搜索框、用户登陆区)
内容区(文章正文或者文章、产品列表)
页脚(版权和有关法律声明)
然后我们用DIV标签来将这些区块包含起来，类似这样：

<div class="pageHeader">站点标题
</div>
<div class="pageNav">站点导航
</div>
<div class="catalogNav">栏目导航
</div>
<div class="pageContent">文章正文或列表等等
</div>
<div class="pageSearch">查询
</div>
<div class="pageBottom">页脚
</div>
通过CSS的定义，我们可以将这些DIV标签包含的区块放在页面上任何位置，再指定这些块的颜色、字体、边框、背景以及对齐属性等等。如：我们再建立siteLayout.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:

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3 4 5 6 7 8 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS去除表格的默认间距并且制作1px的细线表下一篇: 知道吗？H1标签同样也可以美化

关于XHTML+CSS制作样式风格切换的WEB站点的所有评论

随机推荐