<?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; 设计开发</title>
	<atom:link href="http://www.web7d.com.cn/category/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>Photoshop网站布局转化为XHTML/CSS攻略</title>
		<link>http://www.web7d.com.cn/2011/03/photoshop-web-xhtmlcss/</link>
		<comments>http://www.web7d.com.cn/2011/03/photoshop-web-xhtmlcss/#comments</comments>
		<pubDate>Fri, 25 Mar 2011 04:46:11 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[教程]]></category>
		<category><![CDATA[设计杂谈]]></category>
		<category><![CDATA[Photoshop网站布局]]></category>
		<category><![CDATA[XHTML/CSS]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2316</guid>
		<description><![CDATA[本攻略旨在介绍将网站的图形化布局转变成有效的符合XHTML/CSS规范的代码。首先从Photoshop文件导出诸图元开始，依次介绍如何创建整个页面。 除非你不知，本教程的第一部分是《如何用Photoshop设计简洁时尚的网站布局》（原文：Create a Clean Modern Website Design in Photoshop），其中讲述如何组织“像素酱”（Pixel Juice）网站的图形化元素。 现在，我们来看主页的XHTML/CSS创建步骤。从导出图片开始，依次用最自然的HTML元素生成结构并用CSS来添加样式。 作为概览，这里红色显示的是网站结构里使用的各个Div。 从多图层的PSD文件着手，拆出一块背景图。使其保有精细的纹理，选区要大，以便其无缝拼接。并保存为网页高画质格式。 紧贴logo周围绘制一个选区，用CMD+SHIFT+C来做合并复制，继续保存为网页格式。 对大标题依法炮制。有着阴影效果，并延用logo字体的这部分是不能纯粹通过CSS来实现的。我们还是用图像替换技巧来弄。 在图中MacBook笔记本处绘制选区，关掉MacBook中推荐网站的图层显示。 关闭侧栏图层中文字图层显示。绘制选区，使其包含顶部圆角及主体部分。 粘贴选取的侧栏图片到新文件中。用剪裁工具使画布竖直拉长。在图片底部开始绘制选区，使其包含竖直边框以及背景颜色。按下CMD+T（windows用户：Ctrl+T），将该部分拉伸并覆盖整个画布。这样会给HTML元素拉伸提供足够的空间。 在主文件中，选取侧栏的其余部分，使其恰含底部圆角。 复制边栏的按钮并粘贴到新文件。向下扩展画布至两倍大小。在相反方向调整按钮的渐变效果以使其有压缩感，然后粘贴图像到新位置。 导出一份输入框的图片拷贝，并分别包含一个空白版本（切掉文字部分）。 最后我们会有各种元素的图片集合，这些图片将被用来在CSS中写成背景图片。在MacBook屏幕中的幻灯效果也将有对应的解决办法。 新 建一个HTML文件，用严格文件类型（Strict Doctype）定义（“过渡类型”，Transitional，是给那些娘娘腔用的）。输入页面标题，并附加一个样式文件。手写文档结构，一个div主 容器，一个header子容器标签包含网站名部分，并用无序列表创建导航。 所有包含在漂浮（float）元素中的div元素必须使用清除（clear）。这可以通过添加clear类来完成，我们将在CSS编码阶段完成。 用div创建紫色的标题部分，在div里面写上相关的文字。推荐词及段落用一个小字体，包含在第二个header容器中。 用第二个div来包含featured work列表。列表中每个li包含一个截图，并用alt标签标识。 将下一部分分割为有id标识为“content”的div元素。在其内部定义一个id为“main”的div。这个区块开始部分为一个大的段落，并设为三级标题标签h3。随后的每个段落最适于用段落标签p。 “最新消息”部分分为两栏，这一部分需要浮动，所以加上一个“latest-news”的类。而且不要忘了加“clearing”类。这一部分是含最新新闻标题的两个列表元素，以及一小段内容代码。这儿最自然的HTML元素将是ul。 侧栏id为“side”。这一区域为叫“featured-project”的div。这样做很顺手，用一个元素来附加两个用作侧栏背景的图片之一。 页脚区域是在概念图中在灰色条带内显示，所以在文件末尾加上footer-container的容器，以此用CSS来实现它。在其内添加footer的div来包裹元素，然后写出页脚三部分各自的div。 登录部分的div是假想的控制面板登录框。是用表单来完成的。概念图中没有使用单独的标签，为流线设计。但实际中因可访问性问题应该使用。 现在可以用干净的CSS来给HTML骨架长出肌肉来。首先使用一个简单的重置代码来移除浏览器默认设置。而且加上clear类的代码，作为跨浏览器浮动元素清零方案。这部分的例子是清零技巧（clearfix technique）。 用普通的字体族来定义body样式，并用重复的背景来营造main部分的条纹。container容器宽度设为960px，居中代码是margin: 0 auto; 20-22行的代碼給header加上“高”和“頂部填充”的樣式。然後是一級標題標籤，用圖像替換技巧來顯示像素醬的logo。先把錨記的默認設置內聯元素改成區塊元素，這樣就可以指定高寬來匹配圖像文件的尺寸了。然後將該元素設為浮動，這樣導航就可以緊接其後，而且圖像背景也加上了。最後原鏈接文字用超大的負縮進來移出視野。 接下來是導航鏈接，先移除默認的項目符，浮動到一側，加上小邊距。每個單獨的列別元素向左浮動，並設好邊距和填充。最後將鏈接的懸浮模式和正常模式設成特定的字體大小和顏色。 接著來看紫色標題。該div背景圖為MacBook的圖片，向右對齊。這部分的文字是通過圖像替換技巧實現的，段落字體為普通。“Work with us”連接樣式為背景色，在懸浮狀態下發生改變。 項目列表目前顯示了五個元素，但在MacBook的屏幕上我們只想讓其顯示一個。首先UL用相對定位來將其就位，然後設定截圖的寬高。“溢出隱藏”將多餘的四幅圖像隱去，之後用javascript讓其重現。 主體內容的樣式添加在content這個div下，給段落和鏈接賦予期望的顏色和大小。然後main這個div居左浮動，寬度給成在Photoshop中設計時柵格的寬度。 最新消息列表也是居左浮動，這樣它們就可以並排顯示了。每個元素給予其父容器的一半寬度，除去適應盒模型而右填充的部分。 側邊欄然後設為向右浮動，挨著main部分。背景圖像用先前導出的那個。子容器featured-project用來附加下半段圖像。 其內容文字用相應的顏色和大小。‘See more work’鏈接將用按鈕圖片來替代（使用圖像替換技巧）。為了獲得視覺效果，在懸浮狀態時添加背景圖，來顯示修改過的含擠壓效果的精靈圖片。 灰 色頁腳部分可以用簡單的footer容器加上背景色完成。這部分是脫離於container容器的，所以默認是整個頁面寬度。儘管如此，由於其內容不再屬 於containter，頁腳需要用相同的寬度和自動邊距來使其居中。陰影圖片作為背景圖片而完美地和該div像匹配。 [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2011/03/photoshop-web-xhtmlcss/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<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>Adobe Illustrator教程-做一个耳机图标</title>
		<link>http://www.web7d.com.cn/2011/01/adobe-illustrator-make/</link>
		<comments>http://www.web7d.com.cn/2011/01/adobe-illustrator-make/#comments</comments>
		<pubDate>Mon, 17 Jan 2011 08:51:46 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[教程]]></category>
		<category><![CDATA[Adobe Illustrator矢量教程]]></category>
		<category><![CDATA[耳麦图标]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2273</guid>
		<description><![CDATA[Adobe Illustrator教程-教你怎样做一个耳机图标，有很详细的步骤，喜欢用Illustrator设计UI图标的同学们，可以看看。是英文版我只做了个链接。 Make a Headphones Icon Using Adobe Illustrator 查看教程（英文） web7d.com.cn]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2011/01/adobe-illustrator-make/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>2011年网页设计发展趋势</title>
		<link>http://www.web7d.com.cn/2011/01/web-design-trends-in-2011/</link>
		<comments>http://www.web7d.com.cn/2011/01/web-design-trends-in-2011/#comments</comments>
		<pubDate>Mon, 10 Jan 2011 08:57:48 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[技术文档]]></category>
		<category><![CDATA[设计开发]]></category>
		<category><![CDATA[设计杂谈]]></category>
		<category><![CDATA[2011]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[网页设计趋势]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2224</guid>
		<description><![CDATA[设计与开发之间本有一线界限，但当时代步入又一个十年，这个线变得更加模糊甚至感觉不到它的存在。使用PS设计网页版面，足矣？或许五年前是吧！现 在的互联网用户要求越来越多。没有内涵的华丽很快就会被丢弃。如果你追求华而不实的设计，那么相信你很快会被时代遗弃。2011年不再属于单纯的华丽而是 注重功能。新的一年或者未来十年的设计趋势是响应设计（responsive design）、持续联系（constant connection）和虚拟现实（virtual reality）。 作为设计师的你，2011年会作神马打算？真正的设计师设计的东西不是为了哗众取宠而是在艺术和功能上做到两全其美。。肤浅的赞赏易得肤浅的设计也易被遗 忘。出色的设计师犹如造梦师，给用户创造一个梦境，让用户感觉到如此真实而不知道自己是在梦中。这样的梦需要几个元素：优秀的配色，直观的设计，良好的交 互性和快的响应速度。此外，永远不要低估简约的力量。2011年，你的设计不但要考虑笔记本、台式电脑，还要考虑智能手机、上网本和平板电脑等设备。你都 准备好了吗？ 2011年网页设计趋势有何变化？一起关注11个网页设计趋势热点： 1. 更多的CSS3 + HTML5 这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在2011年CSS3+HTML5将会得到更广泛的应用。网页 设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之。2011年，Flash渐行渐远，魔术师 “HTML5”成为舞台的主角： 当然，说HTML5代替Flash为时还早。从上面的两幅截图你可以知道Flash和HTML5还是有差距的。因此，2011年两者会各自保持属于 自己的位置。不过2010年以前网页设计师滥用Flash的现象会慢慢减少。现在很少设计师会整个网站都是用Flash设计，他们会在一些可用的地方使用 HTML5替代Flash，使网站变得简单运行更快速。然而，目前HTML5还不能够取代Flash，Flash的某些效果HTML5暂时还不能够实现。 然而最值得人兴奋的是CSS3的应用越来越广，在某些地方甚至超越PS（Adobe表示有鸭梨），因为利用CSS3来实现文字阴影、图片圆角和图片透明实在是easy job。如果你还不会，是时候去了解CSS3和HTML5。 2. 简单的配色方案 没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的，太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然，颜色最好保持使用2到3种。调整颜色的透明度，或许会给你意想不到的效果。比如： 只是简单的绿色，通过调节透明度设计出如此美观的Twitter可视化工具。可要知道：这个网页只是用了XHTML/CSS和Javascript，给力吧！ 红色绝对经典，如果配色做得好给人的视觉冲击就更……。上面的网站独特的红色和易友好的文字设计让人不得不为之折服 3. 移动互联网时代的到来 智能手机，ipad和上网本随处可见，OMG，2011年这个现在将会更加明显。这意味着你的设计需要考虑更多的设备。 创建适合移动设备的网站不是简单地在原有的设计去掉华丽的元素，那将会是没有灵魂的设计。尽管在原有的设计再设计一个支持移动设备网站是件痛苦的事情。幸运的是，新的技术让一切变得更简单。 在使用CSS3的情况下，设计移动网页方便多了。最重要的是你可以修改一个CSS文件完成整个网站修改以符合用户使用不同设备进行浏览网页。 你也可以设计一个移动设备专属的网站，但相信那个网站不久还是要改版的，以现在科技产品的发展速度来看。越来越多的移动网站包括原始网站的浏览选 项。如果你不提供这个选项或者你的原始网站没有针对移动网络标准优化，那你并未准备好迎接移动互联网时代的到来。据相关预测，智能手机销量将会超越个人 PC。赶快准备好，迎接移动设备大军的来临。 4. Parallax Scrolling 先来解释下Parallax Scrolling，Parallax scrolling 是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。2011年的网页设计趋势热点就是要创造这样的深度视觉效果。Parallax Scrolling可以通过一些简单的CSS技巧或jQuery插件来实现（示范站点：站点1 站点2）。Parallax scrolling运用于网页设计的次要元素中可以起到很好的效果：如header、footer或者背景。不过最好不要运用于网站导航，那显得有点不伦不类。 Old Pulteney Row to the Pole 在网站背景使用了Parallax [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2011/01/web-design-trends-in-2011/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>2011年五大网络前端技术展望</title>
		<link>http://www.web7d.com.cn/2011/01/2011-web-looking/</link>
		<comments>http://www.web7d.com.cn/2011/01/2011-web-looking/#comments</comments>
		<pubDate>Mon, 10 Jan 2011 08:17:56 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[JavaScript / JQuery]]></category>
		<category><![CDATA[设计杂谈]]></category>
		<category><![CDATA[2011]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[前端技术]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2216</guid>
		<description><![CDATA[刚刚过去的2010年里，我们看到了HTML5技术的崛起，以及CSS3的日渐成熟，经历了Rails 3.0 新版本的推出，以及全球范围内采用的@font-face selector 技术（属于CSS3 部分内容）等等一些更多的新技术和新鲜事情。总之，2010年对于web前端开发人员来说是一个忙碌的一年。 2011年将会有什么web前端技术出现或者成熟？一下列举了5个web技术以及技术趋势，我们认为这些技术应该会在今年进入我们的视线范围，有些列举项虽然不是具体的web开发技术，但无论如何，都会或多或少的影响到我们。 1. jQuery Mobile jQuery 移动应用 jQuery 已经成为JavaScript事实上的代名词，很大程度上是因为其可扩展性，易用性以及在项目管理方面可控。随着用于平板电脑和智能手机等设备的触屏优化 技术的演进，以及与此相关的web框架的发展，jQuery Mobile 将成为跨平台，支持多设备的手机应用的非常重要的技术选择之一。 越来越多的开发者开始考虑使用html5技术来开发移动应用，建立一个稳定的易用性好的JavaScript框架将成为移动技术开发人员的重要选择。 jQuery Mobile具备成为这一框架的事实上的基础。（因jQuery目前的应用范围相当广泛和普遍） by Christina Warren 。 2. Hardware-Accelerated Web Browsers 浏览器硬件加速技术 由于ie9使用了 DirectX10以及硬件加速技术，大幅度提高了浏览器的速度和承载能力，因此Internet Explorer 9 (IE9) 目前相对于其他竞争对手来说速度奇快。Google 和 Mozilla 必然会争先抢后地使用这些相关技术譬如硬件加速技术来应对来自 IE9的压力和竞争。今年，我们大家的浏览器定会飞速，对我们大家绝对是利好消息。by Ben Parr Co-Editor 3. Node.js 技术以及服务端 Node.js技术被很多网站描述成为 事件驱动的 JavaScript V8 引擎。本质上，他是一个工具，为了用JavaScript技术来编写服务端事件驱动的工具集。什么意思？简单的说，技术编程的时候，根本不需要等待一个输 入输出I/O 操作完成才能去进行另一个输入输出操作。对于 Node.js 来说，意味着它可以在服务端做所有数据运算等工作，减轻了客户端的压力。对于一些数据处理类的app应用来说，像是像实时应用、搜索引擎web爬虫、文件 上传，流媒体技术等等，速度是至关重要的首要环节。 [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2011/01/2011-web-looking/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>用CSS/jQuery来创建图像旋转与描述</title>
		<link>http://www.web7d.com.cn/2011/01/image-rotator-css-jquery/</link>
		<comments>http://www.web7d.com.cn/2011/01/image-rotator-css-jquery/#comments</comments>
		<pubDate>Thu, 06 Jan 2011 08:49:13 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[JavaScript / JQuery]]></category>
		<category><![CDATA[教程]]></category>
		<category><![CDATA[CSS/jQuery]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[产品展示]]></category>
		<category><![CDATA[图像聚焦]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2178</guid>
		<description><![CDATA[旋转的图像是一个伟大的方式来显示，甚至作为一个图像画廊组合件，电子商务产品图片。虽然有很多伟大的插件，但这个教程将帮助您了解图像的旋转 ，并帮助您从头开始创建自己的图像效果。 创建一个旋转图像 View Demo of Image Rotator Step1. HTML – Image Rotator Wireframe 首先，设计中的布局HTML线框。正如你可以看到下面的图片，将有两个（主图像的某一部分，缩略图列表部分）的主要部分。除了图像的部分，第三部分，标有“递减“，将包含main_image描述。 main_image 部分的 HTML &#60;div class=&#8220;main_image&#8221;&#62; &#60;img src=&#8220;banner1.jpg&#8221; alt=&#8220;&#8221; /&#62; &#60;div class=&#8220;desc&#8221;&#62; &#60;a href=&#8220;#&#8221; class=&#8220;collapse&#8221;&#62;Close Me!&#60;/a&#62; &#60;div class=&#8220;block&#8221;&#62; &#60;h2&#62;Title&#60;/h2&#62; &#60;small&#62;Date&#60;/small&#62; &#60;p&#62;Copy&#60;/p&#62; &#60;/div&#62; &#60;/div&#62; &#60;/div&#62; image_thumb部分的 HTML 注:该缩略图清单部分将会很相似标记为主要形象,但是每一节都将在它自己的列表项目内。 &#60;div class=&#8220;image_thumb&#8221;&#62; &#60;ul&#62; &#60;li&#62; &#60;a href=&#8220;banner1.jpg&#8221;&#62;&#60;img src=&#8220;banner1_thumb.jpg&#8221; alt=&#8220;Image Name&#8221; /&#62;&#60;/a&#62; &#60;div class=&#8220;block&#8221;&#62; &#60;h2&#62;Title&#60;/h2&#62; &#60;small&#62;Date&#60;/small&#62; [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2011/01/image-rotator-css-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuer图片滑块预览</title>
		<link>http://www.web7d.com.cn/2011/01/jquer-slider-gallery/</link>
		<comments>http://www.web7d.com.cn/2011/01/jquer-slider-gallery/#comments</comments>
		<pubDate>Thu, 06 Jan 2011 08:00:36 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[JavaScript / JQuery]]></category>
		<category><![CDATA[教程]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jQuery滑块]]></category>
		<category><![CDATA[图片预览]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2173</guid>
		<description><![CDATA[下载后用Firefox浏览，我用IE6测试不支持效果。 预览：View demo 下载： Download source 英文原文件详情内容见  Slider Gallery with jQuery]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2011/01/jquer-slider-gallery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS &amp; jQuery标签页效果</title>
		<link>http://www.web7d.com.cn/2011/01/simple-tabs-w-css-jquery/</link>
		<comments>http://www.web7d.com.cn/2011/01/simple-tabs-w-css-jquery/#comments</comments>
		<pubDate>Wed, 05 Jan 2011 09:24:27 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[JavaScript / JQuery]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[CSS & jQuery]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[标签页]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2151</guid>
		<description><![CDATA[预览效果View Demo 英文原文：Simple Tabs w/ CSS &#38; jQuery]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2011/01/simple-tabs-w-css-jquery/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>WAP网站设计之xhtml mp</title>
		<link>http://www.web7d.com.cn/2010/11/wap-xhtml-mp/</link>
		<comments>http://www.web7d.com.cn/2010/11/wap-xhtml-mp/#comments</comments>
		<pubDate>Mon, 01 Nov 2010 06:51:31 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[wap]]></category>
		<category><![CDATA[wap网站]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2087</guid>
		<description><![CDATA[WAP（Wireless Application Protocol)为无线应用协议，是一项全球性的网络通信协议。WAP使移动Internet 有了一个通行的标准，其目标是将Internet的丰富信息及先进的业务引入到移动电话等无线终端之中。WAP定义可通用的平台，把目前Internet 网上HTML语言的信息转换成用WML（Wireless Markup Language)描述的信息，显示在移动电话的显示屏上。WAP只要求移动电话和WAP代理服务器的支持，而不要求现有的移动通信网络协议做任何的改 动，因而可以广泛地应用于GSM、CDMA、TDMA、3G等多种网络。 一：XHTML MP的语法规则 我们知道，我们通常用电脑访问的网站的网页是用html构建的。类似的，现在WAP 2.0网站是用XHTML MP 构建，以供手持设备的访问，如手机、PDA等。 XHTML MP是XHTML的子集，因此继承了它的语法。 XHTML是更严格和简洁的HTML版本。现在来看看XHTML MP的语法规则： 1：标签必须正确闭合！ &#60;p&#62;XHTML MP 教程 段落 1&#60;/p&#62; &#60;p&#62;XHTML MP tutorial paragraph 2&#60;/p&#62; &#60;p&#62;XHTML MP tutorial paragraph 3&#60;/p&#62; 有些标签是不含内容的（开始标签和结束标签之间的东东，如上面的XHTML MP tutorial paragraph 1）， 就必须用这种形式：Line break&#60;br/&#62;。请注意一定要加上斜杠 2：标签和属性都必须是用小写 正确的写法： &#60;p id=&#8221;p1&#8243;&#62;XHTML MP tutorial paragraph 1&#60;/p&#62; &#60;p id=&#8221;p2&#8243;&#62;XHTML MP tutorial paragraph 2&#60;/p&#62; [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/11/wap-xhtml-mp/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

