﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><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>BlogJava-javaGrowing-随笔分类-css</title><link>http://www.blogjava.net/juhongtao/category/16924.html</link><description /><language>zh-cn</language><lastBuildDate>Fri, 02 Mar 2007 09:32:08 GMT</lastBuildDate><pubDate>Fri, 02 Mar 2007 09:32:08 GMT</pubDate><ttl>60</ttl><item><title>解决select菜单边框无法设置的问题</title><link>http://www.blogjava.net/juhongtao/archive/2006/11/12/80651.html</link><dc:creator>javaGrowing</dc:creator><author>javaGrowing</author><pubDate>Sat, 11 Nov 2006 16:17:00 GMT</pubDate><guid>http://www.blogjava.net/juhongtao/archive/2006/11/12/80651.html</guid><wfw:comment>http://www.blogjava.net/juhongtao/comments/80651.html</wfw:comment><comments>http://www.blogjava.net/juhongtao/archive/2006/11/12/80651.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/juhongtao/comments/commentRss/80651.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/juhongtao/services/trackbacks/80651.html</trackback:ping><description><![CDATA[&lt;span style="border:1px solid green; position:absolute; overflow:hidden"&gt;&lt;select style="margin:-2px"&gt; <br />&lt;option&gt;1111&lt;/option&gt; <br />&lt;option&gt;11111111111111&lt;/option&gt; <br />&lt;option&gt;111111111&lt;/option&gt; <br />&lt;/select&gt;&lt;/span&gt;<img src ="http://www.blogjava.net/juhongtao/aggbug/80651.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/juhongtao/" target="_blank">javaGrowing</a> 2006-11-12 00:17 <a href="http://www.blogjava.net/juhongtao/archive/2006/11/12/80651.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>提高网页的用户体验：字体大小的设计</title><link>http://www.blogjava.net/juhongtao/archive/2006/11/06/79446.html</link><dc:creator>javaGrowing</dc:creator><author>javaGrowing</author><pubDate>Mon, 06 Nov 2006 09:40:00 GMT</pubDate><guid>http://www.blogjava.net/juhongtao/archive/2006/11/06/79446.html</guid><wfw:comment>http://www.blogjava.net/juhongtao/comments/79446.html</wfw:comment><comments>http://www.blogjava.net/juhongtao/archive/2006/11/06/79446.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/juhongtao/comments/commentRss/79446.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/juhongtao/services/trackbacks/79446.html</trackback:ping><description><![CDATA[
		<span id="qqread_text_main">  
<p style="TEXT-INDENT: 2em">现在国内绝大多数的站点都用<a href="http://www.qqread.com/keywords/css.html" target="_blank">CSS</a>把字体大小设定为12px，像素虽然也是相对尺寸单位，但只是相对于屏幕的分辨率 ，当屏幕的分辨率一定时，如果你感到字太小，阅读有困难，在非标准浏览器中就无能为力了，所以说，如果把单位改成em， </p><table style="MARGIN: 10px 7px 3px 0px" cellspacing="0" cellpadding="0" align="right" border="0"><tbody><tr><td><span id="ad_qqread_mid_big"></span></td></tr></tbody></table>那么就可以用CTRL+鼠标滚动把字放大，或者用菜单上的查看&gt;文字大小来改变字的大小。 
<p style="TEXT-INDENT: 2em"><strong>如何设定</strong></p><p style="TEXT-INDENT: 2em">1.在body标签里将字体尺寸设为62.5%，如果在body里没有CSS设定，那么浏览器默认的大小是16px，设了62.5%，则字体尺寸=16px*62.5%=10px，这时你能用em方便地设大小了，比如你需要用12px，只要设1.2em。</p><p style="TEXT-INDENT: 2em">以下是引用片段：</p><code><p style="TEXT-INDENT: 2em"></p><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img id="Codehighlighter1_4_27_Open_Image" onclick="this.style.display='none'; Codehighlighter1_4_27_Open_Text.style.display='none'; Codehighlighter1_4_27_Closed_Image.style.display='inline'; Codehighlighter1_4_27_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockStart.gif" align="top" /><img id="Codehighlighter1_4_27_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_4_27_Closed_Text.style.display='none'; Codehighlighter1_4_27_Open_Image.style.display='inline'; Codehighlighter1_4_27_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedBlock.gif" align="top" /><span style="COLOR: #800000">body</span><span id="Codehighlighter1_4_27_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff">{<img src="http://www.blogjava.net/images/dot.gif" />}</span><span id="Codehighlighter1_4_27_Open_Text"><span style="COLOR: #000000">{</span><span style="COLOR: #ff0000"> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />font-size</span><span style="COLOR: #000000">:</span><span style="COLOR: #0000ff">62.5%</span><span style="COLOR: #000000">;</span><span style="COLOR: #ff0000"> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockEnd.gif" align="top" /></span><span style="COLOR: #000000">}</span></span><span style="COLOR: #800000"> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img id="Codehighlighter1_33_73_Open_Image" onclick="this.style.display='none'; Codehighlighter1_33_73_Open_Text.style.display='none'; Codehighlighter1_33_73_Closed_Image.style.display='inline'; Codehighlighter1_33_73_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockStart.gif" align="top" /><img id="Codehighlighter1_33_73_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_33_73_Closed_Text.style.display='none'; Codehighlighter1_33_73_Open_Image.style.display='inline'; Codehighlighter1_33_73_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedBlock.gif" align="top" />h1</span><span id="Codehighlighter1_33_73_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff">{<img src="http://www.blogjava.net/images/dot.gif" />}</span><span id="Codehighlighter1_33_73_Open_Text"><span style="COLOR: #000000">{</span><span style="COLOR: #ff0000"> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img id="Codehighlighter1_53_69_Open_Image" onclick="this.style.display='none'; Codehighlighter1_53_69_Open_Text.style.display='none'; Codehighlighter1_53_69_Closed_Image.style.display='inline'; Codehighlighter1_53_69_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top" /><img id="Codehighlighter1_53_69_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_53_69_Closed_Text.style.display='none'; Codehighlighter1_53_69_Open_Image.style.display='inline'; Codehighlighter1_53_69_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top" />fong-size</span><span style="COLOR: #000000">:</span><span style="COLOR: #0000ff">1.4em</span><span style="COLOR: #000000">;</span><span id="Codehighlighter1_53_69_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff">/**/</span><span id="Codehighlighter1_53_69_Open_Text"><span style="COLOR: #008000">/*</span><span style="COLOR: #008000">h1字的大小相当于14px</span><span style="COLOR: #008000">*/</span></span><span style="COLOR: #ff0000"> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockEnd.gif" align="top" /></span><span style="COLOR: #000000">}</span></span><span style="COLOR: #800000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span></div><p style="TEXT-INDENT: 2em">2.body里字体尺寸设为75%，则字体尺寸=16px*75%=12px，1em相当于12px.</p><p style="TEXT-INDENT: 2em">以下是引用片段：</p><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img id="Codehighlighter1_4_25_Open_Image" onclick="this.style.display='none'; Codehighlighter1_4_25_Open_Text.style.display='none'; Codehighlighter1_4_25_Closed_Image.style.display='inline'; Codehighlighter1_4_25_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockStart.gif" align="top" /><img id="Codehighlighter1_4_25_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_4_25_Closed_Text.style.display='none'; Codehighlighter1_4_25_Open_Image.style.display='inline'; Codehighlighter1_4_25_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedBlock.gif" align="top" /><span style="COLOR: #800000">body</span><span id="Codehighlighter1_4_25_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff">{<img src="http://www.blogjava.net/images/dot.gif" />}</span><span id="Codehighlighter1_4_25_Open_Text"><span style="COLOR: #000000">{</span><span style="COLOR: #ff0000"> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />font-size</span><span style="COLOR: #000000">:</span><span style="COLOR: #0000ff">75%</span><span style="COLOR: #000000">;</span><span style="COLOR: #ff0000"> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockEnd.gif" align="top" /></span><span style="COLOR: #000000">}</span></span><span style="COLOR: #800000"> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img id="Codehighlighter1_31_71_Open_Image" onclick="this.style.display='none'; Codehighlighter1_31_71_Open_Text.style.display='none'; Codehighlighter1_31_71_Closed_Image.style.display='inline'; Codehighlighter1_31_71_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockStart.gif" align="top" /><img id="Codehighlighter1_31_71_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_31_71_Closed_Text.style.display='none'; Codehighlighter1_31_71_Open_Image.style.display='inline'; Codehighlighter1_31_71_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedBlock.gif" align="top" />h1</span><span id="Codehighlighter1_31_71_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff">{<img src="http://www.blogjava.net/images/dot.gif" />}</span><span id="Codehighlighter1_31_71_Open_Text"><span style="COLOR: #000000">{</span><span style="COLOR: #ff0000"> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img id="Codehighlighter1_51_67_Open_Image" onclick="this.style.display='none'; Codehighlighter1_51_67_Open_Text.style.display='none'; Codehighlighter1_51_67_Closed_Image.style.display='inline'; Codehighlighter1_51_67_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top" /><img id="Codehighlighter1_51_67_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_51_67_Closed_Text.style.display='none'; Codehighlighter1_51_67_Open_Image.style.display='inline'; Codehighlighter1_51_67_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top" />fong-size</span><span style="COLOR: #000000">:</span><span style="COLOR: #0000ff">1.5em</span><span style="COLOR: #000000">;</span><span id="Codehighlighter1_51_67_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff">/**/</span><span id="Codehighlighter1_51_67_Open_Text"><span style="COLOR: #008000">/*</span><span style="COLOR: #008000">h1字的大小相当于18px</span><span style="COLOR: #008000">*/</span></span><span style="COLOR: #ff0000"> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockEnd.gif" align="top" /></span><span style="COLOR: #000000">}</span></span><span style="COLOR: #800000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span></div></code><p style="TEXT-INDENT: 2em">第一种方法更好些。</p><p style="TEXT-INDENT: 2em">如果是英文网站的话，还可以设定为small、x-small......</p><p style="TEXT-INDENT: 2em">当然这样一来，对页面的<a href="http://www.qqread.com/keywords/photoshop_e.html" target="_blank">设计</a>要求会高一些。</p></span>
<img src ="http://www.blogjava.net/juhongtao/aggbug/79446.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/juhongtao/" target="_blank">javaGrowing</a> 2006-11-06 17:40 <a href="http://www.blogjava.net/juhongtao/archive/2006/11/06/79446.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>