<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="css/rss.xslt"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>CSS+Div入门,CSS+Div学习,CSS+Div设计</title><link>http://www.bm777.com/</link><description>笨小孩CSS博客</description><generator>RainbowSoft Studio Z-Blog 1.8 Walle Build 100427</generator><language>zh-CN</language><copyright>闽ICP备09050183号 CSS Web Design 我爱CSS - BM777.com  Some Rights Reserved.WebMaste </copyright><pubDate>Wed, 19 Oct 2011 18:47:22 +0800</pubDate><item><title>中国航母“瓦良格”今天海试了！！！</title><author>jamesvips@gmail.com (james)</author><link>http://www.bm777.com/post/74.html</link><pubDate>Tue, 09 Aug 2011 19:22:59 +0800</pubDate><guid>http://www.bm777.com/post/74.html</guid><description><![CDATA[<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>2002年3月&ldquo;瓦良格&rdquo;号抵达中国大连港</strong></p><p style="text-align: justify; padding-bottom: 0px; text-indent: 30px; margin: 0px 3px 15px; padding-left: 0px; padding-right: 0px; word-wrap: break-word; word-break: break-all; padding-top: 0px" align="justify">改造中的&ldquo;瓦良格&rdquo;号是一艘常规动力航母，由苏联在上世纪80年代开始建造。苏联解体后，建造工程被迫下马。1998年，废旧的&ldquo;瓦良格&rdquo;号被中国公司购买，2002年3月抵达中国大连港。</p><p style="text-align: justify; padding-bottom: 0px; text-indent: 30px; margin: 0px 3px 15px; padding-left: 0px; padding-right: 0px; word-wrap: break-word; word-break: break-all; padding-top: 0px" align="justify"><strong>2011年7月27日国防部宣布：中国正改造废旧航母用于科研试验和训练</strong></p><p style="text-align: justify; padding-bottom: 0px; text-indent: 30px; margin: 0px 3px 15px; padding-left: 0px; padding-right: 0px; word-wrap: break-word; word-break: break-all; padding-top: 0px" align="justify">2011年7月27日，国防部新闻发言人耿雁生在北京举行的国防部例行记者会上说，中国目前正在利用一艘废旧航空母舰平台进行改造，用于科研试验和训练。</p><p style="text-align: justify; padding-bottom: 0px; text-indent: 30px; margin: 0px 3px 15px; padding-left: 0px; padding-right: 0px; word-wrap: break-word; word-break: break-all; padding-top: 0px" align="justify">耿雁生说，中国有关部门正在综合考虑各方面因素，认真研究航空母舰的发展问题。目前改造的这艘航母出海试验的具体时间，要根据整个改造工程进度来确定。同时，主要依靠我们自己力量培训舰载机飞行员的工作正在进行当中。</p><p style="text-align: justify; padding-bottom: 0px; text-indent: 30px; margin: 0px 3px 15px; padding-left: 0px; padding-right: 0px; word-wrap: break-word; word-break: break-all; padding-top: 0px" align="justify">耿雁生强调说，航母作为一种武器平台，既可以用于进攻也可以用于防御，还能够用于维护世界和平、实施灾难救援等。中国研究航母发展问题，是为了增强维护国家安全与世界和平的能力。中国防御性的国防政策不会因为发展航母而改变，近海防御的海军战略也没有发生转变。</p><p style="text-align: justify; padding-bottom: 0px; text-indent: 30px; margin: 0px 3px 15px; padding-left: 0px; padding-right: 0px; word-wrap: break-word; word-break: break-all; padding-top: 0px" align="justify">耿雁生说，航母的建造和使用将是一个长期的过程。研究建造航母充分体现了我国国防科技水平，无疑将对我军的现代化建设起到重要的牵引和带动作用。</p><p style="text-align: justify; padding-bottom: 0px; text-indent: 30px; margin: 0px 3px 15px; padding-left: 0px; padding-right: 0px; word-wrap: break-word; word-break: break-all; padding-top: 0px" align="justify">耿雁生指出，披露航母相关信息的时机与当前南海局势无关。</p><p style="text-align: justify; padding-bottom: 0px; text-indent: 30px; margin: 0px 3px 15px; padding-left: 0px; padding-right: 0px; word-wrap: break-word; word-break: break-all; padding-top: 0px" align="justify"><strong>2011年8月21日 我航母平台进行出海航行试验</strong></p><p style="text-align: justify; padding-bottom: 0px; text-indent: 30px; margin: 0px 3px 15px; padding-left: 0px; padding-right: 0px; word-wrap: break-word; word-break: break-all; padding-top: 0px" align="justify">根据改造工程进展情况，8月10日我航母平台进行出海航行试验。</p><p style="text-align: justify; padding-bottom: 0px; text-indent: 30px; margin: 0px 3px 15px; padding-left: 0px; padding-right: 0px; word-wrap: break-word; word-break: break-all; padding-top: 0px" align="justify">按照试验计划，首次出海试验时间不会太长，返回后将继续在船厂进行改装和测试工作。&nbsp;</p><object type="application/x-shockwave-flash" data="http://v.ifeng.com/include/exterior.swf?AutoPlay=false&amp;guid=7ecde3f4-b3db-41a7-96b5-abde25ed07b9&amp;fromweb=ZHVPlayer" height="300" width="400"><param value="http://v.ifeng.com/include/exterior.swf?AutoPlay=false&amp;guid=7ecde3f4-b3db-41a7-96b5-abde25ed07b9&amp;fromweb=ZHVPlayer" name="src" /></object><p>&nbsp;</p><p><img title="" alt="" onload="ResizeImage(this,520)" src="http://www.bm777.com/upload/hm_cn.jpg" /></p><p>&nbsp;<br /><img title="" alt="" onload="ResizeImage(this,520)" src="http://www.bm777.com/upload/hm2_cn.jpg" /></p><p>资料图：在大连改装的中国第一艘航母平台</p><p>&nbsp;<img title="" alt="" onload="ResizeImage(this,520)" src="http://www.bm777.com/upload/hm3_cn.jpg" /></p><p>资料图：在大连改装的中国第一艘航母平台</p>]]></description><category>News</category><comments>http://www.bm777.com/post/74.html#comment</comments><wfw:comment>http://www.bm777.com/</wfw:comment><wfw:commentRss>http://www.bm777.com/feed.asp?cmt=74</wfw:commentRss><trackback:ping>http://www.bm777.com/cmd.asp?act=tb&amp;id=74&amp;key=3172309e</trackback:ping></item><item><title>HTML5实现拼图游戏–JavaScript小游戏</title><author>jamesvips@gmail.com (james)</author><link>http://www.bm777.com/post/73.html</link><pubDate>Sat, 23 Jul 2011 19:23:23 +0800</pubDate><guid>http://www.bm777.com/post/73.html</guid><description><![CDATA[<p>请用<strong>FireFox4.0[及以上版本]</strong>&nbsp;和&nbsp;<strong>Chrome11[及以上版本]</strong>打开。<br />别的，没什么可说的，就是做着玩</p><p><img onload="ResizeImage(this,520)" src="http://www.bm777.com/upload/pintu.jpg" alt="" title=""/></p><p><strong><a target="_blank" href="http://www.bm777.com/demo/game/index.html">看演示吧</a></strong></p>]]></description><category>HTML</category><comments>http://www.bm777.com/post/73.html#comment</comments><wfw:comment>http://www.bm777.com/</wfw:comment><wfw:commentRss>http://www.bm777.com/feed.asp?cmt=73</wfw:commentRss><trackback:ping>http://www.bm777.com/cmd.asp?act=tb&amp;id=73&amp;key=b8a22296</trackback:ping></item><item><title>分享：网页图片压缩优化方法</title><author>jamesvips@gmail.com (james)</author><link>http://www.bm777.com/post/72.html</link><pubDate>Thu, 21 Jul 2011 23:03:27 +0800</pubDate><guid>http://www.bm777.com/post/72.html</guid><description><![CDATA[<p><span style="color: rgb(0, 0, 0); ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;不少网站为了美化自身，用了很多小图标、背景图片，在视觉上吸引住了不少读者；然而，随着图片数量不断增加，由于图片造成的网页体积大幅上升直接导致了网页加载时间的大幅增加，严重降低了用户体验。很多站长最后会发现，滥用图片，得不偿失。</span></p><p>&nbsp;<img onload="ResizeImage(this,520)" alt="" title="" src="http://www.bm777.com/upload/yastp.jpg" /></p><p>&nbsp;</p><p style="line-height: normal; "><span style="color: rgb(0, 0, 0); ">如何最大限度地减少图片对网页加载速度造成的负面影响，成为了众多站长冥思苦想的难题。笔者经过长期实践总结出了两个要点：</span></p><p><span style="color: rgb(0, 0, 0); "><strong style="line-height: normal; ">压缩图片体积</strong><strong style="line-height: normal; ">将图片并入CSS并用CSS Sprite技术合并</strong></span></p><p style="line-height: normal; "><span style="color: rgb(0, 0, 0); ">今天，说说第一点：<strong style="line-height: normal; ">压缩图片体积</strong>。（提示：同等视觉效果，JPEG格式图片比PNG格式图片体积要小很多。）</span></p><p><span style="color: rgb(0, 0, 0); ">方法一：使用Photoshop压缩图片体积</span></p><p style="line-height: normal; "><span style="color: rgb(0, 0, 0); ">1. 打开要压缩的图片</span></p><p>&nbsp;<img onload="ResizeImage(this,520)" alt="" title="" src="http://www.bm777.com/upload/yastp1.jpg" /></p><p><span style="color: rgb(0, 0, 0); ">2. 选择&nbsp;<strong style="line-height: normal; ">文件&gt;存储为Web和设备所用格式</strong></span></p><p>&nbsp;<img onload="ResizeImage(this,520)" alt="" title="" src="http://www.bm777.com/upload/yastp2.jpg" /></p><p><span style="color: rgb(0, 0, 0); ">3. 在右上角调整图片格式和品质，在图片失真不明显的前提下压缩图片体积，点击&nbsp;<strong style="line-height: normal; ">储存&nbsp;</strong>保存图片。</span></p><p>&nbsp;</p><p><img onload="ResizeImage(this,520)" alt="" title="" src="http://www.bm777.com/upload/yastp3.jpg" /></p><p><span style="color: rgb(0, 0, 0); ">方法二：使用Yahoo! Smush.it 在线压缩图片（无损压缩）</span></p><p><a rel="nofllow" target="_blank" style="font-size: 12px; color: rgb(0, 153, 204); text-decoration: none; line-height: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " href="http://www.smushit.com/ysmush.it/">Yahoo! Smush.it</a><span style="color: rgb(0, 0, 0); ">是Yahoo提供的免费在线压缩图片服务，值得注意的是，它的压缩是&ldquo;<strong style="line-height: normal; ">无损压缩</strong>&rdquo;，也就是说，经过它压缩的图片绝对不会失真，所以，<strong style="line-height: normal; ">压缩程度比第一种方法稍差</strong>。可以上传本地图片，也可以输入网页上图片的链接。支持多图片处理。</span></p><p>&nbsp;<img onload="ResizeImage(this,520)" alt="" title="" src="http://www.bm777.com/upload/yastp4.jpg" /></p><p><span style="color: rgb(0, 0, 0); ">压缩后建议勾选Keep directory structure in zip file，这样会以 Zip压缩包下载优化后的图片，而且会保存图片原来的目录结构。</span></p><p><img onload="ResizeImage(this,520)" alt="" title="" src="http://www.bm777.com/upload/yastp5.jpg" /></p><p><span style="color: rgb(0, 0, 0); ">方法三：用OptiPNG压缩 PNG 格式图片（无损压缩，仅针对PNG格式图片）</span></p><p style="line-height: normal; "><span style="color: rgb(0, 0, 0); ">PNG格式图片在网页上广泛应用，最大的特点是 支持透明背景（<strong style="line-height: normal; ">只有GIF和PNG格式支持透明背景</strong>）。试过以上两种方法的同学会发现，PNG格式图片压缩效果不佳，基本&ldquo;榨不出多少油水&rdquo;，如果硬是用PS把品质降低，就会导致严重失真，如果把图片格式转换为JPEG，会丢掉透明背景。</span></p><p style="line-height: normal; "><span style="color: rgb(0, 0, 0); ">大家不妨试试</span><a rel="nofllow" target="_blank" style="font-size: 12px; color: rgb(0, 153, 204); text-decoration: none; line-height: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " href="http://optipng.sourceforge.net/">OptiPNG</a><span style="color: rgb(0, 0, 0); ">这个软件。首先</span><a rel="nofllow" target="_blank" style="font-size: 12px; color: rgb(0, 153, 204); text-decoration: none; line-height: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " href="http://downloads.sourceforge.net/project/optipng/OptiPNG/optipng-0.5/optipng-0.5-exe.zip?r=http%3A%2F%2Fsourceforge.net%2Fprojects%2Foptipng%2Ffiles%2FOptiPNG%2Foptipng-0.5%2F&amp;ts=1306772680&amp;use_mirror=cdnetworks-kr-1">下载</a><span style="color: rgb(0, 0, 0); ">该软件。解压下载的optipng-0.5-exe.zip压缩包，得到<strong style="line-height: normal; ">optipng.exe</strong>程序，我们只需要这个程序。</span></p><p style="line-height: normal; ">optipng.exe使用非常简单，将PNG图片拖拽到程序上，用程序&ldquo;打开&rdquo;该图片。</p><p>&nbsp;<img onload="ResizeImage(this,520)" alt="" title="" src="http://www.bm777.com/upload/yastp6.jpg" /></p><p>&nbsp;</p><p style="line-height: normal; "><span style="color: rgb(0, 0, 0); ">随即，</span><a rel="nofllow" target="_blank" style="font-size: 12px; color: rgb(0, 153, 204); text-decoration: none; line-height: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " href="http://optipng.sourceforge.net/">OptiPNG</a><span style="color: rgb(0, 0, 0); ">&nbsp;会自动进行图片优化处理。处理好后，会覆盖原图片。（如果想保留原图片，建议事先保留副本）</span></p><p style="line-height: normal; "><span style="color: rgb(0, 0, 0); ">总结：图片压缩类软件很多，无外乎<strong>笨小孩</strong>介绍的<strong style="line-height: normal; ">有损压缩（PS）</strong>&nbsp;和<strong style="line-height: normal; ">&nbsp;无损压缩（Yahoo! Smush.it、OptiPNG）</strong></span></p><p>&nbsp;</p>]]></description><category>HTML</category><comments>http://www.bm777.com/post/72.html#comment</comments><wfw:comment>http://www.bm777.com/</wfw:comment><wfw:commentRss>http://www.bm777.com/feed.asp?cmt=72</wfw:commentRss><trackback:ping>http://www.bm777.com/cmd.asp?act=tb&amp;id=72&amp;key=7b1b6ced</trackback:ping></item><item><title>今天是小年了，大家小年都吃什么呢</title><author>jamesvips@gmail.com (james)</author><link>http://www.bm777.com/post/71.html</link><pubDate>Tue, 25 Jan 2011 20:24:44 +0800</pubDate><guid>http://www.bm777.com/post/71.html</guid><description><![CDATA[<p>　不知道不觉中已经步入小年。。。越长大越孤单，越长大越没有感觉年味道。、。。大家都在忙。。。忙着上班。。。忙着上学。。。忙着回家，忙着玩。。。 　　记得小时候很喜欢过年的，非常的喜欢，因为新年了，有新衣服穿了，有好吃的了，还有最喜欢的大白兔奶糖。。。。巧克力。。。。好喜欢啊。。。还没有放寒假就开始盼望新年的到来。。。</p><p>现在长大了，自己可以挣钱买到自己喜欢的吃的穿的用的了的时候，就突然发现自己什么也不喜欢了。。。只想，在有空的时候休息休息。。。自己听首歌，一直听下去。 　　今天算是过年了，窗外也放弃了鞭炮声。大家，小年都吃什么呢？</p>]]></description><category>News</category><comments>http://www.bm777.com/post/71.html#comment</comments><wfw:comment>http://www.bm777.com/</wfw:comment><wfw:commentRss>http://www.bm777.com/feed.asp?cmt=71</wfw:commentRss><trackback:ping>http://www.bm777.com/cmd.asp?act=tb&amp;id=71&amp;key=f568238f</trackback:ping></item><item><title>CSS3媒体查询&amp;amp;视频教程</title><author>jamesvips@gmail.com (james)</author><link>http://www.bm777.com/post/70.html</link><pubDate>Thu, 20 Jan 2011 20:12:57 +0800</pubDate><guid>http://www.bm777.com/post/70.html</guid><description><![CDATA[<p>&nbsp;<strong>媒体查询</strong>是今天CSS样式最令人兴奋的一个方面.它让我们在不改变页面内容的前提下,准确地适应各种设备的布局.下面的这个介绍解释了什么是媒体查询,如何使用它,如何针对iPhone写样式和怎么去创建灵活的布局.</p><div id="__ss_6171020" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 425px; "><strong style="display: block; margin-top: 12px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; "><a title="Css3 媒体查询" style="color: rgb(36, 40, 43); text-decoration: none; " href="http://www.bm777.com/post/70.html">Css3 媒体查询</a></strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 425px; ">&nbsp;</div><p>&nbsp;</p><object id="__sse6171020" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=css3-101215011623-phpapp02&amp;stripped_title=css3-6171020&amp;userName=alonguo" /><param name="name" value="__sse6171020" /><param name="allowfullscreen" value="true" /><embed id="__sse6171020" type="application/x-shockwave-flash" width="425" height="355" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=css3-101215011623-phpapp02&amp;stripped_title=css3-6171020&amp;userName=alonguo" name="__sse6171020" allowscriptaccess="always" allowfullscreen="true"></embed></object>]]></description><category>CssOnline</category><comments>http://www.bm777.com/post/70.html#comment</comments><wfw:comment>http://www.bm777.com/</wfw:comment><wfw:commentRss>http://www.bm777.com/feed.asp?cmt=70</wfw:commentRss><trackback:ping>http://www.bm777.com/cmd.asp?act=tb&amp;id=70&amp;key=a84d20dc</trackback:ping></item><item><title>实例:利用CSS和JavaScript实现的动态导航效果</title><author>jamesvips@gmail.com (james)</author><link>http://www.bm777.com/post/69.html</link><pubDate>Tue, 11 Jan 2011 19:38:13 +0800</pubDate><guid>http://www.bm777.com/post/69.html</guid><description><![CDATA[<p><img alt="CSS和JavaScript实现的动态导航效果" title="CSS和JavaScript实现的动态导航效果" src="http://www.bm777.com/upload/css-javascript.jpg" /></p><p>&nbsp;</p><h3 style="font-size: 13px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">CSS代码</h3><pre style="border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(47, 111, 171); border-right-color: rgb(47, 111, 171); border-bottom-color: rgb(47, 111, 171); border-left-color: rgb(47, 111, 171); line-height: 20px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; ">&lt;style type=&quot;text/css&quot;&gt;body { font-family:verdana; }h3 a { color:#000;}#content { float:left; width:400px; border:1px solid #ccc;margin-left:20px; padding:2px 10px 10px 10px; }ul { margin:0; padding:0; list-style: none;width:200px;float:left; }ul li { margin:0 0 1px 0; padding:0; }ul li a { display:block; padding:8px; text-decoration:none; background: #eee; color: #039;}ul li a:hover { background: #ffc;}ul li a.selected { background: #c63; color:#fff;}#content div { display:none; }#content div.on { display:block; }&lt;/style&gt;</pre><h3 style="font-size: 13px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">JavaScript代码</h3><pre style="border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(47, 111, 171); border-right-color: rgb(47, 111, 171); border-bottom-color: rgb(47, 111, 171); border-left-color: rgb(47, 111, 171); line-height: 20px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; ">&lt;script type=&quot;text/javascript&quot;&gt;function applySelectedTo(link) { var ul = document.getElementsByTagName(&quot;ul&quot;)[0]; var allLinks = ul.getElementsByTagName(&quot;a&quot;); for (var i=0; i&lt;allLinks.length; i++) {  allLinks[i].className = &quot;&quot;; } link.className = &quot;selected&quot;; var allDivs = document.getElementsByTagName(&quot;div&quot;); for (var k=0; k&lt;allDivs.length; k++) {  allDivs[k].className = &quot;&quot;; } var lyricId = link.getAttribute(&quot;href&quot;).split(&quot;#&quot;)[1]; lyricId = document.getElementById(lyricId); lyricId.className = &quot;on&quot;;}&lt;/script&gt;</pre><h3 style="font-size: 13px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">HTML代码</h3><pre style="border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(47, 111, 171); border-right-color: rgb(47, 111, 171); border-bottom-color: rgb(47, 111, 171); border-left-color: rgb(47, 111, 171); line-height: 20px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; ">&lt;h1&gt;利用CSS和JavaScript实现的动态导航效果&lt;/h1&gt;&lt;h3&gt;&lt;a href=&quot;http://www.bm777.com/&quot;&gt;CSS&lt;/a&gt;&lt;/h3&gt;&lt;ul&gt;  &lt;li&gt;&lt;a onclick=&quot;applySelectedTo(this);return false;&quot;   href=&quot;#heartbreakHotel&quot;&gt;DIV+CSS模板&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a onclick=&quot;applySelectedTo(this);return false;&quot;   href=&quot;#blueSuedeShoes&quot;&gt;后台模板&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a onclick=&quot;applySelectedTo(this);return false;&quot;   href=&quot;#houndDog&quot; class=&quot;selected&quot;&gt;图片图标&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a onclick=&quot;applySelectedTo(this);return false;&quot;   href=&quot;#dontBeCruel&quot;&gt;CSS代码&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a onclick=&quot;applySelectedTo(this);return false;&quot;   href=&quot;#teddyBear&quot;&gt;CSS菜单&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div id=&quot;content&quot;&gt;  &lt;div id=&quot;heartbreakHotel&quot;&gt;    &lt;h2&gt;DIV+CSS模板&lt;/h2&gt;    &lt;p&gt;大量DIV+CSS布局的网页模板下载，提供免费、美观、	&lt;br /&gt;易修改的DIV+CSS HTML模板下载服务。&lt;/p&gt;  &lt;/div&gt;  &lt;div id=&quot;blueSuedeShoes&quot;&gt;    &lt;h2&gt;后台模板&lt;/h2&gt;    &lt;p&gt;大量实用、漂亮的后台模板下载，所有后台模板均系	&lt;br /&gt;手工打造或修改，且均包含HTML文件。 &lt;/p&gt;  &lt;/div&gt;  &lt;div class=&quot;on&quot; id=&quot;houndDog&quot;&gt;    &lt;h2&gt;图片图标&lt;/h2&gt;    &lt;p&gt;提供大量GIF图片、GIF图片下载、GIF图标、GIF图标	&lt;br /&gt;下载、GIF动画素材等图片下载服务。&lt;/p&gt;  &lt;/div&gt;  &lt;div id=&quot;dontBeCruel&quot;&gt;    &lt;h2&gt;CSS代码&lt;/h2&gt;    &lt;p&gt;提供大量CSS代码、CSS代码示例、CSS代码教程、	&lt;br /&gt;CSS代码特效等，供大家学习交流之用。&lt;/p&gt;  &lt;/div&gt;  &lt;div id=&quot;teddyBear&quot;&gt;    &lt;h2&gt;CSS菜单&lt;/h2&gt;    &lt;p&gt;提供大量CSS菜单、CSS导航菜单、CSS菜单教程、	&lt;br /&gt;CSS菜单代码等，供大家学习交流之用。 &lt;/p&gt;  &lt;/div&gt;&lt;/div&gt;</pre><p>&nbsp;</p>]]></description><category>CssOnline</category><comments>http://www.bm777.com/post/69.html#comment</comments><wfw:comment>http://www.bm777.com/</wfw:comment><wfw:commentRss>http://www.bm777.com/feed.asp?cmt=69</wfw:commentRss><trackback:ping>http://www.bm777.com/cmd.asp?act=tb&amp;id=69&amp;key=e4187650</trackback:ping></item><item><title>实例：应用CSS实现表单form布局 </title><author>jamesvips@gmail.com (james)</author><link>http://www.bm777.com/post/68.html</link><pubDate>Mon, 06 Dec 2010 18:47:24 +0800</pubDate><guid>http://www.bm777.com/post/68.html</guid><description><![CDATA[<p>&nbsp;实例：应用CSS实现表单form布局&nbsp;</p><p>&lt;style type=&quot;text/css&quot;&gt;</p><div>&nbsp;</div><div>label{</div><div>float: left;</div><div>width: 80px;</div><div>}</div><div>form{margin:0px}</div><div>input{</div><div>width: 180px;</div><div>border:1px solid #808080</div><div>}</div><div>&nbsp;</div><div>textarea{</div><div>width: 250px;</div><div>height: 150px;</div><div>}</div><div>&nbsp;</div><div>#sbutton{</div><div>margin-left: 80px;</div><div>margin-top: 5px;</div><div>width:80px;</div><div>}</div><div>&nbsp;</div><div>br{</div><div>clear: left;</div><div>}</div><div>&nbsp;</div><div>&lt;/style&gt;</div><div>&nbsp;</div><div>&lt;form action=&quot;&quot; method=&quot;post&quot;&gt;</div><div>&nbsp;</div><div>&lt;label for=&quot;user&quot;&gt;姓名:&lt;/label&gt;</div><div>&lt;input type=&quot;text&quot; id=user name=&quot;user&quot; value=&quot;&quot; /&gt;&lt;br /&gt;</div><div>&nbsp;</div><div>&lt;label for=&quot;email&quot;&gt;邮件:&lt;/label&gt;</div><div>&lt;input type=&quot;text&quot; id=email name=&quot;email&quot; value=&quot;&quot; /&gt;&lt;br /&gt;</div><div>&nbsp;</div><div>&lt;label for=&quot;comment&quot;&gt;备注:&lt;/label&gt;</div><div>&lt;textarea id=comment name=&quot;comment&quot;&gt;</div><div>&lt;/textarea&gt;</div><div>&lt;br /&gt;</div><div>&nbsp;</div><div>&lt;input type=&quot;submit&quot; id=&quot;sbutton&quot; value=&quot;确定&quot; /&gt;&lt;br /&gt;</div><div>&nbsp;</div><div>&lt;/form&gt;</div><div>&nbsp;</div>]]></description><category>CssOnline</category><comments>http://www.bm777.com/post/68.html#comment</comments><wfw:comment>http://www.bm777.com/</wfw:comment><wfw:commentRss>http://www.bm777.com/feed.asp?cmt=68</wfw:commentRss><trackback:ping>http://www.bm777.com/cmd.asp?act=tb&amp;id=68&amp;key=5bca8255</trackback:ping></item><item><title>UTF-8,GBK,GB2312网页编码的区别</title><author>jamesvips@gmail.com (james)</author><link>http://www.bm777.com/post/67.html</link><pubDate>Thu, 02 Dec 2010 07:47:40 +0800</pubDate><guid>http://www.bm777.com/post/67.html</guid><description><![CDATA[<p><a target="_self" href="#">&nbsp;</a><a target="_self" href="#">网页编码</a>UTF-8,GBK,GB2312的区别是什么呢？</p><p>UTF-8：Unicode TransformationFormat-8bit，允许含BOM，但通常不含BOM。是用以解决国际上字符的一种多字节编码，它对英文使用8位（即一个字节），中文使用24为（三个字节）来编码。UTF-8包含全世界所有国家需要用到的字符，是国际编码，通用性强。UTF-8编码的文字可以在各国支持UTF8字符集的浏览器上显示。如，如果是UTF8编码，则在外国人的英文IE上也能显示中文，他们无需下载IE的中文语言支持包。</p><p>&nbsp;</p><p>GBK是国家标准GB2312基础上扩容后兼容GB2312的标准。GBK的文字编码是用双字节来表示的，即不论中、英文字符均使用双字节来表示，为了区分中文，将其最高位都设定成1。GBK包含全部中文字符，是国家编码，通用性比UTF8差，不过UTF8占用的数据库比GBD大。</p><p>GBK、GB2312等与UTF8之间都必须通过Unicode编码才能相互转换：<br />GBK、GB2312－－Unicode－－UTF8<br />UTF8－－Unicode－－GBK、GB2312</p><p>对于一个网站、论坛来说，如果英文字符较多，则建议使用UTF－8节省空间。不过现在很多论坛的插件一般只支持GBK。<br />个编码的区别详细解释<br />简单来说，unicode，gbk和大五码就是编码的值，而utf-8,uft-16之类就是这个值的表现形式．而前面那三种编码是一兼容的，同一个汉字，那三个码值是完全不一样的．如＂汉＂的uncode值与gbk就是不一样的，假设uncode为a040，gbk为b030，而uft-8码，就是把那个值表现的形式．utf-8码完全只针对uncode来组织的，如果ＧＢＫ要转ＵＴＦ－８必须先转uncode码，再转utf-8就ＯＫ了．</p><p><br />详细的就见下面转的这篇文章．</p><p><br />谈谈Unicode编码，简要解释UCS、UTF、BMP、BOM等名词<br />这是一篇程序员写给程序员的趣味读物。所谓趣味是指可以比较轻松地了解一些原来不清楚的概念，增进知识，类似于打RPG游戏的升级。整理这篇文章的动机是两个问题：</p><p>问题一：&nbsp;<br />使用Windows记事本的&ldquo;另存为&rdquo;，可以在GBK、Unicode、Unicode big endian和UTF-8这几种编码方式间相互转换。同样是txt文件，Windows是怎样识别编码方式的呢？</p><p>我很早前就发现Unicode、Unicode bigendian和UTF-8编码的txt文件的开头会多出几个字节，分别是FF、FE（Unicode）,FE、FF（Unicode bigendian）,EF、BB、BF（UTF-8）。但这些标记是基于什么标准呢？</p><p><br />问题二：&nbsp;<br />最近在网上看到一个ConvertUTF.c，实现了UTF-32、UTF-16和UTF-8这三种编码方式的相互转换。对于Unicode(UCS2)、GBK、UTF-8这些编码方式，我原来就了解。但这个程序让我有些糊涂，想不起来UTF-16和UCS2有什么关系。&nbsp;<br />查了查相关资料，总算将这些问题弄清楚了，顺带也了解了一些Unicode的细节。写成一篇文章，送给有过类似疑问的朋友。本文在写作时尽量做到通俗易懂，但要求读者知道什么是字节，什么是十六进制。</p><p>0、big endian和little endian<br />big endian和littleendian是CPU处理多字节数的不同方式。例如&ldquo;汉&rdquo;字的Unicode编码是6C49。那么写到文件里时，究竟是将6C写在前面，还是将49写在前面？如果将6C写在前面，就是big endian。如果将49写在前面，就是little endian。</p><p>&ldquo;endian&rdquo;这个词出自《格列佛游记》。小人国的内战就源于吃鸡蛋时是究竟从大头(Big-Endian)敲开还是从小头(Little-Endian)敲开，由此曾发生过六次叛乱，一个皇帝送了命，另一个丢了王位。</p><p>&nbsp;</p><p>我们一般将endian翻译成&ldquo;字节序&rdquo;，将big endian和little endian称作&ldquo;大尾&rdquo;和&ldquo;小尾&rdquo;。</p><p>1、字符编码、内码，顺带介绍汉字编码<br />字符必须编码后才能被计算机处理。计算机使用的缺省编码方式就是计算机的内码。早期的计算机使用7位的ASCII编码，为了处理汉字，程序员设计了用于简体中文的GB2312和用于繁体中文的big5。</p><p><br />GB2312(1980年)一共收录了7445个字符，包括6763个汉字和682个其它符号。汉字区的内码范围高字节从B0-F7，低字节从A1-FE，占用的码位是72*94=6768。其中有5个空位是D7FA-D7FE。</p><p>GB2312支持的汉字太少。1995年的汉字扩展规范GBK1.0收录了21886个符号，它分为汉字区和图形符号区。汉字区包括21003个字符。</p><p>从ASCII、GB2312到GBK，这些编码方法是向下兼容的，即同一个字符在这些方案中总是有相同的编码，后面的标准支持更多的字符。在这些编码中，英文和中文可以统一地处理。区分中文编码的方法是高字节的最高位不为0。按照程序员的称呼，GB2312、GBK都属于双字节字符集 (DBCS)。</p><p><br />2000年的GB18030是取代GBK1.0的正式国家标准。该标准收录了27484个汉字，同时还收录了藏文、蒙文、维吾尔文等主要的少数民族文字。从汉字字汇上说，GB18030在GB13000.1的20902个汉字的基础上增加了CJK扩展A的6582个汉字（Unicode码0x3400-0x4db5），一共收录了27484个汉字。</p><p>CJK就是中日韩的意思。Unicode为了节省码位，将中日韩三国语言中的文字统一编码。GB13000.1就是ISO/IEC 10646-1的中文版，相当于Unicode 1.1。</p><p>GB18030的编码采用单字节、双字节和4字节方案。其中单字节、双字节和GBK是完全兼容的。4字节编码的码位就是收录了CJK扩展A的6582个汉字。例如：UCS的0x3400在GB18030中的编码应该是8139EF30，UCS的0x3401在GB18030中的编码应该是8139EF31。</p><p>微软提供了GB18030的升级包，但这个升级包只是提供了一套支持CJK扩展A的6582个汉字的新字体：新宋体-18030，并不改变内码。Windows 的内码仍然是GBK。</p><p><br />这里还有一些细节：</p><p>&nbsp;</p><p>GB2312的原文还是区位码，从区位码到内码，需要在高字节和低字节上分别加上A0。</p><p>对于任何字符编码，编码单元的顺序是由编码方案指定的，与endian无关。例如GBK的编码单元是字节，用两个字节表示一个汉字。这两个字节的顺序是固定的，不受CPU字节序的影响。UTF-16的编码单元是word（双字节），word之间的顺序是编码方案指定的，word内部的字节排列才会受到endian的影响。后面还会介绍UTF-16。</p><p>GB2312的两个字节的最高位都是1。但符合这个条件的码位只有128*128=16384个。所以GBK和GB18030的低字节最高位都可能不是1。不过这不影响DBCS字符流的解析：在读取DBCS字符流时，只要遇到高位为1的字节，就可以将下两个字节作为一个双字节编码，而不用管低字节的高位是什么。</p><p>2、Unicode、UCS和UTF<br />前面提到从ASCII、GB2312、GBK到GB18030的编码方法是向下兼容的。而Unicode只与ASCII兼容（更准确地说，是与ISO-8859-1兼容），与GB码不兼容。例如&ldquo;汉&rdquo;字的Unicode编码是6C49，而GB码是BABA。</p><p>Unicode也是一种字符编码方法，不过它是由国际组织设计，可以容纳全世界所有语言文字的编码方案。Unicode的学名是&quot;UniversalMultiple-Octet Coded Character Set&quot;，简称为UCS。UCS可以看作是&quot;Unicode CharacterSet&quot;的缩写。</p><p><br />根据维基百科全书(http://zh.wikipedia.org/wiki/)的记载：历史上存在两个试图独立设计Unicode的组织，即国际标准化组织（ISO）和一个软件制造商的协会（unicode.org）。ISO开发了ISO 10646项目，Unicode协会开发了Unicode项目。</p><p>在1991年前后，双方都认识到世界不需要两个不兼容的字符集。于是它们开始合并双方的工作成果，并为创立一个单一编码表而协同工作。从Unicode2.0开始，Unicode项目采用了与ISO 10646-1相同的字库和字码。</p><p>目前两个项目仍都存在，并独立地公布各自的标准。Unicode协会现在的最新版本是2005年的Unicode 4.1.0。ISO的最新标准是ISO 10646-3:2003。</p><p><br />UCS只是规定如何编码，并没有规定如何传输、保存这个编码。例如&ldquo;汉&rdquo;字的UCS编码是6C49，我可以用4个ascii数字来传输、保存这个编码；也可以用utf-8编码:3个连续的字节E6 B189来表示它。关键在于通信双方都要认可。UTF-8、UTF-7、UTF-16都是被广泛接受的方案。UTF-8的一个特别的好处是它与ISO-8859-1完全兼容。UTF是&ldquo;UCS Transformation Format&rdquo;的缩写。</p><p>IETF的RFC2781和RFC3629以RFC的一贯风格，清晰、明快又不失严谨地描述了UTF-16和UTF-8的编码方法。我总是记不得IETF是Internet Engineering Task Force的缩写。但IETF负责维护的RFC是Internet上一切规范的基础。</p><p>2.1、内码和code page<br />目前Windows的内核已经支持Unicode字符集，这样在内核上可以支持全世界所有的语言文字。但是由于现有的大量程序和文档都采用了某种特定语言的编码，例如GBK，Windows不可能不支持现有的编码，而全部改用Unicode。</p><p><br />Windows使用代码页(code page)来适应各个国家和地区。code page可以被理解为前面提到的内码。GBK对应的code page是CP936。</p><p>微软也为GB18030定义了code page：CP54936。但是由于GB18030有一部分4字节编码，而Windows的代码页只支持单字节和双字节编码，所以这个code page是无法真正使用的。</p><p><br />3、UCS-2、UCS-4、BMP<br />UCS有两种格式：UCS-2和UCS-4。顾名思义，UCS-2就是用两个字节编码，UCS-4就是用4个字节（实际上只用了31位，最高位必须为0）编码。下面让我们做一些简单的数学游戏： </p><p>UCS-2有2^16=65536个码位，UCS-4有2^31=2147483648个码位。</p><p>UCS-4根据最高位为0的最高字节分成2^7=128个group。每个group再根据次高字节分为256个plane。每个plane根据第3个字节分为256行 (rows)，每行包含256个cells。当然同一行的cells只是最后一个字节不同，其余都相同。</p><p>&nbsp;</p><p>group 0的plane 0被称作Basic Multilingual Plane, 即BMP。或者说UCS-4中，高两个字节为0的码位被称作BMP。</p><p>将UCS-4的BMP去掉前面的两个零字节就得到了UCS-2。在UCS-2的两个字节前加上两个零字节，就得到了UCS-4的BMP。而目前的UCS-4规范中还没有任何字符被分配在BMP之外。</p><p><br />4、UTF编码</p><p>UTF-8就是以8位为单元对UCS进行编码。从UCS-2到UTF-8的编码方式如下：</p><p>UCS-2编码(16进制) UTF-8 字节流(二进制)&nbsp;<br />0000 - 007F 0xxxxxxx&nbsp;<br />0080 - 07FF 110xxxxx 10xxxxxx&nbsp;<br />0800 - FFFF 1110xxxx 10xxxxxx 10xxxxxx</p><p>例如&ldquo;汉&rdquo;字的Unicode编码是6C49。6C49在0800-FFFF之间，所以肯定要用3字节模板了：1110xxxx 10xxxxxx10xxxxxx。将6C49写成二进制是：0110 110001 001001， 用这个比特流依次代替模板中的x，得到：1110011010110001 10001001，即E6 B1 89。</p><p>读者可以用记事本测试一下我们的编码是否正确。需要注意，UltraEdit在打开utf-8编码的文本文件时会自动转换为UTF-16，可能产生混淆。你可以在设置中关掉这个选项。更好的工具是Hex Workshop。</p><p>&nbsp;</p><p>UTF-16以16位为单元对UCS进行编码。对于小于0x10000的UCS码，UTF-16编码就等于UCS码对应的16位无符号整数。对于不小于0x10000的UCS码，定义了一个算法。不过由于实际使用的UCS2，或者UCS4的BMP必然小于0x10000，所以就目前而言，可以认为UTF-16和UCS-2基本相同。但UCS-2只是一个编码方案，UTF-16却要用于实际的传输，所以就不得不考虑字节序的问题。</p><p>&nbsp;</p><p>5、UTF的字节序和BOM<br />UTF-8以字节为编码单元，没有字节序的问题。UTF-16以两个字节为编码单元，在解释一个UTF-16文本前，首先要弄清楚每个编码单元的字节序。例如&ldquo;奎&rdquo;的Unicode编码是594E，&ldquo;乙&rdquo;的Unicode编码是4E59。如果我们收到UTF-16字节流&ldquo;594E&rdquo;，那么这是&ldquo;奎&rdquo;还是&ldquo;乙&rdquo;？</p><p>Unicode规范中推荐的标记字节顺序的方法是BOM。BOM不是&ldquo;Bill Of Material&rdquo;的BOM表，而是Byte order Mark。BOM是一个有点小聪明的想法：</p><p>&nbsp;</p><p>在UCS编码中有一个叫做&quot;ZERO WIDTH NO-BREAKSPACE&quot;的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输字符&quot;ZERO WIDTH NO-BREAK SPACE&quot;。</p><p>这样如果接收者收到FEFF，就表明这个字节流是Big-Endian的；如果收到FFFE，就表明这个字节流是Little-Endian的。因此字符&quot;ZERO WIDTH NO-BREAK SPACE&quot;又被称作BOM。</p><p><br />UTF-8不需要BOM来表明字节顺序，但可以用BOM来表明编码方式。字符&quot;ZERO WIDTH NO-BREAKSPACE&quot;的UTF-8编码是EF BB BF（读者可以用我们前面介绍的编码方法验证一下）。所以如果接收者收到以EF BBBF开头的字节流，就知道这是UTF-8编码了。</p><p>Windows就是使用BOM来标记文本文件的编码方式的。</p><p><br />6、进一步的参考资料<br />本文主要参考的资料是 &quot;Short overview of ISO-IEC 10646 and Unicode&quot; (http://www.nada.kth.se/i18n/ucs/unicode-iso10646-oview.html)。</p><p><br />我还找了两篇看上去不错的资料，不过因为我开始的疑问都找到了答案，所以就没有看：</p><p>&quot;Understanding Unicode A general introduction to the Unicode Standard&quot; (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&amp;item_id=IWS-Chapter04a)&nbsp;<br />&quot;Character set encoding basics Understanding character set encodings and legacy encodings&quot; (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&amp;item_id=IWS-Chapter03)&nbsp;<br />我写过UTF-8、UCS-2、GBK相互转换的软件包，包括使用Windows API和不使用Windows API的版本。以后有时间的话，我会整理一下放到我的个人主页上</p><p><br />我是想清楚所有问题后才开始写这篇文章的，原以为一会儿就能写好。没想到考虑措辞和查证细节花费了很长时间，竟然从下午1:30写到9:00。希望有读者能从中受益。</p><p>附录1 再说说区位码、GB2312、内码和代码页<br />有的朋友对文章中这句话还有疑问：<br />&ldquo;GB2312的原文还是区位码，从区位码到内码，需要在高字节和低字节上分别加上A0。&rdquo;</p><p><br />我再详细解释一下：</p><p><br />&ldquo;GB2312的原文&rdquo;是指国家1980年的一个标准《中华人民共和国国家标准 信息交换用汉字编码字符集 基本集 GB2312-80》。这个标准用两个数来编码汉字和中文符号。第一个数称为&ldquo;区&rdquo;，第二个数称为&ldquo;位&rdquo;。所以也称为区位码。1-9区是中文符号，16-55区是一级汉字，56-87区是二级汉字。现在Windows也还有区位输入法，例如输入1601得到&ldquo;啊&rdquo;。（这个区位输入法可以自动识别16进制的GB2312和10进制的区位码，也就是说输入B0A1同样会得到&ldquo;啊&rdquo;。）</p><p><br />内码是指操作系统内部的字符编码。早期操作系统的内码是与语言相关的。现在的Windows在系统内部支持Unicode，然后用代码页适应各种语言，&ldquo;内码&rdquo;的概念就比较模糊了。微软一般将缺省代码页指定的编码说成是内码。</p><p>内码这个词汇，并没有什么官方的定义，代码页也只是微软这个公司的叫法。作为程序员，我们只要知道它们是什么东西，没有必要过多地考证这些名词。</p><p>所谓代码页(code page)就是针对一种语言文字的字符编码。例如GBK的code page是CP936，BIG5的code page是CP950，GB2312的code page是CP20936。</p><p>Windows中有缺省代码页的概念，即缺省用什么编码来解释字符。例如Windows的记事本打开了一个文本文件，里面的内容是字节流：BA、BA、D7、D6。Windows应该去怎么解释它呢？</p><p>是按照Unicode编码解释、还是按照GBK解释、还是按照BIG5解释，还是按照ISO8859-1去解释？如果按GBK去解释，就会得到&ldquo;汉字&rdquo;两个字。按照其它编码解释，可能找不到对应的字符，也可能找到错误的字符。所谓&ldquo;错误&rdquo;是指与文本作者的本意不符，这时就产生了乱码。</p><p>答案是Windows按照当前的缺省代码页去解释文本文件里的字节流。缺省代码页可以通过控制面板的区域选项设置。记事本的另存为中有一项ANSI，其实就是按照缺省代码页的编码方法保存。</p><p><br />Windows的内码是Unicode，它在技术上可以同时支持多个代码页。只要文件能说明自己使用什么编码，用户又安装了对应的代码页，Windows就能正确显示，例如在HTML文件中就可以指定charset。</p><p>&nbsp;</p><p>有的HTML文件作者，特别是英文作者，认为世界上所有人都使用英文，在文件中不指定charset。如果他使用了0x80-0xff之间的字符，中文Windows又按照缺省的GBK去解释，就会出现乱码。这时只要在这个html文件中加上指定charset的语句，例如：<br />&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=ISO8859-1&quot;&gt;<br />如果原作者使用的代码页和ISO8859-1兼容，就不会出现乱码了。</p><p><br />再说区位码，啊的区位码是1601，写成16进制是0x10,0x01。这和计算机广泛使用的ASCII编码冲突。为了兼容00-7f的ASCII编码，我们在区位码的高、低字节上分别加上A0。这样&ldquo;啊&rdquo;的编码就成为B0A1。我们将加过两个A0的编码也称为GB2312编码，虽然GB2312的原文根本没提到这一点。</p><p>&nbsp;</p>]]></description><category>HTML</category><comments>http://www.bm777.com/post/67.html#comment</comments><wfw:comment>http://www.bm777.com/</wfw:comment><wfw:commentRss>http://www.bm777.com/feed.asp?cmt=67</wfw:commentRss><trackback:ping>http://www.bm777.com/cmd.asp?act=tb&amp;id=67&amp;key=f8e54d78</trackback:ping></item><item><title>学习：在CSS中的伪类与伪元素</title><author>jamesvips@gmail.com (james)</author><link>http://www.bm777.com/post/66.html</link><pubDate>Tue, 30 Nov 2010 06:54:33 +0800</pubDate><guid>http://www.bm777.com/post/66.html</guid><description><![CDATA[<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; font-size: 16px; text-shadow: rgb(221, 221, 221) 1px 1px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(235, 233, 225); color: rgb(54, 54, 54); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(222, 219, 209); border-right-color: rgb(222, 219, 209); border-bottom-color: rgb(222, 219, 209); border-left-color: rgb(222, 219, 209); background-position: initial initial; background-repeat: initial initial; ">起因</h3><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; line-height: 1.8em; ">今天在了解<a target="_self" href="http://www.bm777.com/catalog.asp?cate=3"><strong>CSS</strong></a>优先级与继承相关概念的时候，接触到了这两个东东。之前看见类似<code style="font-family: 'courier new', courier, monospace; ">:after</code>的东东时，均会认为是<a target="_self" href="http://www.bm777.com/search.asp?cx=014724041144905348996:pf5fnahnzuw&amp;cof=FORID:11&amp;ie=UTF-8&amp;q=%E4%BC%AA%E7%B1%BB&amp;sa=%E6%90%9C%E7%B4%A2&amp;siteurl=www.bm777.com/">伪类</a>（Pseudo-classes），但是实际不然，在<a target="_self" href="http://www.bm777.com/catalog.asp?cate=3">CSS2规范</a>中对伪类（Pseudo-classes）以及伪元素（Pseudo-elements）实际做了不同的解释。</p><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; font-size: 16px; text-shadow: rgb(221, 221, 221) 1px 1px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(235, 233, 225); color: rgb(54, 54, 54); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(222, 219, 209); border-right-color: rgb(222, 219, 209); border-bottom-color: rgb(222, 219, 209); border-left-color: rgb(222, 219, 209); background-position: initial initial; background-repeat: initial initial; ">释疑</h3><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; line-height: 1.8em; ">对于这种很纠结的问题，其实最好的答案就在规范里面，立马Google出CSS2规范，里面果真具体定义了，<a target="_blank" rel="nofollow" style="text-decoration: none; -webkit-transition-property: color; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out; -webkit-transition-delay: initial; color: rgb(255, 120, 0); " href="http://www.w3.org/TR/CSS2/selector.html#pseudo-elements">请猛击这里查看</a>。不过规范毕竟是规范，看了不让人晕就不叫规范了=，=</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; line-height: 1.8em; ">我仔细看了一遍又一遍还是不怎么能够解释得清他们直接的区别，so木有办法，只好硬记下了<code style="font-family: 'courier new', courier, monospace; ">:first-line, :first-letter, :before, :after</code>这几个就是伪元素，其余都为伪类~希望有DX可以帮忙具体总结总结两者差异吧，或者有时间再好好研读研读规范&hellip;&hellip;</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; line-height: 1.8em; ">不过这里不得不赞一下<a target="_self" href="http://www.bm777.com/search.asp?q=CSS3">CSS3</a>的标准草案，里面终于把这两个概念从代码上做了区分，对于伪类的代码不变，但是对于伪元素，则使用两个<code style="font-family: 'courier new', courier, monospace; ">::</code>作为前缀，因此这样就很容易区分了，<a rel="nofollow" target="_blank" style="text-decoration: none; -webkit-transition-property: color; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out; -webkit-transition-delay: initial; color: rgb(255, 120, 0); " href="http://www.w3.org/TR/css3-selectors/#pseudo-elements">可以猛击这里查看</a>。</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; line-height: 1.8em; ">为何这里如此纠结两者的区别呢？首先第一点是在计算一个选择器的优先级时，伪类和伪元素的权重是不同的，因此在比较细节的地方需要纠结；其次是伪类允许在选择器的任何位置，但是伪元素只允许出现在最后一个简单选择器的末尾（Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector），在CSS3的草案中还提到，每个选择器中只允许出现一个伪元素，未来版本可能会允许多个（Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the&nbsp;<a target="_blank" rel="nofollow" style="text-decoration: none; -webkit-transition-property: color; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out; -webkit-transition-delay: initial; color: rgb(255, 120, 0); " href="http://www.w3.org/TR/css3-selectors/#subject">subjects</a>&nbsp;of the selector.<strong>Note:</strong>&nbsp;A future version of this specification may allow multiple pseudo-elements per selector）</p><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; font-size: 16px; text-shadow: rgb(221, 221, 221) 1px 1px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(235, 233, 225); color: rgb(54, 54, 54); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(222, 219, 209); border-right-color: rgb(222, 219, 209); border-bottom-color: rgb(222, 219, 209); border-left-color: rgb(222, 219, 209); background-position: initial initial; background-repeat: initial initial; ">感受</h3><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; line-height: 1.8em; ">确实，前端这潭水真是太深太深了，任何一个细小的地方都可以引发很多讨论。这时候规范确实是个好东东，虽然那玩意儿确实不是给普通人读的，只是遇到纠结问题去查阅查阅确实会很有收获滴~努力学习吧~</p><p>&nbsp;</p>]]></description><category>CssOnline</category><comments>http://www.bm777.com/post/66.html#comment</comments><wfw:comment>http://www.bm777.com/</wfw:comment><wfw:commentRss>http://www.bm777.com/feed.asp?cmt=66</wfw:commentRss><trackback:ping>http://www.bm777.com/cmd.asp?act=tb&amp;id=66&amp;key=6536d1c0</trackback:ping></item><item><title>CSS实战：用CSS实现首字下沉效果，仿word的首字下沉</title><author>jamesvips@gmail.com (james)</author><link>http://www.bm777.com/post/65.html</link><pubDate>Sun, 28 Nov 2010 07:26:41 +0800</pubDate><guid>http://www.bm777.com/post/65.html</guid><description><![CDATA[<p><img alt="CSS首字下沉" title="CSS首字下沉" src="http://www.bm777.com/upload/css-first.jpg" /></p><p>用过word的大部分人都知道，word里有一个首字下沉功能，在文章的排版时用，有时能给文章增色不少。</p><p>今天我们用css仿word的首字下沉功能，不用修改代码，只用到css的伪元素:first-letter，即可实现首字下沉效果。</p><p>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</p><p>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;</p><p>&lt;head&gt;</p><p>&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;</p><p>&lt;title&gt;CSS首字下沉&lt;/title&gt;</p><p>&lt;style type=&quot;text/css&quot;&gt;</p><p>.dyfirst {</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>width:300px;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>border:1px solid #ddd;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>padding:5px;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>font-size:12px;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>margin:5px 0;</p><p>}</p><p>.dyfirst:first-line {</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>color:#050;</p><p>}</p><p>.dyfirst:first-letter {</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>font-size:300%;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>font-weight:bold;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>color:#000;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>float:left;</p><p>}</p><p>&lt;/style&gt;</p><p>&lt;/head&gt;</p><p>&lt;body&gt;</p><p>&lt;div class=&quot;dyfirst&quot;&gt; To the world you may be one person, but to one person you may be theworld. Never frown, even when you are sad, because you never know who is fallingin love with your smile. &lt;/div&gt;</p><p>&lt;div class=&quot;dyfirst&quot;&gt; 对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 &lt;/div&gt;</p><p>&lt;/body&gt;</p><p>&lt;/html&gt;</p><p>&nbsp;</p>]]></description><category>CssOnline</category><comments>http://www.bm777.com/post/65.html#comment</comments><wfw:comment>http://www.bm777.com/</wfw:comment><wfw:commentRss>http://www.bm777.com/feed.asp?cmt=65</wfw:commentRss><trackback:ping>http://www.bm777.com/cmd.asp?act=tb&amp;id=65&amp;key=f1c3f5f6</trackback:ping></item></channel></rss>

