zoukankan      html  css  js  c++  java
  • 经典css

    z-index:CSS元素层叠级别
    值越大,所在的DIV就越在前

    图片居中:background-position:center center;

    设置table的细边框 CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;},大功告成!而且Word也能认出这种设置。

    css透明度在各种浏览器下兼容实现 

    .transparent{

    filter:alpha(opacity=60);  /*支持 IE 浏览器*/

    -moz-opacity:0.60; /*支持 FireFox 浏览器*/

    opacity:0.60;  /*支持 Chrome, Opera, Safari 等浏览器*/

    CSS DIV高度在火狐自适应问题

    text-align:center;
    color:#666;
    500px;
    overflow: hidden; /*这个就是导致firefox不自动适应高度的东西 千万别缺*/
    border:1px solid #666;
    padding:6px;  

    去掉ul li缩进的简单方法-兼容ie,firefox,chrome

     ul{margin:0; padding-left:0}

    
    

    CSS Hack

    var div = document.createElement('div'); div.innerHTML = 'CSS Hack'; div.style.cssText = 'color: blue; -color: red;';  document.body.appendChild(div); 

    
    
    ms-border-radius - Add border-radius support to IE6, IE7 and IE8  圆角
    
    
    svn:   http://ms-border-radius.googlecode.com/svn/trunk


    输入框获得焦点后,它的边框会有蓝色发光的效果
    input 
    {
    transition
    : all 0.30s ease-in-out;
    -webkit-transition
    : all 0.30s ease-in-out;
    -moz-transition
    : all 0.30s ease-in-out;
    border
    : #35a5e5 1px solid;
    border-radius
    : 4px;
    outline
    : none;
    }
    input:focus 
    {
    box-shadow
    : 0 0 5px rgba(81, 203, 238, 1);
    -webkit-box-shadow
    : 0 0 5px rgba(81, 203, 238, 1);
    -moz-box-shadow
    : 0 0 5px rgba(81, 203, 238, 1);
    }

    解决 ie6-8 无间距的 出现 间距方法:

    #margin-left:-0px;
    _margin-left:-0px;
    查找:
    <a \href="[^"]*"
    替换为:
    <a href="#" 

     


    19楼前端reset.css
    /* 不支持html5 浏览器的块级标签 */  
    article,aside,details,figcaption,figure,footer,header,hgroup,nav,section 
    {display:block;}   
      
    /* 清除margin padding */  
    html,body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,lable,textarea,p,blockquote,th,td 
    {margin:0;padding:0;}   
      
    /* 在IE6/7中正确显示字体大小、比IE6/7高级浏览器加竖直滚动条防止某些页面没有滚动条时左右闪动、webkit内核及WP7下IE浏览器最小字体 */  
    html 
    {font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}   
      
    /* 默认字体大小行高、颜色 */  
    body, button, input, select, textarea 
    {font:400 12px/1.5 Simsun,Arial;color:#333;}   
      
    /* 粗体 */  
    h1,h2,h3,h4,h5,h6,b,strong 
    {font-weight:700;font-size:100%;}   
      
    /* 列表样式 */  
    li 
    {list-style:none;}   
      
    /* table边距重合、清除单元格间距 */  
    table 
    {border-spacing:0;border-collapse:collapse;}   
      
    /* th小写,居左 */  
    th 
    {text-align:left;font-weight:400;}   
      
    /* img、button清除背景、边框、垂直居中 */  
    img, button 
    {background:none;border:0 none;vertical-align:middle;}   
      
    /* 不需要斜体的标签 */  
    address,cite,dfn,em,var 
    {font-style:normal;}   
      
    /* 默认链接下划线、颜色 */  
    a,a:visited 
    {text-decoration:none;color:#333;}   
    a:hover 
    {text-decoration:underline;color:#0657B2;}   
      
    /*=E reset */  
      
    /*=S lay */  
    .layout 
    {margin:0 auto;width:980px;}   
    .iblock 
    {display:inline-block;*display:inline;zoom:1;vertical-align:middle;}   
    .clearfix 
    {*zoom:1;}   
    .clearfix:after 
    {content:".";display:block;clear:both;height:0;visibility:hidden;}


    taobao reset.css
    /** 清除内外边距 **/
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, 
    /* structural elements 结构元素 */
    dl, dt, dd, ul, ol, li, 
    /* list elements 列表元素 */
    pre, 
    /* text formatting elements 文本格式元素 */
    form, fieldset, legend, button, input, textarea, 
    /* form elements 表单元素 */
    th, td 
    /* table elements 表格元素 */ {
        margin
    : 0;
        padding
    : 0;
    }

    /** 设置默认字体 **/
    body,
    button, input, select, textarea 
    /* for ie */ {
        font
    : 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 
    { font-size: 100%; }
    address, cite, dfn, em, var 
    { font-style: normal; } /* 将斜体扶正 */
    code, kbd, pre, samp 
    { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
    small 
    { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */

    /** 重置列表元素 **/
    ul, ol 
    { list-style: none; }

    /** 重置文本格式元素 **/
    { text-decoration: none; }
    a:hover 
    { text-decoration: underline; }

    sup 
    { vertical-align: text-top; } /* 重置,减少对行高的影响 */
    sub 
    { vertical-align: text-bottom; }

    /** 重置表单元素 **/
    legend 
    { color: #000; } /* for ie6 */
    fieldset, img 
    { border: 0; } /* img 搭车:让链接里的 img 无边框 */
    button, input, select, textarea 
    { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
    /* 注:optgroup 无法扶正 */

    /** 重置表格元素 **/
    table 
    { border-collapse: collapse; border-spacing: 0; }

    /* 重置 HTML5 元素 */
    article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
    summary, time, mark, audio, video 
    {
        display
    : block;
        margin
    : 0;
        padding
    : 0;
    }
    mark 
    { background: #ff0; }

    /* 居中 */
    #header, #content, #footer 
    {
        margin-left
    : auto;
        margin-right
    : auto;
    }

    /** 布局基础样式 **/
    .col-main 
    {
        float
    : left;
        width
    : 100%;
        
    /* bug fix: 主栏没有内容时,在 Firefox 和 Chrome 等浏览器下,布局不对 */
        min-height
    : 1px;
    }
    .col-sub, .col-extra 
    {
        float
    : left;
        
    /*position: relative;  按需设置,仅在需要时添加 */
    }

    /** 清除浮动 **/
    .layout:after, .main-wrap:after, .col-sub:after, .col-extra:after 
    {
            content
    : '\20';
            display
    : block;
            height
    : 0;
            clear
    : both;
    }
    .layout, .main-wrap, .col-sub, .col-extra 
    {
        *zoom
    : 1;
    }

    /* 隐藏 */
    .hidden 
    { display: none; }
    .invisible 
    { visibility: hidden; }

    /* 清除浮动 */
    .clear:after 
    { content: '\20'; display: block; height: 0; clear: both; }
    .clear 
    { *zoom: 1; }

    /* inline block */
    .inline-block 
    { display: inline-block; *display: inline; 
  • 相关阅读:
    单向绑定和双向绑定
    Vue
    事件处理
    网关
    同时加载多个配置集
    Nacos Group方案
    DataID方案
    maven_provided说明
    C#大数据导入-SqlBulkCopy
    https://webyog.com/product/monyog/
  • 原文地址:https://www.cnblogs.com/zengxiangzhan/p/1611483.html
Copyright © 2011-2022 走看看