zoukankan      html  css  js  c++  java
  • HTML/CSS代码片段

    内容简介:本文收集了我常用的CSS代码片段!

    *reset

    @charset "utf-8";
    
    /* reset */
    body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, ol, ul, textarea, button, input, select {
        margin: 0;
    }
    ol, ul, dd, td, th, textarea, button, input, select {
        padding: 0;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: 400;
    }
    body {
        font: 12px/1.5 "Microsoft Yahei", SimSun, arial, sans-serif;
    }
    ol, ul {
        list-style: none;
    }
    a, button, input, textarea, select {
        outline: 0;
        color: inherit;
        font: inherit;
    }
    button::-moz-focus-inner, input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    button {
        overflow: visible;
    }
    button, input[type="button"], input[type="reset"], input[type="submit"] {
        -webkit-appearance: button;
        cursor: pointer;
    }
    input::-moz-placeholder, textarea::-moz-placeholder {
        color: #ccc;
    }
    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
        color: #ccc;
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        color: #ccc;
    }
    input::-ms-clear {
        display: none;
    }
    a {
        text-decoration: none;
    }
    img {
        vertical-align: top;
        border: 0 none;
    }
    textarea {
        resize: none;
        overflow: auto;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    th {
        text-align: center;
    }
    /* clearfix */
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
    View Code

    *select兼容

    select { height:22px; line-height:18px; padding:2px 0; }
    View Code

    *input兼容

    .ipt {
        border: 1px solid #469021;
        background: #64A246;
        color: #fff;
        font:bold 11px arial,sans-serif;
        padding: 0.25em 0.5em;
        text-transform: uppercase;
        margin: 0;
        overflow: visible;
        height: 27px;
        line-height: 19px;
        _line-height: 16px;
        width: 80px;
    }
    View Code

    *css圆角

    .radius {
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        border-radius: 30px;
    }
    View Code

    *水平翻转

    .flipx {
        -moz-transform:scaleX(-1);
        -webkit-transform:scaleX(-1);
        -o-transform:scaleX(-1);
        transform:scaleX(-1);
        filter:FlipH();
    }
    View Code

    *垂直翻转

    .flipy {
        -moz-transform:scaleY(-1);
        -webkit-transform:scaleY(-1);
        -o-transform:scaleY(-1);
        transform:scaleY(-1);
        filter:FlipV();
    }
    View Code

    *css旋转

    .rotate90 {
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    View Code

    *css盒阴影

    .box_shadow {
        -moz-box-shadow: 3px 3px 4px #000; 
        -webkit-box-shadow: 3px 3px 4px #000; 
        box-shadow: 3px 3px 4px #000;
        filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#000'); 
        -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#000')";
    }
    View Code

    *clearfix清浮动

    .clearfix:before, .clearfix:after { content:""; display:table; }
    .clearfix:after{ clear:both; }
    .clearfix{ *zoom:1;}
    View Code

    *锚点

    <a name="link">不能为空</a>
    <a href="#link">锚点链接</a>
    View Code

    *纯CSS三角形

    .triangle {
         0;
        height: 0;
        font-size: 0;
        line-height: 0;
        border- 50px;
        border-style: solid;
        border-top-color: #fff;
        border-right-color: #fff;
        border-bottom-color: red;
        border-left-color: #fff;
    }
    View Code

    *opacity透明

    /*opacity*/
    .opacity {
        filter: alpha(opacity=50);
        -khtml-opacity: 0.5;
        -moz-opacity: 0.5;
        opacity: 0.5;
    }
    View Code

    *选择文本颜色

    /* 自定义文本选择颜色 */
    ::selection { background: #e2eae2; }
    ::-moz-selection { background: #e2eae2; }
    ::-webkit-selection { background: #e2eae2; }
    View Code

    *全屏背景

    /* 全屏背景 */
    .cover {
        background: url('bg.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    View Code

    *强制滚动条

    html { height: 101% }
    View Code

    *渐变gradient

    /* 渐变 */
    .gradient {
        background: #629721;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
        background-image: -webkit-linear-gradient(top, #83b842, #629721);
        background-image: -moz-linear-gradient(top, #83b842, #629721);
        background-image: -ms-linear-gradient(top, #83b842, #629721);
        background-image: -o-linear-gradient(top, #83b842, #629721);
        background-image: linear-gradient(top, #83b842, #629721);
    }
    View Code

    *font-face

    /*font-face*/
    @font-face {
        font-family: 'MyWebFont';
        src: url('webfont.eot'); /* IE9 Compat Modes */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff') format('woff'), /* Modern Browsers */
        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    body {
        font-family: 'MyWebFont', Arial, sans-serif;
    }
    View Code

    *png透明

    /* png透明 */
    .png {
        width:200px;
        height:100px;
        background: url(this.png) no-repeat;
        _background:none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='this.png',sizingMethod='crop');/* 路径相对于html */
    }
    View Code

    *min-height

    /* 最小高度 */
    .minheight {
        min-height: 550px;
        height: auto !important;
        height: 550px;
    }
    View Code

    *移动端reset 

    body,nav,dl,dt,dd,p,h1,h2,h3,h4,ul,ol,li,input,button,textarea,footer{margin:0;padding:0}
    header,nav,section,article,footer,figure,figcaption { display: block; }
    html,body{width:100%;height:100%;}
    li{list-style:none;}
    h1,h2,h3,h4,h5{font-size:100%}
    img,object,video,embed { max-width: 100%;}
    img {border:none; vertical-align: middle; }
    button,input,select,textarea{font-size:100%; vertical-align:middle; outline:none;}
    a { text-decoration: none; }
    body{min-width:320px;font:normal 62.5%/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;color:#000;background:#f1f1f1;overflow-x:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-moz-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
    /* common */
    .g-tensile { width: 100%; height: 100%; }
    .g-auto { margin-left: auto; margin-right: auto; }
    View Code
  • 相关阅读:
    二进制位运算
    Leetcode 373. Find K Pairs with Smallest Sums
    priority_queue的用法
    Leetcode 110. Balanced Binary Tree
    Leetcode 104. Maximum Depth of Binary Tree
    Leetcode 111. Minimum Depth of Binary Tree
    Leetcode 64. Minimum Path Sum
    Leetcode 63. Unique Paths II
    经典的递归练习
    案例:java中的基本排序
  • 原文地址:https://www.cnblogs.com/jununx/p/3619061.html
Copyright © 2011-2022 走看看