ï»??xml version="1.0" encoding="utf-8" standalone="yes"?>亚洲一区在线免费,精品三级久久久,综合久久综合久久http://www.aygfsteel.com/balajinima/category/26967.htmlzh-cnTue, 25 Dec 2007 13:11:37 GMTTue, 25 Dec 2007 13:11:37 GMT6025条CSS制作¾|‘页¾~–写的提醒及ž®æŠ€å·§æ•´ç?/title><link>http://www.aygfsteel.com/balajinima/articles/170332.html</link><dc:creator>李云æ³?/dc:creator><author>李云æ³?/author><pubDate>Tue, 25 Dec 2007 07:38:00 GMT</pubDate><guid>http://www.aygfsteel.com/balajinima/articles/170332.html</guid><wfw:comment>http://www.aygfsteel.com/balajinima/comments/170332.html</wfw:comment><comments>http://www.aygfsteel.com/balajinima/articles/170332.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/balajinima/comments/commentRss/170332.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/balajinima/services/trackbacks/170332.html</trackback:ping><description><![CDATA[ <p>1、ul标签在Mozilla中默认是有padding值的åQŒè€Œåœ¨IE中只有margin有倹{€?/p> <p>2、同一个的class选择½W¦å¯ä»¥åœ¨ä¸€ä¸ªæ–‡æ¡£ä¸­é‡å¤å‡ºçްåQŒè€Œid选择½W¦å´åªèƒ½å‡ºçް䏀‹Æ¡ï¼›å¯¹ä¸€ä¸ªæ ‡½{‘֐Œæ—¶ä‹É用classå’Œid˜q›è¡ŒCSS定义åQŒå¦‚果定义有重复åQŒid选择½W¦åšçš„定义有效,是因为IDçš„æƒå€ÆD¦æ¯”CLASS大ã€?/p> <p>3、一个兼å®ÒŽ(gu¨©)€§è°ƒæ•?IEå’ŒMozilla)的笨办法åQ?br />初学可能会碰到这样一个情况:同样一个标½{„¡š„属性在IE讄¡½®æˆA昄¡¤ºæ˜¯æ­£å¸¸çš„åQŒè€Œåœ¨Mozilla里必™å»è¦è®¾æˆB才能正常昄¡¤ºåQŒæˆ–者两个倒过来ã€?br />临时解决æ–ÒŽ(gu¨©)³•åQ?font color="#0000ff">选择½W¦{属性名:B !important;属性名:A}</font></p> <p>4、如果一¾l„要嵌套的标½{¾ä¹‹é—´éœ€è¦äº›é—´è·çš„话åQŒé‚£ž®Þq•™¾l™ä½äºŽé‡Œé¢çš„æ ‡ç­¾çš„margin属性吧åQŒè€Œä¸è¦åŽ»å®šä¹‰ä½äºŽå¤–é¢çš„æ ‡½{„¡š„padding</p> <p>5、li标签前面的图标推荐ä‹Éç”?font color="#0000ff">background-image</font>åQŒè€Œä¸æ˜¯list-style-imageã€?/p> <p>6、IE分不清ç‘ô承关¾pÕd’Œçˆ¶å­å…³ç³»çš„差别,全部都是¾l§æ‰¿å…³ç³»ã€?/p> <p>7、在¾l™ä½ çš„æ ‡½{„¡–¯ç‹‚加选择½W¦çš„æ—¶å€™ï¼Œåˆ«å¿˜äº†åœ¨CSS里给选择½W¦åŠ ä¸Šæ³¨é‡Šã€?½{‰ä½ ä»¥åŽä¿®æ”¹ä½ çš„CSS的时候就知道ä¸ÞZ»€ä¹ˆè¦˜q™ä¹ˆåšäº†ã€?/p> <p>8、如果你¾l™ä¸€ä¸ªæ ‡½{¾è®¾¾|®äº†ä¸€ä¸ªæ·±è‰²è°ƒçš„背景图片和亮色调的文字效果。徏议这个时候给你的标签再设¾|®ä¸€ä¸ªæ·±è‰²è°ƒçš„背景颜艌Ӏ?/p> <p> </p> <p>9、定义链接的四种状态要注意先后™åºåº:<font color="#0000ff"> Link Visited Hover Active</font></p> <p>10、与内容无关的图片请使用background</p> <p>11、定义颜色可以羃å†?font color="#0000ff">#8899FF=#89F</font></p> <p>12、table在某些方面比其它标签表现的要好的多。请在需要列寚w½çš„地方用它ã€?/p> <p>13ã€?lt;script>没有language˜q™ä¸ªå±žæ€§ï¼Œåº”该写成˜q™æ ·:<br /><font color="#0000ff"><script type=”text/javascriptâ€?gt;</font></p> <p>14、标题是标题åQŒæ ‡é¢˜çš„æ–‡å­—是标题的文字。有时候标题不一定需要显½Cºæ–‡å­—,所ä»?<h1>标题内容</h1> æ”ÒŽ(gu¨©)ˆ <h1><span>标题内容</span></h1></p> <p>15、完¾ŸŽçš„单象素外框线表格åQˆåœ¨IE5、IE6、IE7及FF1.0.4以上中均可通过‹¹‹è¯•åQ?br /><font color="#0000ff">table{border-collapse:collapse;}<br />td{border:#000 solid 1px;}</font></p> <p>16、margin取负值可以在标签使用¾lå¯¹å®šä½çš„æ—¶å€™è“v到相对定位的作用åQŒåœ¨™åµé¢å±…中昄¡¤ºæ—Óž¼Œä½¿ç”¨¾lå¯¹å®šä½çš„层不适合使用left:XXpx˜q™ä¸ªå±žæ€§ã€‚把˜q™ä¸ªå±‚放åˆîC¸€ä¸ªè¦ç›¸å¯¹å®šä½çš„æ ‡½{¾æ—åQŒç„¶åŽä‹É用margin的负值是个好æ–ÒŽ(gu¨©)³•ã€?/p> <p>17、绝对定位时使用margin值定位可以达到相对于本èín所在位¾|®çš„定,˜q™ä¸ŽtopåQŒleft½{‰å±žæ€§ç›¸å¯¹ä¸Ž½H—口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在ã€?/p> <p>18、如果文字过é•?则将˜q‡é•¿çš„部分变成省略号昄¡¤ºåQšIE5,FF无效åQŒä½†å¯ä»¥éšè—åQŒIE6有效<br /><font color="#0000ff"><DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsisâ€?gt;<br /><NOBR>ž®±æ˜¯æ¯”如有一行文字,很长åQŒè¡¨æ ¼å†…一行显½CÞZ¸ä¸?</NOBR></font></p> <p>19、在IEä¸­å¯èƒ½ç”±äºŽæ³¨é‡Šå¸¦æ¥çš„æ–‡å­—é‡å¤é—®é¢˜æ—¶å¯ä»¥æŠŠæ³¨é‡Šæ”¹äØ“åQ?br /><font color="#0000ff"><!–[if !IE]>Put your commentary in hereâ€?lt;![endif]â€?gt;</font></p> <p>20、如何用CSS调用外部字体<br />语法åQ?br /><font color="#0000ff">@font-face{font-family:name;src:url(url);sRules}</font>取å€û|¼š<br />nameåQšå­—体名¿U°ã€‚ä“Q何可能的 font-family 属性的å€?br />url(url)åQšä‹É用绝å¯ÒŽ(gu¨©)ˆ–相对 url 地址指定OpenType字体文äšg<br />sRulesåQšæ ·å¼è¡¨å®šä¹‰</p> <p>21、如何让一个表单中的文本框中的文字垂直居中åQ?br />如果用行高与高度的组在FF中是没有效果的,办法ž®±æ˜¯å®šä¹‰ä¸Šä¸‹è¡¥ç™½ž®±å¯ä»¥å®žçŽ°æƒ³æƒ³çš„æ•ˆæžœäº†ã€?/p> <p>22、定义A标签要注意的ž®é—®é¢˜ï¼š<br />当我们定义a{color:red;}æ—Óž¼Œå®ƒä»£è¡¨äº†A的四¿UçŠ¶æ€çš„æ ·å¼åQŒå¦‚果此时要定义一个鼠标放上的状态只要定义a:hoverž®±å¯ä»¥äº†åQŒå…¶å®ƒä¸‰¿UçŠ¶æ€å°±æ˜¯A中所定义的样式ã€?br />只定义了一个a:linkæ—Óž¼Œä¸€å®šè¦è®°å¾—把其它三¿UçŠ¶æ€å®šä¹‰å‡ºæ¥ï¼</p> <p>23ã€åÆˆä¸æ˜¯æ‰€æœ‰æ ·å¼éƒ½è¦ç®€å†™ï¼š<br />当样式表前定义了如p{padding:1px 2px 3px 4px}æ—Óž¼Œåœ¨åŽ¾l­å·¥½E‹ä¸­åˆå¢žåŠ äº†ä¸€ä¸ªæ ·å¼ä¸Šè¡¥ç™½5pxåQŒä¸‹è¡¥ç™½6pxã€‚æˆ‘ä»¬åÆˆä¸ä¸€å®šè¦å†™æˆp.style1{padding:5px 6px 3px 4px}。可以写æˆ?font color="#0000ff">p.style1{padding-top:5px;padding-right:6px;},</font>你可能会感觉˜q™æ ·å†™è¿˜ä¸å¦‚原来那样好,但你æƒÏx²¡æƒŒ™¿‡åQŒä½ çš„é‚£¿Uå†™æ³•重复定义了样式åQŒå¦å¤–你可以不必åŽÀL‰¾åŽŸæ¥çš„ä¸‹è¡¥ç™½ä¸Žå·¦è¡¥ç™½çš„å€¼æ˜¯å¤šå°‘åQå¦‚果以后前一个样式P变了话,你定义的p.style1的样式也要变ã€?/p> <p>24、网站越大,CSS样式­‘Šå¤šåQŒå¼€å§‹åšå‰ï¼Œè¯·åšå¥½å……分的准备和策划,包括命名规则。页面区块划分,内部样式分类½{‰ã€?/p> <p>25、几个常用到的CSS样式åQ?br />1åQ‰ä¸­æ–‡å­—两端寚w½åQ?font color="#0000ff">text-align:justify;text-justify:inter-ideograph;</font></p> <p>2åQ‰å›ºå®šå®½åº¦æ±‰å­—截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行ã€?åQˆIE5以上åQ‰FF不能åQŒå®ƒåªéšè—ã€?/p> <p>3åQ‰å›ºå®šå®½åº¦æ±‰å­—(词)折行åQ?font color="#0000ff">table-layout:fixed; word-break:break-all;</font>åQˆIE5以上åQ‰FF不能ã€?/p> <p>4åQ?lt;acronym title=”输入要提示的文字â€?style=”cursor:help;â€?gt;文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到åQŒè€Œå›½å†…çš„ž®‘又ž®‘ã€?/p> <p>5åQ‰å›¾ç‰‡è®¾ä¸ºåŠé€æ˜ŽåQ?font color="#0000ff">.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}</font>在IE6及IE5‹¹‹è¯•通过åQŒFF未通过åQŒè¿™æ˜¯å› ä¸ø™¿™ä¸ªæ ·å¼æ˜¯IE¿Uæœ‰çš„东西;</p> <p>6åQ‰FLASH透明åQšé€‰ä¸­swf,打开原代码窗口,åœ?lt;/object>前输å…?font color="#0000ff"><param name=”wmodeâ€?value=”transparentâ€?gt;</font> 以上是针对IE的代码ã€?br />针对FIREFOX ¾l?lt;embed> 标签也增加类似参æ•?font color="#0000ff">wmode=”transparentâ€?/font></p> <p>7åQ‰åœ¨åšç½‘™å‰|—¶å¸¸ç”¨åˆ°æŠŠé¼ æ ‡æ”‘Öœ¨å›„¡‰‡ä¸Šä¼šå‡ºçް囄¡‰‡å˜äº®çš„æ•ˆæžœï¼Œå¯ä»¥ç”¨å›¾ç‰‡æ›¿æ¢çš„æŠ€å·§ï¼Œä¹Ÿå¯ä»¥ç”¨å¦‚下的æ×o镜:<br /><font color="#0000ff">.pictures img {<br />filter: alpha(opacity=45); }<br />.pictures a:hover img {<br />filter: alpha(opacity=90); }</font></p> <img src ="http://www.aygfsteel.com/balajinima/aggbug/170332.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/balajinima/" target="_blank">李云æ³?/a> 2007-12-25 15:38 <a href="http://www.aygfsteel.com/balajinima/articles/170332.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>ž®†å¤šé€‰æ¡†é€‰ä¸­æ—¶æ‰“å‹„¡š„颜色http://www.aygfsteel.com/balajinima/articles/167563.html李云æ³?/dc:creator>李云æ³?/author>Thu, 13 Dec 2007 09:35:00 GMThttp://www.aygfsteel.com/balajinima/articles/167563.htmlhttp://www.aygfsteel.com/balajinima/comments/167563.htmlhttp://www.aygfsteel.com/balajinima/articles/167563.html#Feedback0http://www.aygfsteel.com/balajinima/comments/commentRss/167563.htmlhttp://www.aygfsteel.com/balajinima/services/trackbacks/167563.html<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="generator" content="editplus">
<meta name="author" content="dron">
<meta name="keywords" content="dron">
<meta name="description" content="dron">
<style type="text/css">
body
{
    font-size:12px;
}
.checkbox
{
    width:12px;
    height:12px;
    background-image:url(http://ucren.com/files/WebTex/setCheckbox/images/checkbox.gif);
    background-color:#fff;
    line-height:1px;
    font-size:1px;
}
</style>
</head>
<body>

<div class="checkbox"></div>
 
<div class="checkbox"></div>
 
<div class="checkbox" checked=true></div>
 
<div class="checkbox"></div>
 
<div class="checkbox" checked=true></div>
 

<div>ž®†å¤šé€‰æ¡†é€‰ä¸­æ—¶æ‰“å‹„¡š„é¢œè‰²è®¾äØ“åQ?lt;input type="text" size="7" maxlength="7" value="#0000ff" id="colorValue"><input type="button" value="试试" onclick="setActColor(document.getElementById('colorValue').value)">åQˆæ³¨åQšé¢œè‰²å€¼å¯ä»¥è‡ªè¡Œæ›´æ”¹ï¼‰</div>

<script type="text/javascript">
/*******************************************\
  自定�checkbox 打勾颜色的例�
  This JavaScript was writen by Dron.
  @2003-2008 Ucren.com All rights reserved.
\*******************************************/
var actColor = "#f00";
var divs = document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
{
    if(divs[i].className=="checkbox")
    {
        divs[i].onclick = function()
        {
            var tempvalue = this.getAttribute("checked") ? '' : true;
            this.setAttribute("checked",tempvalue);
            return setcheck();
        }
    }
}
function setcheck()
{
    var divs = document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++)
    {
        if(divs[i].className=="checkbox"&&divs[i].getAttribute("checked"))
        {
            divs[i].style.backgroundColor = actColor;
        }
        if(divs[i].className=="checkbox"&&(!divs[i].getAttribute("checked")))
        {
            divs[i].style.backgroundColor = "#fff";
        }
    }
}
function setActColor(str)
{
    var body = document.body;
    try
    {
        body.style.color = str;
        body.style.color = "#000";
    }
    catch(e)
    {
        window.alert("填定了错误的颜色倹{€?);
        return;
    }
    actColor = str;
    return setcheck();
}
setcheck();
</script>
</body>
</html>



]]>
漂亮的提½CÞZ¿¡æ¯ï¼ˆå¸¦ç®­å¤ß_¼‰http://www.aygfsteel.com/balajinima/articles/167234.html李云æ³?/dc:creator>李云æ³?/author>Wed, 12 Dec 2007 06:53:00 GMThttp://www.aygfsteel.com/balajinima/articles/167234.htmlhttp://www.aygfsteel.com/balajinima/comments/167234.htmlhttp://www.aygfsteel.com/balajinima/articles/167234.html#Feedback0http://www.aygfsteel.com/balajinima/comments/commentRss/167234.htmlhttp://www.aygfsteel.com/balajinima/services/trackbacks/167234.html.tableBorder7{width:800;solid; background-color: #000000;}
TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
th.th1{background-color: #333333;}
td.TableBody7{background-color: #B1EA45;}
</style>
<script language="JavaScript">
//more javascript from http://www.51it.org
<!--
var pltsPop=null;
var pltsoffsetX = 10;   // 弹出½H—口位于鼠标左侧或者右侧的距离åQ?-12 合é€?br />var pltsoffsetY = 15;  // 弹出½H—口位于鼠标下方的距¼›»ï¼›3-12 合é€?br />var pltsPopbg="#FFFFEE"; //背景è‰?br />var pltsPopfg="#111111"; //前景è‰?br />var pltsTitle="";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
function pltsinits()
{
    document.onmouseover   = plts;
    document.onmousemove = moveToMouseLoc;
}
function plts()
{  var o=event.srcElement;
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
    if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
    pltsPop=o.dypop;
    if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
    {
       pltsTipLayer.style.left=-1000;
       pltsTipLayer.style.display='';
       var Msg=pltsPop.replace(/\n/g,"<br>");
       Msg=Msg.replace(/\0x13/g,"<br>");
       var re=/\{(.[^\{]*)\}/ig;
       if(!re.test(Msg))pltsTitle="<font color=#ffffff>½Ž€ä»?lt;/font>";
       else{
         re=/\{(.[^\{]*)\}(.*)/ig;
           pltsTitle=Msg.replace(re,"$1")+" ";
         re=/\{(.[^\{]*)\}/ig;
         Msg=Msg.replace(re,"");
         Msg=Msg.replace("<br>","");}
         //var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
              var content =
             '<table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table class=tableBorder7 cellspacing="1" cellpadding="0" style="width:100%">'+
             '<tr id=pltsPoptop ><th height=18 valign=bottom class=th1 ><b><p id=topleft align=left><font color=#ffffff>�lt;/font>'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>�lt;/font></b></th></tr>'+
             '<tr><td "+attr+" class=tablebody7 style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%">'+Msg+'</td></tr>'+
             '<tr id=pltsPopbot style="display:none"><th height=18 valign=bottom class=th1><b><p id=botleft align=left><font color=#ffffff>�lt;/font>'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>�lt;/font></b></th></tr>'+
             '</table></td></tr></table>';
              pltsTipLayer.innerHTML=content;
              toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
              moveToMouseLoc();
              return true;
       }
    else
    {
           pltsTipLayer.innerHTML='';
             pltsTipLayer.style.display='none';
              return true;
    }
}
function moveToMouseLoc()
{
       if(pltsTipLayer.innerHTML=='')return true;
       var MouseX=event.x;
       var MouseY=event.y;
       //window.status=event.y;
       var popHeight=pltsTipLayer.clientHeight;
       var popWidth=pltsTipLayer.clientWidth;
       if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
       {
                popTopAdjust=-popHeight-pltsoffsetY*1.5;
                pltsPoptop.style.display="none";
                pltsPopbot.style.display="";
       }
        else
       {
                 popTopAdjust=0;
                pltsPoptop.style.display="";
                pltsPopbot.style.display="none";
       }
       if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
       {
              popLeftAdjust=-popWidth-pltsoffsetX*2;
              topleft.style.display="none";
              botleft.style.display="none";
              topright.style.display="";
              botright.style.display="";
       }
       else
       {
              popLeftAdjust=0;
              topleft.style.display="";
              botleft.style.display="";
              topright.style.display="none";
              botright.style.display="none";
       }
       pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
       pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
         return true;
}
pltsinits();
//-->
</script>
</HEAD>
<BODY>
<div title="醉别西楼醒不讎ͼŒæ˜¥æ¢¦¿U‹äº‘åQŒèšæ•£çœŸå®ÒŽ(gu¨©)˜“ã€?lt;br>斜月半窗˜q˜å°‘睡。画屏闲展吴å±Þq¿ ã€?lt;br>衣上酒痕诗里字,点点行行åQŒæ€ÀL˜¯å‡„凉意ã€?lt;br>¾U¢çƒ›è‡ªæ€œæ— å¥½è®¡åQŒå¤œå¯’空替äh垂泪ã€?>蝶恋èŠ?lt;/div>
</BODY>
</HTML>

]]>
Ö÷Õ¾Ö©Öë³ØÄ£°å£º ׿×ÊÏØ| Çí½áÏØ| »ÆÉ½ÊÐ| Ë®¸»ÏØ| ÐóÇÏØ| °¢À­ÉÆÃË| ÕòÐÛÏØ| ÓͼâÍúÇø| ÜþÑôÊÐ| ÁÙÇåÊÐ| ÇúËÉÏØ| ÁÙä¬ÏØ| ¿â³µÏØ| ½úÄþÏØ| °àÂêÏØ| ÒËÖÝÊÐ| ÄϽ­ÏØ| èÈÑôÏØ| °×ɽÊÐ| Î÷ÃË| ¾ÅÁúÆÂÇø| äųØÏØ| Ì«±£ÊÐ| ½Ò¶«ÏØ| Ë绯ÊÐ| ÍͲýÏØ| µ¦³ÇÏØ| ´ó¸ÛÇø| Ð˹úÏØ| ÁÙÌ¶ÏØ| Ïå·ÚÏØ| ºéºþÊÐ| º³ÇÊÐ| ·öËçÏØ| ½úÖÐÊÐ| ÄÏ»ãÇø| ÆÖ½­ÏØ| ·½³ÇÏØ| ·Ê³ÇÊÐ| ¹ð¶«ÏØ| Û²³ÇÏØ|