<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Travel left · Travel right &#187; Html/Css</title>
	<atom:link href="http://blog.znzt.net/htmlcss/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.znzt.net</link>
	<description>Blog施工中....</description>
	<lastBuildDate>Sun, 04 Dec 2011 04:28:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>IE9等四款浏览器对比：网页加载速度类似</title>
		<link>http://blog.znzt.net/2788</link>
		<comments>http://blog.znzt.net/2788#comments</comments>
		<pubDate>Sat, 19 Mar 2011 03:45:01 +0000</pubDate>
		<dc:creator>青雨</dc:creator>
				<category><![CDATA[Html/Css]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[Safari]]></category>

		<guid isPermaLink="false">http://blog.znzt.net/?p=2788</guid>
		<description><![CDATA[国外媒体今天刊文，对IE9、火狐4、Chrome 10和Safari 5等4款最新的互联网浏览器进行了对比。以下为文章主要内容：一款最新的浏览器应当有以下功能：速度更快，用户界面更合理，能使用户更多地关注互联网内容，而非浏览器本身，用户还可以直接通过浏览器的地址栏进行搜索。这款浏览器还应当支持HTML5技术，并吸引第三方开发者为其开发插件，使用户获得个性化的浏览体验。 ]]></description>
		<wfw:commentRss>http://blog.znzt.net/2788/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>微软建“IE6倒计时” 网站呼吁用户停用IE6浏览器</title>
		<link>http://blog.znzt.net/2777</link>
		<comments>http://blog.znzt.net/2777#comments</comments>
		<pubDate>Sat, 05 Mar 2011 17:26:19 +0000</pubDate>
		<dc:creator>青雨</dc:creator>
				<category><![CDATA[Html/Css]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[微软]]></category>

		<guid isPermaLink="false">http://blog.znzt.net/?p=2777</guid>
		<description><![CDATA[2010年3月1日，微软宣布结束对IE6的主流支持。微软已经推出一个名为“IE6倒计时”的网站，呼吁用户停止使用IE6，改用更高版本的IE浏览器。一年前的今天，一场IE6葬礼隆重举行，微软IE团队还献上了挽词。如今，IE6依然是全球用户量最大的浏览器，尽管微...]]></description>
		<wfw:commentRss>http://blog.znzt.net/2777/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>FlashPlayer 10.1将灭掉HTML5</title>
		<link>http://blog.znzt.net/2664</link>
		<comments>http://blog.znzt.net/2664#comments</comments>
		<pubDate>Mon, 03 May 2010 16:24:08 +0000</pubDate>
		<dc:creator>青雨</dc:creator>
				<category><![CDATA[Html/Css]]></category>

		<guid isPermaLink="false">http://blog.znzt.net/?p=2664</guid>
		<description><![CDATA[是的，你没看错。我看“HTML是Flash杀手”，“Flash过时了”之类的句子都看到想吐了。所以我在这里说说自己对“Apple vs Adobe”之间的口角，以及“Flash vs HTML5”谁更优秀的看法。并且解释一下，为什么在我看来，应是FlashPlayer10.1将灭掉HTML5。首先申明，我有一个Mac笔记本，一个Windows系统的笔记本，一堆Windows桌面软件，还有一个iPhone。我很喜欢它们，特别是 iPhone，我认为这是一个真正的发生在手机上的革命。]]></description>
		<wfw:commentRss>http://blog.znzt.net/2664/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>微软IE9浏览器首次公开亮相 不支持WinXP系统</title>
		<link>http://blog.znzt.net/2594</link>
		<comments>http://blog.znzt.net/2594#comments</comments>
		<pubDate>Thu, 18 Mar 2010 00:41:22 +0000</pubDate>
		<dc:creator>青雨</dc:creator>
				<category><![CDATA[Html/Css]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://blog.znzt.net/?p=2594</guid>
		<description><![CDATA[微软下一代互联网技术大会MIX10第二天演示了第一版公开的Windows Internet Explorer 9平台，微软IE总经理 Dean Hachamovitch谈到，IE9将扩大对HTML5的支持，对图形处理GPU的硬件加速以及新的JavaScript引擎，不仅采用多核有效的管理计算资源和提高网络性能，还提升了开发者在富客户端应用的开发效率。同时在微软官网上放出了IE9开发者预览版，感兴趣的网友可以马上下载这款浏览器。]]></description>
		<wfw:commentRss>http://blog.znzt.net/2594/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google 搜索结果的富文本摘要开始支持 HTML 5 的 microdata</title>
		<link>http://blog.znzt.net/2579</link>
		<comments>http://blog.znzt.net/2579#comments</comments>
		<pubDate>Sat, 13 Mar 2010 02:30:49 +0000</pubDate>
		<dc:creator>青雨</dc:creator>
				<category><![CDATA[Html/Css]]></category>
		<category><![CDATA[Html]]></category>

		<guid isPermaLink="false">http://blog.znzt.net/?p=2579</guid>
		<description><![CDATA[HTML 5的新特性之一包括利用microdata来针对网页里的特殊架构信息做描述。

今天，Google搜索结果的富文本摘要开始支持microdata和 RDFa数据格式。只要使用microdata来标记出你的网页，Google就可以理解你网页里的评论、用户或事件信息，并将它们呈现在搜索结果的富文本摘要里。

比如页面里对“批萨店”的用户评论，HTML代码一般是这样的：
]]></description>
		<wfw:commentRss>http://blog.znzt.net/2579/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IE6,标准化网页一个凶残拦路者</title>
		<link>http://blog.znzt.net/2553</link>
		<comments>http://blog.znzt.net/2553#comments</comments>
		<pubDate>Sat, 06 Mar 2010 18:25:23 +0000</pubDate>
		<dc:creator>青雨</dc:creator>
				<category><![CDATA[Html/Css]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://blog.znzt.net/?p=2553</guid>
		<description><![CDATA[　　目前的浏览器市场格局逐渐成熟，主流品牌如IE、火狐（Firefox）、Opera、Safari、谷歌浏览器（GoogleChrome）等。IE6是微软InternetExplorer浏览器中的一个版本，是10年前随着WindowsXP一同发布的，这款整天被各大浏览器厂商和安全厂商甚至各国政府笔伐口诛的浏览器，现在连微软自己都希望IE6尽早消失，而国际上，同门师弟IE8在发布不到一年的时间里就超过了IE6的份额。而就这样的一款浏览器，在中国的市场竟然还占据着70%的市场份额，这可能着实让国际友人不能理解的。
]]></description>
		<wfw:commentRss>http://blog.znzt.net/2553/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>3种让PNG在IE6下透明的方案</title>
		<link>http://blog.znzt.net/2534</link>
		<comments>http://blog.znzt.net/2534#comments</comments>
		<pubDate>Sat, 27 Feb 2010 20:15:15 +0000</pubDate>
		<dc:creator>青雨</dc:creator>
				<category><![CDATA[Html/Css]]></category>
		<category><![CDATA[Css]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://blog.znzt.net/?p=2534</guid>
		<description><![CDATA[现在做很多页面，比如阴影，或很多情况要用到透明图，GIF图一般会有很多锯齿，
用PNG图吧，效果到是还好。Firefox和IE7以上版本都支持PNG透明，但IE6缺会显示灰白。

第一种，适用于图片做背景的时候。代码：]]></description>
		<wfw:commentRss>http://blog.znzt.net/2534/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>区分IE6，IE7，firefox三种浏览器的CSS HACK</title>
		<link>http://blog.znzt.net/2514</link>
		<comments>http://blog.znzt.net/2514#comments</comments>
		<pubDate>Tue, 23 Feb 2010 03:44:34 +0000</pubDate>
		<dc:creator>青雨</dc:creator>
				<category><![CDATA[Html/Css]]></category>
		<category><![CDATA[Css]]></category>

		<guid isPermaLink="false">http://blog.znzt.net/?p=2514</guid>
		<description><![CDATA[区分IE6，IE7，firefox三种浏览器的CSS HACK]]></description>
		<wfw:commentRss>http://blog.znzt.net/2514/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS盒子模式(DIV布局快速入门)</title>
		<link>http://blog.znzt.net/2513</link>
		<comments>http://blog.znzt.net/2513#comments</comments>
		<pubDate>Mon, 22 Feb 2010 01:26:52 +0000</pubDate>
		<dc:creator>青雨</dc:creator>
				<category><![CDATA[Html/Css]]></category>
		<category><![CDATA[Css]]></category>

		<guid isPermaLink="false">http://blog.znzt.net/?p=2513</guid>
		<description><![CDATA[如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些。 理解CSS盒子模型 什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 CSS盒子模式 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。 由“盒子”堆出来的网页版面 现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。 转变我们的思路 传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。 实现结构与表现分离 在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签： &#60;p&#62;加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。&#60;/p&#62; 如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了： &#60;p&#62;&#60;font color=&#8221;#FF0000&#8243; face=&#8221;宋体&#8221;&#62;段落内容&#60;/font&#62;&#60;/p&#62; 这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。 再直接列一段代码加深理解结构和表现相分离： 用CSS排版 &#60;style type=&#8221;text/css&#8221;&#62; &#60;!&#8211; #photoList img{ 　　height:80; 　　width:100; 　　margin:5px auto; } &#8211;&#62; &#60;/style&#62; &#60;div id=&#8221;photoList&#8221;&#62; &#60;img src=&#8221;01.jpg&#8221; /&#62; &#60;img src=&#8221;02.jpg&#8221; /&#62; &#60;img src=&#8221;03.jpg&#8221; /&#62; &#60;img src=&#8221;04.jpg&#8221; /&#62; &#60;img src=&#8221;05.jpg&#8221; /&#62; &#60;/div&#62; 不用CSS排版 &#60;img src=&#8221;01.jpg&#8221; [...]]]></description>
		<wfw:commentRss>http://blog.znzt.net/2513/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[Discuz]解决IE8上载图片附件时出现 &#8220;无效的图片文件&#8221; 错误</title>
		<link>http://blog.znzt.net/1909</link>
		<comments>http://blog.znzt.net/1909#comments</comments>
		<pubDate>Wed, 29 Jul 2009 22:47:49 +0000</pubDate>
		<dc:creator>青雨</dc:creator>
				<category><![CDATA[Html/Css]]></category>
		<category><![CDATA[Discuz!]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://blog.znzt.net/?p=1909</guid>
		<description><![CDATA[版本: Discuz! 5.5 , Discuz! 6.0 ,  Discuz! 6.1F ,  Discuz! 6.1 , Discuz! 7.0 版本: Discuz! 5.5 修改文件: post_attachments 模板 找 CODE: function insertAttach(id) { 在上面加上 CODE: function imageValue(id){         id.select();         return document.selection.createRange().text; } 找 CODE: $(&#8216;img_hidden&#8217;).alt = id; 在上面加上 CODE:             [...]]]></description>
		<wfw:commentRss>http://blog.znzt.net/1909/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

