用xslt+css让RSS显示的跟网页一样漂亮_XML基础

最近开始研究 XML+XSLT+CSS 构造网页..又拿自己的站的一部分当成实验品..
因为我把这个站的实验室的东西扔在别一个服务器上..可又懒得再做个首页,,,就同步了这边的 RSS.当首页
可没关联的样式的XML怎样看怎样不喜欢....

直接关联 CSS 能把 XML 能变成像样一点..虽然不是最终目的..可还是要学习一下..因为不是所有的浏览器都支持XSLT 
我能用到的浏览器好像都能认识关联的 CSS ~可惜单单 CSS 能做的事太少了. 还是xslt好..

写直接用于 XML 的 CSS 跟平时写的 CSS 基本没什么差别...只是元素名不同了.难度高高...写 HTML 的自由没有了...也不可以因为想要某个效果而乱加元素...
好像我的水平决定了我只能写出定义得比文本好看一下下的CSS, 接着.看例子. 跳掉..研究 XSLT 了

xslt 能做的事很多..xml 终于可以直接当网页用了..

打开一份别人写好的 xslt 发现....好多熟悉的东东..........
对于应用在RSS..我们对XLST只要知道

xsl:for-each select="rss/channel/item" 
xsl:value-of select="..." 
disable-output-escaping="yes" 
一个循环 一个选择节点....一个设置禁止输出转义时 
接着复制了我程序用的模板文件.....把 smarty 的标签直接换成 xsl 的..太像了..我连 html 都不用写..一路复制..
等网站的核心程序写完后我一定要尝试用xslt直接做smarty模板...

接着整理出一个单独的CSS 本以为就这样完了.........
-____________-!! 每次做网页时总会有些浏览器会闹闹情绪...这回是 moz 内核的....
我需要显示 CDATA 里的 HTML ,让他更像个网页,
可搜索跟我说 Mozilla 的 Transformiix 不支持 disable-output-escaping

我记得 feedburner 能在 Firefox 显示 CDATA 里的 HTML 代码~
看了他的 xslt 跟搜索的结果发现.......基本都是用JS的innerHTML把内容再写进一次就能显示........

原因我也不清楚.....学着大家方法.把 disable-output-escaping 勉强解决了.........

写 JS 时又发现...JS 有些怪怪的...比如....直接写在 xslt 里跟外链有些不同..
本想就一个页..一个 function 乱写能运行就行....结果又发现N多奇怪的问题..暂时也没时间去研究他....等有空再写些测试...

说了这样多的废话..
大家看看我的学习的结果, http://lab.loaoao.com 

扩展阅读 
http://www.w3.org/TR/xslt/ 
http://www.xml.org.cn/list.asp?boardid=8 
www.w3schools.com/xsl/ 
hedong.3322.org/archives/000044.html 

时间: 2024-09-20 05:41:29

用xslt+css让RSS显示的跟网页一样漂亮_XML基础的相关文章

分离到底!用XML+XSLT+CSS+JQuery+WebService组建Asp.Net网站

前言 早在Web标准化风潮到来之前,我就考虑过XML+XSLT建站了,我以为这是一种非常优雅.高效.低耦的方案,必将大行其道. 然而时至今日,使用这种方案建站的人依然寥寥无几,大家还都在抱着Web标准化不撒手,其实Web标准化只是将表现(Css)分离了出来,而数据和结构仍然混杂在一起,它绝对不是我们最终的归宿,它只是一个过渡品. XHtml标准的建立初衷,其实也就是为了向XML过渡的,XML+XSLT+CSS才真正做到数据.结构.表现的完美分离,才是我们的终极目标. 诚然,XML+XSLT确实有

如何用CSS将图片显示成圆角

  用CSS将图片显示成圆角的效果图. 看到了吧,这就是用纯CSS实现的圆角化图片,为了能看到透明化的效果,我特意应用了一个背景图片,你可以下载本模型到你的电脑中,随意伸缩窗口的大小,看看外圆角是否是透明的. 有了这种效果,你再也不愁给每一张图片作圆角的工作,这种效果在一些图片类的演示页面中经常见到,特别适用那些图片比较多的列表中.怎么样,效果还可以吧! 好了,我们来看看它的实现机制吧! 实现原理: 这种效果其实就是我在第二章中变体实现,下面讲一讲主要的关键代码. 主要变化的还是背景图片的定位,

分页-如何利用css print media打印样式对网页进行打印处理?固定页头和页脚?要求每页都要显示

问题描述 如何利用css print media打印样式对网页进行打印处理?固定页头和页脚?要求每页都要显示 求助?如何控制打印时分页,要求对列分页和对表格数据分页,打印时不要出现滚动条?路过的大神帮帮忙啊!不胜感激.打印界面如上图所示,数据界面 解决方案 这是数据界面,点击打印按钮,弹出打印界面,并渲染打印界面 解决方案二: fixed定位,不出现滚动条设置overflow:hidden @media print{ #top#foot{position:fixed;width;100%;lef

css 代码高度显示定义方法

 代码如下 复制代码 <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css 代码高度显示定义方法</title> <style type="text/css

网页制作-手机显示电脑版网页错位,截图说明,跪请技术支持~

问题描述 手机显示电脑版网页错位,截图说明,跪请技术支持~ 不好意思问个问题 ,找了2天了,我实在是找出来问题出在哪里,百度也查了,就是pc版到手机端的显示不正常,手机端显示的也是电脑版,非响应试和专门的手机站. 1.html标签显示为980px,然后 头部 图片和底部通栏 撑不出来,并且不能居中,正常版心为1140: 2.中间能撑出来,不过也不能居中: 手机显示电脑版错位:pc端 显示正常 解决方案 http://bbs.csdn.net/topics/391914801 解决方案二: 楼主已

jquery+CSS实现的水平布局多级网页菜单效果_jquery

本文实例讲述了jquery+CSS实现的水平布局多级网页菜单效果.分享给大家供大家参考.具体如下: 这里演示的Jquery和CSS共同实现的网页常见的导航菜单,支持两级形式,蓝色风格,最多支持二级,三级可能要对代码进行改造了.本菜单属于中规中矩型,实用性比较强,适合的网站种类也是很多的,希望大家会喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-scroll-nav-menu-style-codes/ 具体代码如下:

想抛出异常,把错误显示到出错网页上来

问题描述 点击"查询"按钮报错:"/"应用程序中的服务器错误.--------------------------------------------------------------------------------Flight说明:执行当前Web请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息.异常详细信息:System.Exception:Flight源错误:行258:catch(Exceptionex)行

CSS定义网页布局漂亮的Button按钮代码

css定义网页布局漂亮的button按钮代码 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

谷歌搜索结果总是优先显示谷歌自身网页的相关链接

摘要: 新浪科技讯 北京时间12月14日上午消息,谷歌周一对诸多网站指责谷歌搜索结果偏袒自身网页做出了回应,表示欢迎对谷歌搜索操作进行讨论,这一做法是为了方便网民尽快寻找到最佳 新浪科技讯 北京时间12月14日上午消息,谷歌周一对诸多网站指责谷歌搜索结果偏袒自身网页做出了回应,表示欢迎对谷歌搜索操作进行讨论,这一做法是为了方便网民尽快寻找到最佳信息.此前其他网站抱怨称,谷歌搜索结果总是优先显示谷歌自身网页的相关链接. 谷歌产品管理主管卡尔特·马斯兰(Carter Maslan)周一在谷歌公开博客