<?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; CSS</title>
	<atom:link href="http://www.web7d.com.cn/category/designade/css-designade/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.web7d.com.cn</link>
	<description></description>
	<lastBuildDate>Thu, 01 Dec 2011 14:24:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>5个小技巧来改进你的CSS编写，提高工作效益</title>
		<link>http://www.web7d.com.cn/2011/03/5-tips-css/</link>
		<comments>http://www.web7d.com.cn/2011/03/5-tips-css/#comments</comments>
		<pubDate>Fri, 25 Mar 2011 03:05:10 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[网页技巧]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css技巧]]></category>
		<category><![CDATA[css规范]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2314</guid>
		<description><![CDATA[好长时间没有去写css了，搜索下css,发现“5种方法立刻写出更好的CSS代码”这篇文章不错，对于编写CSS有很大的帮助，减少工作量提高工作效率是我们编写的目标；以下5个小技巧来改进你的CSS吧！ 1.重置 首先，很认真的告诉你，总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset 或者你自己编写的重置代码，只要使用就对了。 它能很简单的移除所有元素的填充（padding）和边距（margin）： html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用（重置样式表），而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它（的重置样式表），建立属于自己的重置样式 表。 噢，请停止使用： * { margin: 0; padding: 0; } 花更多的时间去制作它，当你移除了填充（padding）你认为单选按钮会发生什么变化？表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。 2.排序 一个小的测试 [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2011/03/5-tips-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>使用CSS3 Text-Shadow创造效果非常酷的文本</title>
		<link>http://www.web7d.com.cn/2010/12/%e4%bd%bf%e7%94%a8css3-text-shadow%e5%88%9b%e9%80%a0%e6%95%88%e6%9e%9c%e9%9d%9e%e5%b8%b8%e9%85%b7%e7%9a%84%e6%96%87%e6%9c%ac/</link>
		<comments>http://www.web7d.com.cn/2010/12/%e4%bd%bf%e7%94%a8css3-text-shadow%e5%88%9b%e9%80%a0%e6%95%88%e6%9e%9c%e9%9d%9e%e5%b8%b8%e9%85%b7%e7%9a%84%e6%96%87%e6%9c%ac/#comments</comments>
		<pubDate>Mon, 06 Dec 2010 07:55:26 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[Text-Shadow]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2094</guid>
		<description><![CDATA[在CSS3的text &#8211; shadow属性已经有一段时间了，通常用于重新创建Photoshop的阴影类型阴影添加有助于增加深度，尺寸并取消从页面元素微妙的阴影。 支持浏览器（Safari浏览器，浏览器，Firefox），看看他们在其所有的效果。 View the demo How text-shadow works 文字阴影CSS属性是用来增加阴影相关的HTML元素的任何文本。该语法包括为X -偏移，在Y偏移量，模糊量，最后实际阴影的颜色数字。更何况，你没有解决与一个影子，你可以建立多个文字阴影值来创建一些非常酷的效果！ Vintage / Retro text effect text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070; How it works: 复古风格的文字效果是由两个文本阴影，但首先是设置为与背景相同的颜色，以便让第二个阴影（薄暗灰色的）是抵销右下角的印象。请记住，以确保你的第一个阴影的颜色设置为与您的网页背景相同的颜色，文本和第二的影子也都使用相同的颜色。 View the demo Neon text effect text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/12/%e4%bd%bf%e7%94%a8css3-text-shadow%e5%88%9b%e9%80%a0%e6%95%88%e6%9e%9c%e9%9d%9e%e5%b8%b8%e9%85%b7%e7%9a%84%e6%96%87%e6%9c%ac/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>70 + 必备 CSS3 和 HTML5 教程资源收集</title>
		<link>http://www.web7d.com.cn/2010/08/70-css3-html5-turorials/</link>
		<comments>http://www.web7d.com.cn/2010/08/70-css3-html5-turorials/#comments</comments>
		<pubDate>Wed, 25 Aug 2010 09:05:11 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[资源]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2030</guid>
		<description><![CDATA[CSS3 和 HTML5 足以够彻底改变网站设计的现状。许多新的特性和功能，以前可能需要想破头皮使用各种手段去实现。然而当 CSS3 和 HTML5 将其纳入本地属性后，无论是圆角效果还是多栏布局，一切变得简单易用。 以下是70资源，教程和文章，让你开始对CSS3和HTML 5。所讨论的许多技术已经被支持了一些在一些一些现代网络浏览器（Safari和Firefox的程度上拥有最广泛的支持），这样你就可以立即开始。 CSS3 教程和资源 Get Started with CSS 3 &#8211; 一个基本的 CSS3 使用指南。 Cascading Style Sheets Current Work &#8211; W3C 所做的 CSS3 标准的进展细节。 Border-image: Using Images for Your Border &#8211; 一份 CSS3 新增图像边框功能的使用指南。 Overview of CSS3 Structural Pseudo-Classes &#8211; 方便的 CSS3 结构化伪类参考图表。 Push Your Web Design Into [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/08/70-css3-html5-turorials/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>关于 CSS 我们是不是已经走得太远？</title>
		<link>http://www.web7d.com.cn/2010/08/are-we-taking-css-too-far/</link>
		<comments>http://www.web7d.com.cn/2010/08/are-we-taking-css-too-far/#comments</comments>
		<pubDate>Mon, 23 Aug 2010 06:07:28 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[设计杂谈]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2014</guid>
		<description><![CDATA[CSS 是了不起的技术，我第一次用到的时候，觉得这是我做梦都想不到的东西，随着 CSS3 的引入，圆角，阴影，旋转等等技术更将 CSS 带到前所未有的高度。然而，关于 CSS，我们是不是已经走得太远，本文以一个 Web 设计师的角度对 CSS 的一些实验性应用做了另一种思考。 那些有关 CSS 的前卫实验 几个月前，作者在 Six Revisions 发表了一篇文章，介绍了 5 个有趣的 CSS 实验： CSS3 Transforms &#38; @font-face Experiment CSS Posters Pure CSS Line Graph CSS3 Leopard-style Stacks Pure CSS Twitter Fail Whale 每个实验都是用了不同的方法，其中一些，如 CSS 线图，在现实中可以找到实际的应用，其它的，如 CSS 实现的 Twitter Fail Whale 图画，则纯属实验，这些实验的目的仅仅为了说明 CSS 能够实现的效果，并不意味着应当这样来做。 让我们实际一点 上图是用纯 CSS [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/08/are-we-taking-css-too-far/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>让IE6,IE7,IE8支持css3属性</title>
		<link>http://www.web7d.com.cn/2010/08/ie6-ie7-ie8-css3/</link>
		<comments>http://www.web7d.com.cn/2010/08/ie6-ie7-ie8-css3/#comments</comments>
		<pubDate>Mon, 23 Aug 2010 06:00:49 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[设计杂谈]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[css圆角]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2012</guid>
		<description><![CDATA[IE6，7并不支持CSS3的属性，IE8也不能很好的支持CSS3。如何让ie支持border-radius (rounded), box-shadow ( shadow), text-shadow等这些属性呢？这里介绍一个通过htc脚本实现这些属性的方法。 首先下载ie-css3.htc脚本。 然后在css中加入 behavior: url(ie-css3.htc); .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/08/ie6-ie7-ie8-css3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>使用jQuery和CSS制作一个精巧的手机应用网站</title>
		<link>http://www.web7d.com.cn/2010/08/making-slick-mobileapp-website-jquery-css/</link>
		<comments>http://www.web7d.com.cn/2010/08/making-slick-mobileapp-website-jquery-css/#comments</comments>
		<pubDate>Tue, 17 Aug 2010 06:34:02 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaScript / JQuery]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[图片展示]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2007</guid>
		<description><![CDATA[做为网页开发人员，你的工作必须要对细节的关注。一个好的交互应用它往往是会留下持久的印象，无论是可爱的人物画像，或独特的幻灯片。 今天，我们正在一个完整的jQuery和CSS的网页，一个虚构的移动应用。它是将功能语义标记和逐步增强的幻灯片效果。它将使用户能够看到最流行的移动应用程序运行智能手机。 MEDO Download Step 1 – XHTML 当网站建设，重要的是你躺在一个语义方式代码。这将包括使用他们被认为是用来标记。您应该使用标题标题，文字段落，而不是一般div的（），并列出如适用。 mobileapp.html &#60;div id="page"&#62; &#60;h1 id="logoh1"&#62;&#60;a href="/" id="logo"&#62;MobileApp - the most useful mobile app!&#60;/a&#62;&#60;/h1&#62; &#60;div id="phoneCarousel"&#62; &#60;div&#62;&#60;/div&#62; &#60;div&#62;&#60;/div&#62; &#60;div id="stage"&#62; &#60;img id="iphone" src="img/phones/iphone.png" width="270" height="400" alt="iPhone" /&#62; &#60;img id="nexus" src="img/phones/nexus_one.png" width="270" height="400" alt="Nexus One" /&#62; &#60;img id="nokia" src="img/phones/nokia.png" width="270" height="400" alt="Nokia" /&#62; &#60;img id="blackberry" src="img/phones/blackberry.png" width="270" height="400" [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/08/making-slick-mobileapp-website-jquery-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS悬停图片上，下方出文字效果</title>
		<link>http://www.web7d.com.cn/2010/08/popout-details-on-hover/</link>
		<comments>http://www.web7d.com.cn/2010/08/popout-details-on-hover/#comments</comments>
		<pubDate>Wed, 04 Aug 2010 06:30:11 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[CSS悬停]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1994</guid>
		<description><![CDATA[最近,我看见一个鼠标悬停在图片上的技巧,引起了我的注意,我认为它是一个很聪明的方式显示更多的细节上的一个元素。我决定试试看,解决的方法很简单。 View Demo HTML 该列是由无序的列表项，在每个列表项的缩略图，并在一类项目的包裹详情"info". &#60;ul&#62; &#60;li&#62; &#60;a href="#"&#62;&#60;img src="thumbnail.jpg" alt="" /&#62;&#60;/a&#62; &#60;div&#62; &#60;h2&#62;Title&#60;/h2&#62; &#60;p&#62;Short Description&#60;/p&#62; &#60;/div&#62; &#60;/li&#62; &#60;/ul&#62; CSS 首先样式列表项，我们添加 position: relative; 到列表项目，然后在悬停我们提出的 z-index 至 99比其他元素上层，不被覆盖。 /*--Column Styles--*/ ul.columns { width: 960px; list-style: none; margin: 0 auto; padding: 0; } ul.columns li { width: 220px; float: left; display: inline; margin: 10px; padding: 0; position: [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/08/popout-details-on-hover/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>使用CSS和JQuery轻松切换网页显示样式</title>
		<link>http://www.web7d.com.cn/2010/08/jquery-display-switch/</link>
		<comments>http://www.web7d.com.cn/2010/08/jquery-display-switch/#comments</comments>
		<pubDate>Wed, 04 Aug 2010 06:04:59 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaScript / JQuery]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[JQuery切换样式]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1989</guid>
		<description><![CDATA[这篇文章讲述的是如何通过CSS和JQuery来实现在页面上快速切换布局（样式）的功能。这样做的好处是不言而喻的，现在的网页设计都是希望增强与用户的互动性。允许改变页面布局或信息展示方式无疑可以提高用户体验，选择他们喜欢的样式去获取信息。 首先我们看一下最终效果 我们来看一下它的创作过程（不止是完成切换功能，而是整个页面的设计要点）： 第一步：创建一个漂亮别致的边框 我们首先通过一个无序列表标签(ul)来设计一个垂直的列表布局，用它来作为我们信息显示的行和列。 HTML &#60;ul class="display"&#62; &#60;li&#62;&#60;/li&#62; &#60;li&#62;&#60;/li&#62; &#60;/ul&#62; CSS 提示：通过使用不同灰色的边框实现了一个漂亮别致的边框效果 ul.display { float: left; width: 756px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #333; border-right: 1px solid #333; background: #222; } ul.display li { float: left; width: 754px; padding: 10px 0; margin: 0; border-top: 1px solid #111; border-right: 1px solid [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/08/jquery-display-switch/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>常用CSS书写习惯整理</title>
		<link>http://www.web7d.com.cn/2010/08/stock-css-write-neaten/</link>
		<comments>http://www.web7d.com.cn/2010/08/stock-css-write-neaten/#comments</comments>
		<pubDate>Wed, 04 Aug 2010 03:57:05 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[CSS hack]]></category>
		<category><![CDATA[css兼容]]></category>
		<category><![CDATA[CSS写法]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1987</guid>
		<description><![CDATA[不同的浏览器，比如Internet Explorer 6，Internet Explorer 7，Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不 同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 比如 IE6能识别下划线“_”和星号“ * ”，IE7能识别星号“ * ”，但不能识别下划线“_”，而firefox两个都不能认识。等等 书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面列举常用的CSS hack方法 1：!important !important作用是提高指定样式规则的应用优先权。 IE7以及所有标准浏览器能识别!important 区别IE6与IE7与其他浏览器 以下为引用的内容： .browserTest { border:20px solid #60A179 !important; border:20px solid #00F; } 在Mozilla中或者IE7浏览时候，能够理解!important的优先级，因此显示#60A179的颜色： 在IE6中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色： 2：* IE都能识别*；标准浏览器（如火狐）不能识别* 区别IE6与火狐 以下为引用的内容： .browserTest { border:20px solid #60A179; *border:20px solid #00F; } 区别IE7与火狐 以下为引用的内容： .browserTest { border:20px solid [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/08/stock-css-write-neaten/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS3 Media Queries：移动 Web 的完美开端</title>
		<link>http://www.web7d.com.cn/2010/07/css3-media-queries/</link>
		<comments>http://www.web7d.com.cn/2010/07/css3-media-queries/#comments</comments>
		<pubDate>Mon, 26 Jul 2010 01:47:51 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[Media Queries]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1969</guid>
		<description><![CDATA[移动时代，是任何 Web 设计与开发者都不能忽视的一个时代，总有一天，你设计的东西将被显示在两种屏幕上，桌面大屏幕和移动小屏幕，如何让同一个网站同时适应完全不同的两种尺寸的屏幕，这是一个很久以来都没有完美解决方案的问题，直到有了 CSS3。 CSS3 的 Media Queries 在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据： 浏览器窗口的宽和高 设备的宽和高 设备的手持方向，横向还是竖向 分辨率 如果用户有一个支持 Media Queries 的设备，我们就可以为该设备编写专门的 CSS，让网站适应这个设备的小屏幕，英国的 Web 技术大会 dConstruct 便基于该技术推出他们的 2010 年大会网站，手机也可以轻松访问，以下是该网站的桌面版和手机版截图： 这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在 iPhone，Opera Mini， Android 等设备上有完全一致的表现。 使用 Media [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/07/css3-media-queries/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

