始终在页面固定位�|�的�?�?

��熊泡�� — Sat, 27 Jan 2007 15:31:00 GMT

始终在页面固定位�|�的�?lt;/TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312"> </HEAD> <style>  </style> <BODY> <div id="Javascript.Div1" class="div" style="width: 240; height:90" align="center">正中...</div> <SCRIPT LANGUAGE="JavaScript"> function sc1(){ document.getElementById("Javascript.Div1").style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2 document.getElementById("Javascript.Div1").style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2; } </SCRIPT> <div id="Javascript.Div2" class="div" style="width: 240; height:90;" align="center">左上...</div> <SCRIPT LANGUAGE="JavaScript"> function sc2(){ document.getElementById("Javascript.Div2").style.top=document.body.scrollTop document.getElementById("Javascript.Div2").style.left=document.body.scrollLeft; } </SCRIPT> <div id="Javascript.Div3" class="div" style="width: 240; height:90;" align="center">左下...</div> <SCRIPT LANGUAGE="JavaScript"> function sc3(){ document.getElementById("Javascript.Div3").style.top=document.body.scrollTop+document.body.clientHeight-document.getElementById("Javascript.Div3").offsetHeight; document.getElementById("Javascript.Div3").style.left=document.body.scrollLeft; } </SCRIPT> <div id="Javascript.Div4" class="div" style="width: 240; height:90;" align="center">右上...</div> <SCRIPT LANGUAGE="JavaScript"> function sc4(){ document.getElementById("Javascript.Div4").style.top=document.body.scrollTop; document.getElementById("Javascript.Div4").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.Div4").offsetWidth; } </SCRIPT> <div id="Javascript.Div5" class="div" style="width: 240; height:90;" align="center">右下...</div> <SCRIPT LANGUAGE="JavaScript"> function sc5(){ document.getElementById("Javascript.Div5").style.top=document.body.scrollTop+document.body.clientHeight-document.getElementById("Javascript.Div5").offsetHeight; document.getElementById("Javascript.Div5").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.Div5").offsetWidth;; } </SCRIPT> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <div style="position: absolute; top: 0; left: 0; width: 10000; height: 4000;"></div> </BODY> </HTML> <div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/kangpangpang/" target="_blank">��熊泡��</a> 2007-01-27 23:31 <a href="http://www.aygfsteel.com/kangpangpang/articles/96331.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> <article> ��熊泡�� — Sat, 08 Jul 2006 14:41:00 GMT <ul> <li>原文作者：Roger Johansson </li> <li>作者简介：住在瑞典哥�d堡，1994�q�开始接触和参与web设计�Q?56 Berea Street是他的住址�Q�因此采用这个名字作��Z��的个��Z��域�? </li> <li>原文出处�Q?a target="new">www.456bereastreet.com</a></li> <li>原文发表旉��Q?005�q?�?5�? </li> <li>阿捷说明�Q�此文原�?CSS tips and tricks"�Q�有2��，我将它们合�ƈ��译在本文中�?</li> </ul> 最�q?�l�常有朋友问我一些工作中遇到的CSS问题。他们��L��不能很好的控制CSS�Q�媄响CSS的效率发挥。我来分析�ȝ��一下错误所在，帮助大家更加�Ҏ��使用CSS�?/p> 本文�ȝ��了我开始��用CSS布局�Ҏ��以来所有的技巧和兼容�Ҏ��Q�我愿意把这些与你分享，我会重点解释一些新手容易犯的错�?包括我自�׃��犯过�?�Q�如果你已经是CSS高手�Q�这些经验技巧可能已�l�都知道�Q�如果你有更多的�Q�希望可以帮我补充�?/p> <h4>一.使用css�~�写</h4> 使用�~�写可以帮助减少你CSS文�g的大��，更加�Ҏ��阅读。css�~�写的主要规则请参看�?a target="new">常用css�~�写语法�ȝ��</a>》，�q�里��׃��展开描述�?/p> <h4>�?明确定义单位�Q�除非��gؓ0</h4> 忘记定义��寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"�Q�但是在CSS中，你必��ȝ��一个准��的单位�Q�比如：width:100px width:100em。只有两个例外情况可以不定义单位�Q�行高和0倹{��除此以外，其他值都必须紧跟单位�Q�注意，不要在数值和单位之间加空根{�?/p> <h4>�?区分大小�?/h4> 当在XHTML中��用CSS�Q�CSS里定义的元素名称是区分大��写的。�ؓ了避免这�U�错误，我徏议所有的定义名称都采用小写�?/p> class和id的值在HTML和XHTML中也是区分大��写的，如果你一定要大小写�؜合写�Q�请仔细��认你在CSS的定义和XHTML里的标签是一致的�?/p> <h4>�?取消class和id前的元素限定</h4> 当你写给一个元素定义class或者id�Q�你可以省略前面的元素限定，因�ؓID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如： div#content { /* declarations */ } fieldset.details { /* declarations */ } 可以写成 #content { /* declarations */ } .details { /* declarations */ } �q�样可以节省一些字节�?/p> <h4>�?默认�?/h4> 通常padding的默认��gؓ0�Q�background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突�Q�可以在样式表一开始就先定义所有元素的margin和padding值都�?�Q�象�q�样�Q?/p> * { margin:0; padding:0; } <h4>�?不需要重复定义可�l�承的�?/h4> CSS中，子元素自动��承父元素的属性��|��象颜艌Ӏ�字体等�Q�已�l�在父元素中定义�q�的�Q�在子元素中可以直接�l�承�Q�不需要重复定义。但是要注意�Q�浏览器可能用一些默认��D��盖你的定义�?/p> <h4>�?最�q�优先原�?/h4> 如果对同一个元素的定义有多�U�，以最接近(最��一�U?的定义�ؓ最优先�Q�例如有�q�么一�D�代�?/p> Update: Lorem ipsum dolor set 在CSS文�g中，你已�l�定义了元素p�Q�又定义了一个class"update" p { margin:1em 0; font-size:1em; color:#333; } .update { font-weight:bold; color:#600; } �q�两个定义中�Q�class="update"��被使用�Q�因为class比p更近。你可以查阅W3C的�?Calculating a selector’s specificity�?了解更多�?/p> <h4>�?多重class定义</h4> 一个标�{�֏�以同时定义多个class。例如：我们先定义两个样式，�W�一个样式背景�ؓ#666�Q�第二个样式�?0 px的边框�?/p> .one{width:200px;background:#666;} .two{border:10px solid #F00;} 在页面代码中�Q�我们可以这栯��?/p> <div class="one two"></div> �q�样最�l�的昄��效果是这个div既有#666的背景，也有10px的边框。是的，�q�样做是可以的，你可以尝试一下�?/p> <h4>�?使用子选择�?descendant selectors)</h4> CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这�D�代码： <div id="subnav"> <ul> <li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>> <li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li> <li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li> </ul> </div> �q�段代码的CSS定义是： div#subnav ul { /* Some styling */ } div#subnav ul li.subnavitem { /* Some styling */ } div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } div#subnav ul li.subnavitemselected { /* Some styling */ } div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 你可以用下面的方法替代上面的代码 <ul id="subnav"> <li> <a href="#"> Item 1</a> </li> <li class="sel"> <a href="#"> Item 1</a> </li> <li> <a href="#"> Item 1</a> </li> </ul> 样式定义是： #subnav { /* Some styling */ } #subnav li { /* Some styling */ } #subnav a { /* Some styling */ } #subnav .sel { /* Some styling */ } #subnav .sel a { /* Some styling */ } 用子选择器可以��你的代码和CSS更加��z�、更加容易阅诅R�?/p> <h4>�?不需要给背景囄��路径加引�?/h4> ��Z��节省字节�Q�我��不要�l�背景图片�\径加引号�Q�因为引号不是必��ȝ��。例如： background:url("images/***.gif") #333; 可以写�ؓ background:url(images/***.gif) #333; 如果你加了引��P��反而会引�v一些浏览器的错误�?/p> <h4>十一.�l�选择�?Group selectors)</h4> 当一些元素类型、class或者id都有共同的一些属性，你就可以使用�l�选择器来避免多次的重复定义。这可以节省不少字节�? 例如�Q�定义所有标题的字体、颜色和margin�Q�你可以�q�样写： h1,h2,h3,h4,h5,h6 { font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif; color:#333; margin:1em 0; } 如果在��用时�Q�有个别元素需要定义独立样式，你可以再加上新的定义�Q�可以覆盖老的定义�Q�例如： h1 { font-size:2em; } h2 { font-size:1.6em; } <h4>十二.用正��的��序指定链接的样�?/h4> 当你用CSS来定义链接的多个状态样式时�Q�要注意它们书写的顺序，正确的顺序是�Q?link :visited :hover :active。抽取第一个字母是"LVHA"�Q�你可以记忆�?LoVe HAte"(喜欢讨厌)。�ؓ什么这么定义，可以参考Eric Meyer的�?a target="new">Link Specificity</a>》�?/p> 如果你的用户需要用键盘来控�Ӟ��需要知道当前链接的焦点�Q�你�q�可以定�?focus属性�?focus属性的效果也取决与你书写的位置�Q�如果你希望聚焦元素昄��:hover效果�Q�你��把:focus写在:hover前面�Q�如果你希望聚焦效果替代:hover效果�Q�你��把:focus攑֜�:hover后面�?/p> <h4>十三.清除��动</h4> 一个非常常见的CSS问题�Q�定位��用��Q动的时候，下面的层被��Q动的层所覆盖�Q�或者层里嵌套的子层��出了外层的范围�?/p> 通常的解军_��法是在��Q动层后面��d��一个额外元素，例如一个div或者一个br�Q��ƈ且定义它的样式�ؓclear: both。这个办法有一点牵强，�q�运的是�q�有一个好办法可以解决�Q�参看这��文章�?a target="new">How To Clear Floats Without Structural Markup</a>�?注：本站��尽快翻译此�?�?/p> 上面2�U�方法可以很好解��x�Q动超出的问题�Q�但是如果当你真的需要对层或者层里的对象�q�行clear的时候怎么办？一�U�简单的�Ҏ��是用overflow属性，�q�个�Ҏ��最初的发表在�?a target="new">Simple Clearing of Floats</a>》，又在�?a target="new">Clearance</a>》和�?a target="new">Super simple clearing floats</a>》中被广泛讨论�?/p> 上面那一�U�clear�Ҏ��更适合你，要看具体的情况，�q�里不再展开��。另外关于float的应用，一些优�U�的文章已�l�说得很清楚�Q�推荐你阅读�Q��?a target="new">Floatutorial</a>》、�?a target="new">Containing Floats</a>》和�?a target="new">Float Layouts</a>�?/p> <h4>十四.横向居中(centering)</h4> �q�是一个简单的技巧，但是值得再说一遍，因�ؓ我看见太多的新手问题都是问这个：CSS如何横向居中�Q�你需要定义元素的宽，�q�且定义横向的margin�Q�如果你的布局包含在一个层(容器)中，��p��q�样�Q?/p> <div class="wmqeeuq" id="wrap">  </div> 你可以这样定义��它横向居中： #wrap { width:760px; /* 修改��Z��的层的宽�?*/ margin:0 auto; } 但是IE5/Win不能正确昄��q�个定义�Q�我们采用一个非常有用的技巧来解决�Q�用text-align属性。就象这��P�� body { text-align:center; } #wrap { width:760px; /* 修改��Z��的层的宽�?*/ margin:0 auto; text-align:left; } �W�一个body的text-align:center; 规则定义IE5/Win中body的所有元素居�?其他��览器只是将文字居中) �Q�第二个text-align:left;是将#warp中的文字居左�?/p> <h4>十五.导入(Import)和隐藏CSS</h4> 因�ؓ老版本浏览器不支持CSS�Q�一个通常的做法是使用@import技巧来把CSS隐藏��h��。例如： @import url("main.css"); 然而，�q�个�Ҏ��对IE4不�v作用�Q�这让我很是头疼了一阵子。后来我用这��L��写法�Q?/p> @import "main.css"; �q�样��可以在IE4中也隐藏CSS了，呵呵�Q�还节省�?个字节呢。想了解@import语法的详�l�说明，可以看这里�?a target="new">centricle’s css filter chart</a>�?/p> <h4>十六.针对IE的优�?/h4> 有些时候，你需要对IE��览器的bug定义一些特别的规则�Q�这里有太多的CSS技�?hacks)�Q�我只��用其中的两种�Ҏ��Q�不��微软在卛_��发布的IE7 beta版里是否更好的支持CSS�Q�这两种�Ҏ��都是最安全的�?/p> <ul> <li>1.注释的方�? <ul><li>(a)在IE中隐藏一个CSS定义�Q�你可以使用子选择�?child selector): html>body p { /* 定义内容 */ } </li><li>(b)下面�q�个写法只有IE��览器可以理�?对其他浏览器都隐�? * html p { /* declarations */ } </li><li>(c)�q�有些时候，你希望IE/Win有效而IE/Mac隐藏�Q�你可以使用"反斜�U?技巧： /* \*/ * html p { declarations } /* */ </li></ul></li> <li>2.条�g注释(conditional comments)的方�? 另外一�U�方法，我认为比CSS　Hacks更加�l�得赯��验��是采用微��Y的私有属性条件注�?conditional comments)。用�q�个�Ҏ��你可以给IE单独定义一些样式，而不影响��L��式表的定义。就象这��P�� </li> </ul> <h4>十七.调试技巧：层有多大�Q?/h4> 当调试CSS发生错误�Q�你��p��象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜�Ԍ��q�样��p��很明昄��到层占据多大�I�间。有些�h��用border�Q�一般情况也是可以的�Q�但问题是，有时候border 会增加元素的��寸�Q�border-top和boeder-bottom会破坏纵向margin的��|��所以��用background更加安全些�? 另外一个经常出问题的属性是outline。outline看�v来象boeder�Q�但不会影响元素的尺寸或者位�|�。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera�?/p> <h4>十八.CSS代码书写样式</h4> 在写CSS代码的时候，对于�~�进、断行、空��|��每个人有每个人的书写习惯。在�l�过不断实践后，我决定采用下面这��L��书写样式�Q?/p> selector1, selector2 { property:value; } 当��用联合定义时�Q�我通常��每个选择器单独写一行，�q�样方便在CSS文�g中找到它们。在最后一个选择器和大括号{之间加一个空��|��每个定义也单独写一行，分号直接在属性值后�Q�不要加�I�格�?/p> 我习惯在每个属性值后面都加分��P��虽然规则上允许最后一个属性值后面可以不写分��P��但是如果你要加新样式时容易忘记补上分可��生错误，所以还是都加比较好�?/p> 最后，关闭的大括号}单独写一行�?/p> �I�格和换行有助与阅读�?/p> <div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/kangpangpang/" target="_blank">��熊泡��</a> 2006-07-08 22:41 <a href="http://www.aygfsteel.com/kangpangpang/articles/57294.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> <article> <h1>text-overflow 全兼�?�Q��{载）</h1> ��熊泡�� — Sat, 08 Jul 2006 14:39:00 GMT text-overflow �q�个CSS属性用于设�|�或��索是否��用一个省略标�?...)标示对象内文本的溢出。比起在后台用程序截断文本再附上省略标记的做法，用CSS来处理文本溢出显然更温和(unobtrusive)一些。所以它已经被定义在 >" src="http://ajaxcn.org/theme/images/Icon-Extlink.png" border="0" /><a target="_blank">CSS 3</a> 规范中，但目前�ؓ止，�q�只�?IE6+ 提供了对其的支持(>" src="http://ajaxcn.org/theme/images/Icon-Extlink.png" border="0" /><a target="_blank">据说</a> Safari 1.3+ 已经支持)�? �q�好�Q�Opera �?Firefox 都有相应的hack�Ҏ��? Opera 提供了一�?-o-text-overflow:ellipsis 来模拟CSS3中的 text-overflow:ellipsis�Q�郭爽的Blog里有一�?span class="nobr">>" src="http://ajaxcn.org/theme/images/Icon-Extlink.png" border="0" /><a target="_blank">demo</a>�? 而Firefox�Q�有��A献了一个Firefox独有的XBL技术实�?-- >" src="http://ajaxcn.org/theme/images/Icon-Extlink.png" border="0" /><a target="_blank">Simulating text-overflow on Firefox with unobtrusive Javascript</a>�Q?博客的作者劝大家不要再花�_�֊��d��扑օ�他针对Firefox的解军_��法了�Q�因��Z��已经��p��了大量的旉��都无法找��C��个满意的�Ҏ��。从>" src="http://ajaxcn.org/theme/images/Icon-Extlink.png" border="0" /><a target="_blank">demo</a> 源码中可以看到如下的CSS属性定�?<div id="wmqeeuq" class="code"><pre>text-overflow:ellipsis; -moz-binding:url("moz-text-overflow.xml#XBLDocument");</pre></div>从代码中看出�Q�这个解��x��案还需要一�?xml 格式的XBL�l��g定义文�g以及配套的一�?js 文�g�Q�其实我想也可以通过直接�~�写js 来实现相同的效果�Q�不�q�不如标题中所说的那么 unobtrusive 而已�? 最后，一个兼容主��浏览器�?text-overflow CSS 定义可能如下�Q?<div id="wmqeeuq" class="code"><pre>.textOverflow { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-binding: url("moz-text-overflow.xml#XBLDocument");/*配套对应的xml和js文�g*/ }</pre></div> <div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/kangpangpang/" target="_blank">��熊泡��</a> 2006-07-08 22:39 <a href="http://www.aygfsteel.com/kangpangpang/articles/57292.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> <article> <h1>如何用CSS使图片自适应昄��宽度 (转蝲)</h1> ��熊泡�� — Sat, 08 Jul 2006 13:39:00 GMT <h3 class="heading-1"> <a title="链接到如何用CSS使图片自适应昄��宽度" > </a> </h3> 公司的项目中需要显�C�由用户提供URI链接的图片，可是预先无法��L��囄��的尺寸大��，如果囄��寸�q�大��会影响��面布局。最理想的解��x��案自然是自动生成�~�略图，涉及的后台工作较为复杂，用CSS�q�行控制是一个可以接受的捷径�? 如果�?width 属性强行设定显�C�尺�怼�乎太不智能。幸�?Firefox/Opera/IE 7 都提供了 max-width 属性支持。假定希望图片显�C�宽度不��过500像素�Q�CSS可能如下�Q? <div id="wmqeeuq" class="code"> <pre>fit-image { border : 0; max-width : 500px; }</pre> </div> 让我痛恨�?IE6 不支�?max-width 属性，但是利用 IE 独有�?>" src="http://ajaxcn.org/theme/images/Icon-Extlink.png" border="0" /><a target="_blank">expression</a> 属性可以迂回的解决�q�个问题�? <div id="wmqeeuq" class="code"> <pre>fit-image { border : 0; max-width : 500px; width: expression ( function(img){ img.onload=function(){ this.style.width = ''; this.style.width = (this.width > 500)?"500px":this.width+"px" }; return '120px' //加蝲时显�C�宽度�ؓ120px }(this) ); }</pre> </div> 利用 �?onload 事�g使图片加载完成后计算其尺寸大��，如果��过500像素��显�C�Zؓ500像素�Q�否则显�C�其默认宽度�? expression 不是�W�合WEB标准的做法，不到万不得以不徏议��用。但是不能不承认IE的很多扩展是不错的，IE不应该被轻视�Q?<a title="链接到start/2006-07-05/1" ></a> <div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/kangpangpang/" target="_blank">��熊泡��</a> 2006-07-08 21:39 <a href="http://www.aygfsteel.com/kangpangpang/articles/57290.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> <article> ��熊泡�� — Fri, 07 Jul 2006 07:18:00 GMT <style type="text/css"> #test { height: 200px; width: 200px; background-color:red; } </style> <script> window.onload = function(){ var div = document.getElementById("test"); var s = div.currentStyle || window.getComputedStyle(div,'') || document.defaultView.getComputedStyle(div, ''); var p = s.width || s.getPropertyValue("width"); alert(p); </script> <div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/kangpangpang/" target="_blank">��熊泡��</a> 2006-07-07 15:18 <a href="http://www.aygfsteel.com/kangpangpang/articles/57139.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> </main></body></html>

日韩av官网,激情五月色综合国产精品,av在线免费一区

始终在页面固定位�|�的�?�?