<?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/tech/webskll/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>为你的wordpress个人博客或企业网站制作并添加favicon.ico个性图标</title>
		<link>http://www.web7d.com.cn/2010/12/wordpress-favicon-ico/</link>
		<comments>http://www.web7d.com.cn/2010/12/wordpress-favicon-ico/#comments</comments>
		<pubDate>Fri, 10 Dec 2010 07:00:05 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[网页技巧]]></category>
		<category><![CDATA[favicon]]></category>
		<category><![CDATA[个性图标]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=2213</guid>
		<description><![CDATA[个性图标的原意是favicon，全称为Favorites Icon，是一种后缀名为.ico格式的图标。.ico 是图像格式的一种，常见的图像格式还有jpg gif  png等； 个性图标可以让浏览器的收藏夹和地址栏中除显示相应的标题外，还显示指定的个性图标，使网站更专业；收藏夹里让人记住你的站点。 下面我们就开始我们的个性ico之旅吧， 利用绘图软件（Photosho Illustrator 等）制作一个32×32像素的个性图片； 将上面的图片转化成.ico图像格式,可以用Bitbug Icon转化工具。很方便的实现.ico格式。 如何使用Favicon.ico ？ 浏览器调用Favicon的原则是首先在网页所在的目录下寻找Favicon.ico文件，如果没有，便到网站的根目录下寻找。 因此，在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico，然后将其上传到网站的根目录即可。 如果您需要将Favicon.ico放到其他目录下，或者希望让不同的网页显示不同的Favicon，就需要在网页Html文件中做设定了，具体设置也很简单，在Html的&#60;head&#62;&#60;/head&#62;标签之间插入： &#60;link rel=”shortcut icon” href=”favicon.ico” /&#62; 形式为: &#60;head&#62; … &#60;link rel=”shortcut icon” href=”favicon.ico” /&#62; &#60;/head&#62; 这样，为制作并添加favicon.ico个性图标的工作就完成了。不过由于服务器及缓存的问题，可能需要等待一段时间才能显示，需要耐心等待。]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/12/wordpress-favicon-ico/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ie6下使PNG背景图片透明的方法</title>
		<link>http://www.web7d.com.cn/2010/06/ie6-png-bg-img/</link>
		<comments>http://www.web7d.com.cn/2010/06/ie6-png-bg-img/#comments</comments>
		<pubDate>Mon, 21 Jun 2010 03:51:13 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[网页技巧]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[背景透明]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1928</guid>
		<description><![CDATA[注：本文只适用于png用作背景时，作图片使用时的透明问题并不适用 虽然有让IE6支持PNG透明背景的JS程序，但不是很方便，而且影响代码的简洁，还是用CSS来实现的好。使用到的是：IE5.5+的AlphaImageLoader滤镜 语法： filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) 属性： enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true &#124; false true : 默认值。滤镜激活。 false : 滤镜被禁止。 sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。 image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale : 缩放图片以适应对象的尺寸边界。 src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。 说明： 在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。 PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。 了解了以上的内容，可以写一段简单的CSS代码来实现： .news{width:364px;height:212px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=&#8217;true&#8217;, sizingMethod=&#8217;scale&#8217;, [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/06/ie6-png-bg-img/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>网站广告标准尺寸</title>
		<link>http://www.web7d.com.cn/2010/04/web-ad-size/</link>
		<comments>http://www.web7d.com.cn/2010/04/web-ad-size/#comments</comments>
		<pubDate>Wed, 21 Apr 2010 08:44:29 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[网页技巧]]></category>
		<category><![CDATA[广告尺寸]]></category>
		<category><![CDATA[网站广告尺寸大小]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1683</guid>
		<description><![CDATA[广告是一种以宣传鼓动为目的，并结合简短文字和图像的媒介和宣传品。“广告”，顾名思义，广而告之，它有“注意”、“诱导”的意思。网站广告也是广告的一种，主要是由放在网页上的图片、动画、视频构成的。它是在互联网普及之后出现的一种新兴的广告形式。网站广告具有形象生动、经济实惠等特点，但是由于网络状况的限制，网站广告要求必须控制在一定的尺寸，便于网络传播。网站广告的设计方法，包括设计原则、开发理念等内容通过学习，能够掌握网站广告设计的基本知识，包括标准尺寸、设计准则等，设计出与整个页面相协调的网站广告。 一般来说，网站广告都有一定的规格要求，也就是标准尺寸。下面将分类介绍各种网站广告的标准尺寸。 300像素X250像素，中等矩形，一般用于页面内部。 250像素X250像素，正方形，一般用于页面内部。 130像素X300像素，垂直矩形，一般用于门户网站内容页面中，适合与正文混排。 360像素X 300像素，大矩形，一般用于弹出窗口广告。 468像素X60像素，通栏广告，这是一种非常标准的传统长幅广告类型。 234像素X60像素，半栏广告,这是一种非常标准的传统广告类型。 88像素X31像素，链接用Logo标志，适合于网站之间交换友情链接的广告。 120像素X60像素，按钮样式，一般用于网站中大量客户的小幅广告。 20像素X240像素，垂直按钮，一般用于网站中大量客户的小幅广告。 25像素X 125像素，正方形按钮，一般用于网站中大量客户的小幅广告。 120像素X600像素，垂直通栏，一般用于门户网站内容页面中，适合与正文混排。 常用的网站广告图规格： 横幅：760&#215;90、728&#215;90、1024&#215;60、580&#215;90、468&#215;60、760&#215;75、760&#215;60、960&#215;60、460&#215;60、640&#215;60、960&#215;90 矩形：336&#215;280、300&#215;250、250&#215;250、200&#215;200 竖幅：160&#215;600、120&#215;600 GOOGLE联盟广告图规格： 横幅：728&#215;90、460&#215;60 矩形：336&#215;280、300&#215;250、250&#215;250、200&#215;200 竖幅：160&#215;600、120&#215;600 baidu联盟广告图规格： 横幅：760&#215;90、728&#215;90、1024&#215;60、580&#215;90、468&#215;60、760&#215;75、760&#215;60、960&#215;60、460&#215;60、640&#215;60、960&#215;90 矩形：336&#215;280、300&#215;250、250&#215;250、200&#215;200 竖幅：160&#215;600、120&#215;600 注：以上尺寸规格的单位(PX像素)]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/04/web-ad-size/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>css发光字</title>
		<link>http://www.web7d.com.cn/2010/03/css-led/</link>
		<comments>http://www.web7d.com.cn/2010/03/css-led/#comments</comments>
		<pubDate>Tue, 30 Mar 2010 04:38:38 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[网页技巧]]></category>
		<category><![CDATA[css发光字]]></category>
		<category><![CDATA[发光字]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1544</guid>
		<description><![CDATA[&#60;p style=&#8221;filter:glow(color:#DD002C,strength=3); height:12px; color:#ffffff;&#8221;&#62;css发光字&#60;/p&#62; css发光字就这么简单,字体颜色默认白色(#ffffff)比较好,#DD002C为发光颜色,通过修改color颜色来做出不同效果的发光字，仅支持IE浏览器。]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/03/css-led/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>仿Amazon.com菜单效果的简单实现</title>
		<link>http://www.web7d.com.cn/2010/03/copy-amazon-com-menu-effect/</link>
		<comments>http://www.web7d.com.cn/2010/03/copy-amazon-com-menu-effect/#comments</comments>
		<pubDate>Wed, 24 Mar 2010 07:13:48 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[导航菜单]]></category>
		<category><![CDATA[网页技巧]]></category>
		<category><![CDATA[特效菜单]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1505</guid>
		<description><![CDATA[仿Amazon.com菜单效果的简单实现是3年前就有了，效果不错就整理发布上去一起分享； HTML &#60;p onclick=&#8221;emotion();&#8221;&#62;hello, emotion!&#60;/p&#62; &#60;div id=&#8221;menu&#8221; onmouseout=&#8221;javascript:mout=setTimeout(&#8216;fnSmall()&#8217;,1000);&#8221; onMouseOver=&#8221;javascript:clearTimeout(mout);&#8221;&#62; &#60;table border=&#8221;0&#8243; cellspacing=&#8221;0&#8243; cellpadding=&#8221;0&#8243;&#62; &#60;tr&#62; &#60;td width=&#8221;50&#8243; valign=&#8221;top&#8221; align=&#8221;left&#8221;&#62; &#60;ul&#62; &#60;li&#62;class&#60;/li&#62; &#60;li&#62;&#60;a href=&#8221;#&#8221; onclick=&#8221;fnSmall();&#8221;&#62;item&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#8221;#&#8221; onclick=&#8221;fnSmall();&#8221;&#62;item&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#8221;#&#8221; onclick=&#8221;fnSmall();&#8221;&#62;item&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;/li&#62; &#60;/ul&#62; &#60;/td&#62; &#60;td width=&#8221;50&#8243; valign=&#8221;top&#8221; align=&#8221;left&#8221;&#62; &#60;ul&#62; &#60;li&#62;class&#60;/li&#62; &#60;li&#62;&#60;a href=&#8221;#&#8221; onclick=&#8221;fnSmall();&#8221;&#62;item&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#8221;#&#8221; onclick=&#8221;fnSmall();&#8221;&#62;item&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#8221;#&#8221; onclick=&#8221;fnSmall();&#8221;&#62;item&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#8221;#&#8221; onclick=&#8221;fnSmall();&#8221;&#62;item&#60;/a&#62;&#60;/li&#62; &#60;/ul&#62; &#60;/td&#62; &#60;td width=&#8221;50&#8243; valign=&#8221;top&#8221; [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/03/copy-amazon-com-menu-effect/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>无刷新换肤切换样式实例</title>
		<link>http://www.web7d.com.cn/2010/03/avi-switch-pattern/</link>
		<comments>http://www.web7d.com.cn/2010/03/avi-switch-pattern/#comments</comments>
		<pubDate>Thu, 18 Mar 2010 03:00:41 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[网页技巧]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[换肤样式]]></category>
		<category><![CDATA[界面换肤]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1480</guid>
		<description><![CDATA[无刷新换肤切换样式, xhtml代码如下： &#60;div id=&#8221;header&#8221;&#62; &#60;div id=&#8221;skin&#8221;&#62; &#60;ul&#62; &#60;li&#62;&#60;a href=&#8221;http://www.web7d.com.cn/&#8221;&#62;web启点&#60;/a&#62;&#60;/li&#62; &#60;li&#62;选择页面风格：&#60;/li&#62; &#60;li&#62;&#60;span id=&#8221;blue_sp&#8221;&#62;&#60;em id=&#8221;sk_blue&#8221;&#62;蓝色&#60;/em&#62;&#60;/span&#62;&#60;/li&#62; &#60;li&#62;&#60;span id=&#8221;or_sp&#8221;&#62;&#60;em id=&#8221;sk_or&#8221;&#62;橙色&#60;/em&#62;&#60;/span&#62;&#60;/li&#62; &#60;li&#62;&#60;span id=&#8221;byu_sp&#8221;&#62;&#60;em id=&#8221;sk_byu&#8221;&#62;棕色&#60;/em&#62;&#60;/span&#62;&#60;/li&#62; &#60;/ul&#62; &#60;/div&#62; &#60;/div&#62; &#60;div id=&#8221;warpper&#8221;&#62; &#60;div &#62; &#60;div&#62;&#60;h2&#62;换肤测试&#60;/h2&#62;&#60;/div&#62; &#60;/div&#62; &#60;div &#62;&#60;h2&#62;换肤测试2&#60;/h2&#62;&#60;/div&#62; &#60;/div&#62; &#60;div&#62;&#60;/div&#62; 样式表: &#60;style type=&#8221;text/css&#8221;&#62; body{font-size:12px} *{margin:0;padding:0;} ul,li{list-style:none} .login_skin{height:25px;background:#E8E8E8;border:1px solid #e9e8e5;width:265px;color:#333;line-height:25px;margin:25px 0px 25px 10px;padding-left:15px;} .login_skin li{float:left} .login_skin .bor{border-right:1px solid #e9e8e5; padding-right:7px; margin-right:10px} .login_skin li span{margin:7px [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/03/avi-switch-pattern/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>select选择框下拉菜单美化</title>
		<link>http://www.web7d.com.cn/2010/03/select-beautify/</link>
		<comments>http://www.web7d.com.cn/2010/03/select-beautify/#comments</comments>
		<pubDate>Wed, 10 Mar 2010 02:32:57 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[网页技巧]]></category>
		<category><![CDATA[select美化]]></category>
		<category><![CDATA[下拉菜单]]></category>
		<category><![CDATA[下载]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1453</guid>
		<description><![CDATA[我们在做网站表单或下拉选择框时，为了页面美观会在select上做美化，下面的效果也许对你有所帮助；采用JavaScript+css实现效果的。 select选择框下拉菜单美化如图： &#62;&#62; 预览 &#62;&#62;下载 来源：select选择框下拉菜单美化&#124; web启点]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/03/select-beautify/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iframe高度自适应</title>
		<link>http://www.web7d.com.cn/2010/03/iframe-height-self-adaption/</link>
		<comments>http://www.web7d.com.cn/2010/03/iframe-height-self-adaption/#comments</comments>
		<pubDate>Tue, 02 Mar 2010 08:00:12 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[网页技巧]]></category>
		<category><![CDATA[iframe]]></category>
		<category><![CDATA[技巧]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1410</guid>
		<description><![CDATA[框架在页面中应用比较平常，好处就是用起来比较方便，需要的效果也还可以，不过也有不好的弊端，不利于优化，高度的问题， 这里介绍iframe框架怎么自动适应高度:&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#60;div class=&#34;side_left&#34;&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;iframe src=&#34;left.html&#34; name=&#34;leftFrame&#34; id=&#34;leftFrame&#34; scrolling=&#34;No&#34;&#160;&#160; width=&#34;170px&#34; height=&#34;330px&#34; frameborder=&#34;0&#34;&#62;&#60;/iframe&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;/div&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;div class=&#34;content&#34;&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;iframe src=&#34;right1.html&#34; name=&#34;mainFrame&#34; id=&#34;mainFrame&#34;&#160;&#160;width=&#34;740px&#34; frameborder=&#34;0&#34; scrolling=&#34;no&#34;&#62;&#60;/iframe&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;/div&#62;&#160;&#160;&#160;&#160;&#160;&#160; 左边菜单点击右边框架显示，先是链接明明指定了target，火狐下却在新窗口中打开。排查了很久，发现犯了个很低级错误没用&#60;/iframe&#62;闭合。直接&#60;iframe&#8230;./&#62;。IE下没问题，FF不行了。再就是右边框架随内容自动适应高度的问题。 网上找了很多文章，常见的如： &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#60;iframe src=&#34;right1.html&#34; name=&#34;mainFrame&#34; id=&#34;mainFrame&#34;&#160;&#160;width=&#34;740px&#34; frameborder=&#34;0&#34; scrolling=&#34;no&#34;&#62;&#60;/iframe&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#60;script type=&#34;text/javascript&#34;&#62; &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;function reinitIframe(){ &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var iframe = document.getElementById(&#34;mainFrame&#34;); &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;try{ &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var bHeight = iframe.contentWindow.document.body.scrollHeight; &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var height = Math.max(bHeight, dHeight); &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;iframe.height = height; &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}catch (ex){} &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;} &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;window.setInterval(&#34;reinitIframe()&#34;, [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/03/iframe-height-self-adaption/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web设计原理对比</title>
		<link>http://www.web7d.com.cn/2010/02/the-principle-of-contrast-in-web-design/</link>
		<comments>http://www.web7d.com.cn/2010/02/the-principle-of-contrast-in-web-design/#comments</comments>
		<pubDate>Fri, 26 Feb 2010 01:27:32 +0000</pubDate>
		<dc:creator>zeze</dc:creator>
				<category><![CDATA[网页技巧]]></category>
		<category><![CDATA[web设计]]></category>
		<category><![CDATA[设计技巧]]></category>

		<guid isPermaLink="false">http://www.web7d.com.cn/?p=1394</guid>
		<description><![CDATA[网页设计是由许多不同的元素，各有不同的重要性水平，比其他一些要求突出。一些元素共享的关系，而其他不相关的。困难之处在于能够将本直观和有效。这就是对比的原则发挥作用的地方。 对比是在两个或多个元素的差异。与此相反，设计师可以创建视觉趣味和直接用户的注意。但想象一下，如果在网页上的所有元素是在风格和外观相同。将没有组织，没有流动，而且肯定没有层次。内容几乎是不可能消化。这使得对比了有效的网页设计的重要组成部分。 在这篇文章中，我们将看到如何对比可以通过建立在三个方面的设计： 颜色，大小和对齐的差异实现。 颜色对比 当大多数人听到这个词相反，他们认为色彩。即使对比原则不仅限于颜色，它可以帮助用户区分彼此的页面元素了漫长的道路。 这是因为几乎所有的网站设计有一个头，一个内容区域，和页脚。这是三个完全不同的领域，应该有一个清晰的视觉分离。使用背景颜色对比度是一个很好的方式实现这一目标。 在这里你会看到Church Media Group’s website 网站是一个很好的例子。页眉和页脚的背景颜色是黑色的，而内容区域为白色。这清楚地确立了作为内容是不同的，甚至比其他领域的重要。如果我们再有一点是另一种的衬托下，在内容区域的水平。在“特色项目”区域有一个淡蓝色背景。由于这一领域之间的其余内容对比量很小，它告诉我们，这两个是相关的。 Phil Renaud’s portfolio有独特的布局和难以置信的配色方案。他用一金黄色之间建立垂直航行和褐色为主的设计其余的对比。 颜色也可以用于在文本创建的对比。 Billy Tamplin 创造一个给予的标题，小标题和段落文本的所有不同的颜色分类和层次的出色工作。对于博客的风格布局，职位之间建立标题和正文的对比是至关重要的。它可以帮助用户很容易看到的文章开始和结束，他们向下滚动页面。 大小对比 另一种方法来创建网页设计对比是利用元素之间的大小差异。换句话说，做一些事情比其他人更大。 通过建立规模对比变得非常重要，当你不能依靠颜色。 Taxi有很多东西在它的布局和具有最小的配色方案。因此，为了建立这三个列的层次结构，设计用于在中间栏一个更大的宽度 &#8211; 超过两倍的左，右列。这使得它显然给用户的中间一列是页面的最重要领域。 正如颜色可用于印刷的标题来创建对比，因此可以大小。Big headings 是一个伟大的方式内设立一个网站内容的层次结构。 Imaginaria Creative用大标题捕捉访问者的注意力，使他们在阅读了下文更小的他们。 齐中对比 良好对准了在创造一个优质的网站设计一个大的一部分。只是看东西时更好地排队。这就是为什么我想用不同的路线，创造对比是棘手的，应谨慎使用。但是，如果做得好的，可以非常有效地制造分裂。 LegiStyles 上使用下面每个标题的内容块大型左边距。随着标题的大尺寸，这创造了一个良好的数量对比。如果你要使用这种差别在这种调整，一定要使它成为一个很大的不同。否则，将结束像一个设计欠佳的错误期待。 围绕大段是一个很大的排版禁忌。它使文字非常难以阅读。但是，不要害怕与混合左对齐中心标题段落。这是另一种很好的方式使用不同路线创造的对比。有一个很好的serif字体相结合，它也可以给你一个经典的外观版式。 Simon Collison 使用左对齐中心在每个段落内容盒子配对的标题。自标题字体大小不远大于的段落，这有助于确定的标题分开。 A List Apart 很好的例子，中心使用的标题与左对齐的段落。 现在是不同的 创建学习就像掌握任何其他的设计原则，在您的作品作一比较适量 &#8211; 这需要实践。花时间研究的有才华的设计师的工作，看看他们是如何使用其设计的对比。请记住，对比度是所有关于差异。如果两个元素非常不同的性质，一定要作出很明显的视觉差异。   英文：The Principle of Contrast in Web Design 翻译：web启点 [...]]]></description>
		<wfw:commentRss>http://www.web7d.com.cn/2010/02/the-principle-of-contrast-in-web-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

