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

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

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

4、定义站点独有的样式
经过以上两步之后，我们已经有了一个大概的页面主题外观，接下来我们要设计站点的细节，比如，对站点导航条我们想使用与普通超链接不一样的样式，如：蓝色、加粗、字体更大、再加上有立体效果的背景图：

. pageNav a:link, . pageNav a:hover, . pageNav a:visted (Color:#36c;
font-weight:bold; font-size:120%; background: url(images/bg_siteMenu.jpg) #36c;
)
对于栏目导航，我们想给每个栏目连接加上背景色，并且有鼠标滑过和移出的效果。栏目导航区的html代码为：

<div class="catalogNav">
        <ul>
            <li>
                <A href="1">栏目1</A>
            <li>

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

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

分享到：更多

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

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

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

随机推荐