• css小贴士备忘录

     前言：在CSS的学习实践过程中，我经常遗忘一些貌似常用的代码，为了能够强化记忆特在此作归纳整理并将陆续增删，以备即时查阅。但愿今后能遇到问题及时解决，牢牢记住这些奇怪的字符们。

    一、关于段落文本强制对齐

    text-align:justify;  text-justify:inter-ideograph;

     若要文本两端对齐，必须先定义P的宽度，然后 { text-align:justify; text-justify :distribute-all-lines; }

    二、给按钮的不同状态加CSS

    Html代码  收藏代码
    1. <style type="text/css">   
    2. <!--   
    3. .over { ... }   
    4. .down { ... }   
    5. -->   
    6. </style>   
    7.   
    8.   
    9.   
    10. <input type="button"   
    11. onMouseOver="this.className='over';"   
    12. onMouseOut="this.className=' ';"   
    13. onMouseDown="this.className='down';"   
    14. onMouseUp="this.className='over';"   
    15. value="未被点击的按钮"   
    16. onClick="this.value='被点击的按钮'" name="Button">  

    三、在一个CSS文件中导入另一个CSS

      @import url(***.css);

    四、渐变背景色（使用这个一定得加width或height)

    FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#EEF5F8,endColorStr=#ffffff);

    使用这个时必须注意要对该DIV定义width或height值。

    Css代码  收藏代码
    1. .gradient {     
    2.     /* Firefox 3.6 */     
    3.     background-image: -moz-linear-gradient(top, #81a8cb, #4477a1);      
    4.     
    5.     /* Safari & Chrome */     
    6.     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb));      
    7.     
    8.      /* IE6 & IE7 */     
    9.     filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');     
    10.     
    11.     /* IE8 */     
    12.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')";     
    13. }    

     background:#f4faff9;
     background:linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;
     background:-moz-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;
     background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f1f9ff)) no-repeat;
     background:-o-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat

    五、用PNG图片在IE6中做出透明效果

    *html #id{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=images/*.png); background:none; }

    六、单行省略文本

    { overflow:hidden; text-overflow:ellipsis;  white-space:nowrap; }

    使用这个时必须注意要对需要省略文本的单行(如div或li)定义width值。

    七、设为首页和加入收藏的代码

    Html代码  收藏代码
    1. <a style="BEHAVIOR: url(#default#homepage)" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.hengdong8.cn');" href="javascript:" target="_self">设为首页</a>|<a href="contact.htm">联系我们</a>|<a href="javascript:window.external.AddFavorite('http://www.hengdong8.cn','衡东吧')" target="_self">加入收藏</a>  

     

    八、中文描边效果

    Java代码  收藏代码
    1. <style type="text/css">  
    2. <!--  
    3. body {  
    4.      font:12px "Verdana";  
    5.      filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100);  
    6.        
    7. }  
    8. .sizscolor {  
    9.      font-size:14px; font-weight:bold;  
    10.      position:absolute;  
    11.      padding:4px;  
    12.      filter:  
    13.          Dropshadow(offx=1,offy=0,color=white)  
    14.          Dropshadow(offx=0,offy=1,color=white)  
    15.          Dropshadow(offx=0,offy=-1,color=white)  
    16.          Dropshadow(offx=-1,offy=0,color=white);  
    17. }  
    18.   
    19. -->  
    20. </style>  
    21. </head>  
    22.   
    23. <body><div class="sizscolor">中文描边效果</div>  
    24. </body>  

    九、调整字间距

    { text-transform: uppercase; letter-spacing: 2px }

    十、margin加倍的问题

    设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px; /*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

    十一、把鼠标放在图片上会出现图片变亮的效果

    可以用图片替换的技巧，也可以用如下的滤镜，代码如下： 
    .pictures img { filter: alpha(opacity=45); } 
    .pictures a:hover img { filter: alpha(opacity=90); }

    十二、区分不同浏览器

    区别FF ，IE7 ，IE6 ：
    background:orange ;* background:green !important ;*background:blue ;
    注：IE都能识别*;标准浏览器(如FF)不能识别*；
    IE6能识别*，但不能识别 !important,
    IE7能识别*，也能识别!important;
    FF不能识别*，但能识别!important;
    IE6 IE7 FF
    * √ √ ×
    !important × √ √

    另外再补充一个，下划线”_ “,
    IE6支持下划线，IE7和firefox均不支持下划线。

    于是大家还可以这样来区分IE6 ，IE7 ，firefox 
    : background:orange ;* background:green ;_ background:blue ;

    注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

    十三、单行图片文字垂直居中对齐

    style *{vertical-align:middle;.....}

     

    十四、input加样式（1）

    input[type~=radio]   
      {   
      ...   
      }   
        
      含义：请将所有的input应用下面的style，但是其type属性是radio的input则例外。  

    十五、input加样式（2）

    <input type="submit" class="btn" onmouseover="this.className='btnOver'" onmouseout="this.className='btn'" onmousedown="this.className='btnDown'" value="确认" />

    <input id="" name="" type="text" class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'" />

    十六、给文字加阴影

    h1 { float: left; text-indent:0em; text-shadow:black 2px 2px 2px;  filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

    十七、用Javascript和CSS去掉链接中的虚线框和下划线

    在链接标签中添加onFocus="if(this.blur)this.blur()"这句代码即可屏蔽点击时四周出现的虚线框，如：
    <A href="http://www.cce.com.cn" onFocus="if(this.blur)this.blur()"& gt;中国电脑教育报</a>

    十八、 input type="image"

    十九、删除链接上的虚线框 

    a:active, a:focus { outline:none; } 

 

    二十、改变上传按钮的样式

    Html代码  收藏代码
    1. <META NAME="Generator" CONTENT="EditPlus">  
    2. <META NAME="Author" CONTENT="">  
    3. <META NAME="Keywords" CONTENT="">  
    4. <META NAME="Description" CONTENT="">  
    5. </HEAD>  
    6. <BODY>  
    7. <input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">  
    8. <input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">  
    9. <input type="file" id="path" style="display:none" onchange="upfile.value=this.value">  
    10. </BODY>  
    11. </HTML>  

     或

    Html代码  收藏代码
    1. <span id="uploadImg">  
    2. <input type="file" id="file" size="1"  style="100" class="upload">  
    3. <a href="#">上传</a></span>  
    Css代码  收藏代码
    1. #uploadImg{ font-size:12px; overflow:hidden; position:absolute;  left:190px; top:6px; }  
    2. #uploadImg a { color:#000; line-height:24px; text-align:center; display:block; 70px; margin:0; height:24px; border:1px solid #aecbd3; background:url(../images/btnbj.gif) repeat-x 0 0; }  
    3. #file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}  
    Html代码  收藏代码
    1. <style>  
    2. input{border:1px solid green;}  
    3. div {300px;position:relative;}  
    4. p {float:left}  
    5. .file {position:absolute;top:20px;right:300px;+top:0;+right:73px;0px;height:30px;  
    6. filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}  
    7. #txt {height:29px;margin:1px}  
    8. #ii {70px;height:27px;margin-top:2px;}  
    9. </style>  
    10. <div>  
    11. <form method="post" action="" enctype="multipart/form-data">  
    12. <p>  
    13. <input type="text" id="txt" name="txt" />  
    14. </p>  
    15. <p>  
    16. <input id="ii" type="image" src="http://bbs.blueidea.com/images/blue/logo.gif" value="请选择文件" />  
    17. </p>  
    18. <p>  
    19. <input type="file" onchange="txt.value=this.value" class="file" />  
    20. </p>  
    21. </form>  
    22. </div>  

    二十一、css bug

      IE6 IE7 IE8 Firefox Chrome Safari
    !important   Y   Y    
    _ Y          
    * Y Y        
    *+   Y        
    9 Y Y Y      
        Y      
    nth-of-type(1)         Y Y
  • 相关阅读:
    Git（五）
    python字符串驻留（intern）机制
    JavaMail接、收邮件
    easyui Tooltip 气泡信息提示
    ligerui ligerTip气泡提示信息
    DES加密
    解决在IE下label中IMG图片无法选中radio的几个方法
    浏览器获取ip地址
    小王子
    jquery 分页
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/4182329.html
Copyright © 2020-2023  润新知