<?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>紫枫印象 &#187; 制作网页</title>
	<atom:link href="http://www.86ue.com/archives/tag/%e5%88%b6%e4%bd%9c%e7%bd%91%e9%a1%b5/feed" rel="self" type="application/rss+xml" />
	<link>http://www.86ue.com</link>
	<description>UED web2.0 前端技术 用户体验 SEO 80后</description>
	<lastBuildDate>Sun, 14 Mar 2010 14:02:08 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>25条CSS制作网页编写的提醒及小技巧整理</title>
		<link>http://www.86ue.com/archives/30</link>
		<comments>http://www.86ue.com/archives/30#comments</comments>
		<pubDate>Thu, 15 Oct 2009 16:37:42 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[CSS+HTML]]></category>
		<category><![CDATA[制作网页]]></category>
		<category><![CDATA[小技巧]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=30</guid>
		<description><![CDATA[1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。

ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；
CLASS是一个样式，可以套在任何结构和内容上，就象一件衣服；

3、一个兼容性调整(IE和Mozilla)的笨办法：
初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
临时解决方法：选择符{属性名:B !important;属性名:A}

就现在的兼容来说，css hack是没办法的办法。我现在也在为这个头疼。

4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding

这个问题体现在宽度设置上，就比如你div的width属性设置了200，然后你又想让里面的文字距离边框10px，于是设置了padding，但是在FF里你就会发现，宽度变成了220.]]></description>
			<content:encoded><![CDATA[<p>1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。</p>
<p>2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。</p>
<p>ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；<br />
CLASS是一个样式，可以套在任何结构和内容上，就象一件衣服；</p>
<p>3、一个兼容性调整(IE和Mozilla)的笨办法：<br />
初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。<br />
临时解决方法：选择符{属性名:B !important;属性名:A}</p>
<p>就现在的兼容来说，css hack是没办法的办法。我现在也在为这个头疼。</p>
<p>4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding</p>
<p>这个问题体现在宽度设置上，就比如你div的width属性设置了200，然后你又想让里面的文字距离边框10px，于是设置了padding，但是在FF里你就会发现，宽度变成了220.</p>
<p>5、li标签前面的图标推荐使用background-image，而不是list-style-image。</p>
<p>6、IE分不清继承关系和父子关系的差别，全部都是继承关系。</p>
<p>7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。</p>
<p>不要随便用一个怪异的名字来定义你的class。就从我接受的项目来说，莫名其妙的写法让我头疼得厉害。翻找下我前面写过的东西，可以看到一个CSS命名规则。详细请见u/kele/archives/2007/609.html</p>
<p>8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。</p>
<p>9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active</p>
<p>与此类似的还有margin和padding，用TRouBLe来记忆。就是Top Right Bottom Left。</p>
<p>10、与内容无关的图片请使用background</p>
<p>这个就是为了在无CSS调用的时候不影响整体页面风格。少用图片来表现风格。试想别人禁止图片后，你的网站还有什么可以看的东西。</p>
<p>11、定义颜色可以缩写#8899FF=#89F</p>
<p>简写标准～可惜我还没有这个好习惯～比如#FFFFFF我还是习惯这么写，而不是#FFF</p>
<p>12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。</p>
<p>div+css设计不是说你就完全放弃table，怎么表现的好才是重点</p>
<p>13、&lt;script&gt;没有language这个属性，应该写成这样:<br />
&lt;script type=”text/Javascript”&gt;</p>
<p>但是在我接触到的很多网站页面里，是这么写的&lt;script type=”text/Javascript” language=“javascript”&gt;。莫名其妙～打开微软的网站你就可以看到&lt;script type=”text/Javascript”&gt;的表达方式</p>
<p>14、标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以:&lt;h1&gt;标题内容&lt;/h1&gt; 改成 &lt;h1&gt;&lt;span&gt;标题内容&lt;/span&gt;&lt;/h1&gt;</p>
<p>我还是没有养成使用H1，H2标签的习惯～需要努力～</p>
<p>15、完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试）<br />
table{border-collapse:collapse;}<br />
td{border:#000 solid 1px;}</p>
<p>1象素黑色表格～</p>
<p>16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。</p>
<p>负值时在布局中经常用到的方法～值得去学习下如何使用。</p>
<p>17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。</p>
<p>设计的时候你可以使用相对浮动层的绝对定位～有意想不到的效果。</p>
<p>18、如果文字过长,则将过长的部分变成省略号显示：IE5,FF无效，但可以隐藏，IE6有效<br />
&lt;DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”&gt;<br />
&lt;NOBR&gt;就是比如有一行文字，很长，表格内一行显示不下.&lt;/NOBR&gt;</p>
<p>恩，这个东西我在用～</p>
<p>19、在IE中可能由于注释带来的文字重复问题时可以把注释改为：<br />
&lt;!–[if !IE]&gt;Put your commentary in here…&lt;![endif]–&gt;</p>
<p>20、如何用CSS调用外部字体<br />
语法：<br />
@font-face{font-family:name;src:url(url);sRules}取值：<br />
name：字体名称。任何可能的 font-family 属性的值<br />
url(url)：使用绝对或相对 url 地址指定OpenType字体文件<br />
sRules：样式表定义</p>
<p>为了防止用户没有字体而影响了网站效果～不过我觉得最好还是少用。</p>
<p>21、如何让一个表单中的文本框中的文字垂直居中？<br />
如果用行高与高度的组在FF中是没有效果的，办法就是定义上下补白就可以实现想想的效果了。</p>
<p>22、定义A标签要注意的小问题：<br />
当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。<br />
只定义了一个a:link时，一定要记得把其它三种状态定义出来！</p>
<p>hover属性是一个很强大的东西～有时间的人可以仔细研究下～</p>
<p>23、并不是所有样式都要简写：<br />
当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。</p>
<p>24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。</p>
<p>非常非常非常非常重要～记得在压缩CSS的时候兼顾好你的可读性～非常非常非常非常重要～深受其害中。</p>
<p>25、几个常用到的CSS样式：<br />
1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;</p>
<p>2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。</p>
<p>3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。</p>
<p>4）&lt;acronym title=”输入要提示的文字” style=”cursor:help;”&gt;文字&lt;/acronym&gt;用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。</p>
<p>5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；</p>
<p>6）Flash透明：选中swf,打开原代码窗口，在&lt;/object&gt;前输入&lt;param name=”wmode” value=”transparent”&gt; 以上是针对IE的代码。<br />
针对FIREFOX 给&lt;embed&gt; 标签也增加类似参数wmode=”transparent”</p>
<p>7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：<br />
.pictures img {<br />
filter: alpha(opacity=45); }<br />
.pictures a:hover img {<br />
filter: alpha(opacity=90); }</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/30/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
