直接用CSS+XML排版

王朝html/css/js·作者佚名  2006-01-09
宽屏版  字体: |||超大  

这篇文章可以看作是上一篇《谈一下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;

}

最后效果如图:

此主题相关图片

好了,最后还是那句话,网站无论设计还是制作,都要以内容为核心。内容无论用HTML标签包围还是被XHTML包围、还是XML包围,这些都不重要,关键是合理的组织好他们,然后拿起CSS这个强大的武器去美化她:)

End

全部代码下载:

此主题相关文件 155247.zip

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有