<?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>WEB前端开发 &#187; html+css</title>
	<atom:link href="http://www.css88.com/archives/category/xhtmlcss/feed" rel="self" type="application/rss+xml" />
	<link>http://www.css88.com</link>
	<description>专注前端开发，关注用户体验</description>
	<lastBuildDate>Mon, 06 Feb 2012 13:31:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>时尚的CSS3进度条</title>
		<link>http://www.css88.com/archives/4381</link>
		<comments>http://www.css88.com/archives/4381#comments</comments>
		<pubDate>Sun, 01 Jan 2012 09:13:22 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[css3]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4381</guid>
		<description><![CDATA[时尚的CSS3进度条先看效果图，非常漂亮吧： demo：http://www.css88.com/demo/css3-progress-bars/ 英文原文：http://www.red-team-design.com/stylish-css3-progress-bars HTML代码： HTML代码比较简单 123&#60;div class=&#34;progress-bar blue stripes&#34;&#62; &#160; &#160; &#60;span style=&#34;width: 40%&#34;&#62;&#60;/span&#62; &#60;/div&#62; .progress-bar – 定义进度栏的常规样式。 .blue – 定义进度条的风格，这里是蓝色的 .stripes – 当前进度的动画类型。 span – 填充进度条。内联设置的宽度，0%-100%，进度条的宽度。 CCS代码： 123456789101112131415161718192021222324252627282930.progress-bar &#123; background-color: #1a1a1a; height: 25px; padding: 5px; width: 350px; margin: 50px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 5px #000 inset, 0 1px [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4381/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>用CSS3做的动画按钮</title>
		<link>http://www.css88.com/archives/4377</link>
		<comments>http://www.css88.com/archives/4377#comments</comments>
		<pubDate>Sun, 01 Jan 2012 08:03:15 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[动画]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4377</guid>
		<description><![CDATA[在Codrops上看到了这篇文章《Animated Buttons with CSS3》，按钮效果非常赞！转过来分享一下： demo：http://www.css88.com/demo/AnimatedButtons/ (页面有广告，点击需谨慎！！！) 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《用CSS3做的动画按钮》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4377/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS Filter</title>
		<link>http://www.css88.com/archives/4349</link>
		<comments>http://www.css88.com/archives/4349#comments</comments>
		<pubDate>Sat, 24 Dec 2011 12:52:48 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[CSS Filter]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4349</guid>
		<description><![CDATA[今天在前端观察上看到了《-webkit-filter是神马？》，感觉特别有意思，具体关于CSS Filter可以看Filter Effects 1.0,以及 filter功能，Webkit率先支持了这几个功能，效果非常赞+10086！ 支持的效果有： blur（模糊） grayscale（灰度） drop-shadow（阴影） sepia（褐色滤镜） brightness（亮度） contrast（对比） hue-rotate（色相） invert（反相） saturate（饱和度） opacity（透明度） &#160; Chrome 18.0.976.0以上版本看这个demo： http://www.css88.com/html5-demo/-webkit-filter/index.html 或 （翻墙）http://html5-demos.appspot.com/static/css/filters/index.html 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《CSS Filter》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4349/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>28个你必须知道的HTML5的新特性，技巧以及技术</title>
		<link>http://www.css88.com/archives/4340</link>
		<comments>http://www.css88.com/archives/4340#comments</comments>
		<pubDate>Fri, 16 Dec 2011 01:43:59 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[前端资源]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4340</guid>
		<description><![CDATA[原文：http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/ 译文来自：http://adamlu.com/?p=584 总结一下： 1. 新的Doctype 尽管使用&#60;!DOCTYPE html&#62;，即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用&#60;figure&#62;和&#60;figcaption&#62;来语义化地表示带标题的图片 &#60;figure&#62; &#60;img src="path/to/image" alt="About image" /&#62; &#60;figcaption&#62; &#60;p&#62;This is an image of something interesting. &#60;/p&#62; &#60;/figcaption&#62; &#60;/figure&#62; 3. 重新定义的&#60;small&#62; &#60;small&#62;已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明 4. 去掉link和script标签里面的type属性 5. 加/不加 括号 HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签 6. 让你的内容可编辑，只需要加一个contenteditable属性 7. Email Inputs 如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验 8. Placeholders 这个input属性的意义就是不必通过javascript来做placeholder的效果了 9. Local Storage 使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在 10. 语义化的header和footer 11. 更多的HTML5表单特性 12. [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4340/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>CSS3动画效果-animate.css</title>
		<link>http://www.css88.com/archives/4336</link>
		<comments>http://www.css88.com/archives/4336#comments</comments>
		<pubDate>Wed, 14 Dec 2011 02:07:14 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[animate]]></category>
		<category><![CDATA[css3]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4336</guid>
		<description><![CDATA[animate.css 是提供炫酷，有趣，跨浏览器css3动画的网站，你可以在高级项目中使用这些效果，为高级浏览器用户提供更好的交互体验。动画效果包括强调突出，滑块，淡入淡出，放大缩小等等。你也可以结合jQuery一起使用，例如$(&#8216;.bouncy&#8217;).addClass(&#8216;bounceInDown&#8217;); 项目主页：http://daneden.me/animate/ git地址：https://github.com/daneden/animate.css 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《CSS3动画效果-animate.css》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4336/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>用纯CSS3做成的Path菜单效果</title>
		<link>http://www.css88.com/archives/4252</link>
		<comments>http://www.css88.com/archives/4252#comments</comments>
		<pubDate>Mon, 05 Dec 2011 14:05:48 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[css3]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4252</guid>
		<description><![CDATA[文章来自36氪 Path的UI惊起哇声一片，最大的亮点无疑是左下角的菜单展开效果。于是有各个版本的仿Path菜单出现，比如我们之前报道过的国内某牛人的作品，这里还有若干个关于Path菜单的讨论。但最引人注意的还是来自法国小伙Victor的作品：用纯CSS3制作的Path菜单效果。 他说他喜欢Path的新界面，尤其是添加菜单，作为一个前端设计师的他打算在浏览器里实现同样的效果。以下是他制作的一段视频： 整个作品通过html/css3完成，没有使用任何图片，没有任何javascript。因此仅支持Webkit浏览器。Victor通过Sass+Compass计算每个图标的坐标，并生成了动画效果。你不用重写代码就可以添加或删除项目。 实际效果请移步至这里，你可以在github上找到这段源代码。 &#160; 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《用纯CSS3做成的Path菜单效果》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4252/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>html5客户端本地存储之sessionStorage及storage事件</title>
		<link>http://www.css88.com/archives/4210</link>
		<comments>http://www.css88.com/archives/4210#comments</comments>
		<pubDate>Fri, 02 Dec 2011 05:14:51 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[JS]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[localStorage]]></category>
		<category><![CDATA[sessionStorage]]></category>
		<category><![CDATA[storage]]></category>
		<category><![CDATA[事件]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4210</guid>
		<description><![CDATA[首先您可以看一下《JavaScript本地存储实践（html5的localStorage和ie的userData）》 sessionStorage和上文中提到的localStorage非常相识，方法也几乎一样： 非常通俗易懂的接口: sessionStorage.getItem(key):获取指定key本地存储的值 sessionStorage.setItem(key,value)：将value存储到key字段 sessionStorage.removeItem(key):删除指定key本地存储的值 sessionStorage.length是sessionStorage的项目数 直接上demo：http://www.css88.com/demo/sessionStorage/ sessionStorage与 localStorage 的异同 sessionStorage 和 localStorage 就一个不同的地方， sessionStorage数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时，之前的存储已经被清除。而 localStorage 是一个持久化的存储，它并不局限于会话。 sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码： var storage = window.localStorage; for (var i=0, len = storage.length; i &#60; len; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + &#34;=&#34; + value); } sessionStorage 和 localStorage的clear()函数的用于清空同源的本地存储数据，比如localStorage.clear()，它将删除所有同源的本地存储的localStorage数据，而对于Session Storage，它只清空当前会话存储的数据。 关闭页面会导致 sessionStorage 的数据被清除，但刷新或重新打开新页面数据还是存在，如果需要存储的只是少量的临时数据。我们可以使用sessionStorage 。或者做页面间的小交互。 sessionStorage 和 [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4210/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>行内元素vertical-align:middle在html5和xhtml1.0及以下版本中的表现差异</title>
		<link>http://www.css88.com/archives/4113</link>
		<comments>http://www.css88.com/archives/4113#comments</comments>
		<pubDate>Sat, 08 Oct 2011 13:42:11 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[vertical-align]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4113</guid>
		<description><![CDATA[今天在做页面的时候无意中发现静态页面中小图标和文本对的很齐的，在线上的页面却小图标和文本没有对齐。同事啄木鸟找出的原因是静态页面和线上的页面的html DOCTYPE不一样，静态页面为html5，线上的页面xhtml 1.0；一直以为xhtml和html5表现上是一样的，只是DOCTYPE不一样！ 经过同事啄木鸟多番测试终于找出了差异的问题所在，那就是行内元素的vertical-align:middle样式。详细看demo1 (DOCTYPE为HTML 5)和demo2 (DOCTYPE为XHTML 1.0)。 注： 以上demo只测试了firefox 7和chrome，ie各个版本没有测试； DOCTYPE为xhtml 1.1和DOCTYPE为html5的表现一致； DOCTYPE为xhtml 1.0和DOCTYPE为html 4的表现一致； 产生差异的具体原因未知，未做深入学习，其他css属性不知道是不是也会存在细微的差异，如果您知道原因或者也碰到过这方面的问题，欢迎留言告知交流，感激不尽！ 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《行内元素vertical-align:middle在html5和xhtml1.0及以下版本中的表现差异》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4113/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>方便的CSS和jQuery下拉菜单解决方案</title>
		<link>http://www.css88.com/archives/4040</link>
		<comments>http://www.css88.com/archives/4040#comments</comments>
		<pubDate>Wed, 31 Aug 2011 11:37:48 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4040</guid>
		<description><![CDATA[来源：http://www.designerterminal.com/resource/jquery/css-jquery-dropdown-menu-solutions.html 如果您正在 寻找 一些很酷 的 下拉菜单解决 方案 ， 那么这些要 。今天 ， 我收集了 一些有用的 CSS和jQuery 下拉菜单 解决 方案 。 Creating a pure CSS dropdown menu Sexy Drop Down Menu w/ jQuery &#38; CSS &#160; Sliding Jquery Menu Perfect Dropdown Login Box like Twitter using jQuery CSS3 Dropdown Menu Create Vimeo-like top navigation &#160; A Different Top [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4040/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Tip中小三角的实现</title>
		<link>http://www.css88.com/archives/3904</link>
		<comments>http://www.css88.com/archives/3904#comments</comments>
		<pubDate>Tue, 26 Jul 2011 08:51:13 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[html5+css3]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=3904</guid>
		<description><![CDATA[前段时间专门研究了一下腾讯微博的Tip，很有意思！tip中的小箭头是用“◆”（encode为：&#38;#9670;）字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是：比如tip有border时，也可以用两个绝对定位的“◆”字符模拟。如图： 注意：最好根据您的实际情况设置“◆”的字体，我这里用了宋体，有棱有角真好！ demo页面：http://www.css88.com/demo/tipbox/ 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《Tip中小三角的实现》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/3904/feed</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
	</channel>
</rss>

