直接用CSS+XML排版

最新推荐文章于 2022-01-07 10:17:56 发布

changzheng

最新推荐文章于 2022-01-07 10:17:56 发布

阅读量2.9k

点赞数

分类专栏：原创文章文章标签： css xml xhtml generator rss firefox

本文链接：https://blog.csdn.net/changzheng/article/details/349282

版权

原创文章专栏收录该内容

22 篇文章 0 订阅

订阅专栏

这篇文章可以看作是上一篇《谈一下XHTML网页制作》的内容为核心的界面与版式分离观点继续，也可以当作只是奇巧淫技的一种展示。

P.S：如果想跟着一起做，请先安装Firefox（以下简称FF）浏览器，因为IE对CSS的标准支持不够完善。

XML文档，我们采用RSS的格式，这样大家也比较熟悉，你可以任意找一个RSS文件来做这个练习：）

首先，在你的RSS文件里加入

<?xml-stylesheet type="text/css" href="style.css"?>

如下图所示：

此主题相关图片

在FF中显示效果如下：

此主题相关图片

非常的杂乱无章，好了，我们先写下一句CSS，让他们都区分开来：

*{
display:block;
}

效果：

此主题相关图片

好了，接下来在Faridea RSS那个位置我们想换成我们的LOGO，写下如下CSS：

channel >title:before{
content:url("images/logo.gif");
}

此主题相关图片

你现在肯定开始为LOGO后面多余的Faridea RSS头疼了吧，怎么去掉他？把他的颜色改的和背景一样就是了：），抱歉使用这种奇巧淫技

好了，接下来，我们按照设计图加上背景色，设置字体，把不想显示的资料none掉，加入类似如下代码，放心全部的代码我会打在附件中。

channel{
background-color:#D9C4A6;
font-size:9pt;
}
channel >title{
color:white;
width:777px;
margin-left:auto; margin-right:auto;
/*background-color:white;*/
background:#FFFFFF url(images/top_bg.gif) top no-repeat;
padding:20px 0px 0px 0px;
}
channel >generator{
display:none;
}

最后效果如图：

此主题相关图片