CSS

  1. 作者QQ:67065435 QQ群:821635552

  2. 本站内容全部为作者原创,转载请注明出处!

常用技巧

  1. 使用input text代替input file

    <form method="post" enctype="multipart/form-data">
        <input id="input_file" type="file" name="file" style="display:none;" onchange="document.getElementById('input_text').value = document.getElementById('input_file').value;">
        <input id="input_text" type="text" placeholder="Select file"         onclick ="document.getElementById('input_file').click();"><br>
        <input type="submit" value="提交">
    </form>
    
  2. 规划界面结构时,所有元素都在块级元素内排版

    <!--正确示范-->
    <div>
        <img src="xxx">
    </div>
    <div>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
    </div>
    <!--错误示范-->
    <img src="xxx">
    <div>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
    </div>
    
  3. 设置元素的不透明度

    <style>
    image {
        opacity:0.5;
    }
    </style>
    <img src="xxx">
    
  4. 隐藏滚动条(滚动功能正常)

    <style>
    #box {
        overflow:scroll;
        /*overflow-x:scroll;*/
        /*overflow-y:scroll;*/
    }
    </style>
    <div id="box" style="width:100%;height:100%;">
        <div style="width:100%;height:150%;">
        </div>
    </div>
    
  5. DIV自动撑开

    <!--通过在底部加一个元素清除浮动-->
    <div style="width:100%;min-height:800px;">
        <div>11111111111111111111</div>
        <div>11111111111111111111</div>
        <div>11111111111111111111</div>
        <div>11111111111111111111</div>
        <div>11111111111111111111</div>
        <div>11111111111111111111</div>
        <div style="clear:both;"></div>
    </div>
    
  6. 样式发生改变时用0.5s来逐渐完成这个变化

    <style>
    #test {
        background-color: #fff;
        transition: background-color 0.5s;
    }
    #test:hover {
        background-color: #000;
        transition: background-color 0.5s;
    }
    </style>
    <div id="test"></div>
    
  7. 实现3D效果

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: rgba(0, 0, 0, 1);
        }
        #test {
            width: 200px;
            height: 200px;
            margin: 150px auto;
            background-color: rgba(255, 255, 255, 1);
            transform-style: preserve-3d;
            transform: perspective(800px) rotateX(45deg) rotateY(45deg);
        }
        #test div {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            position: absolute;
            background-color: rgba(0, 255, 255, 0.5);
            background-size: contain;
            box-shadow: 0 0 10px #5fbcff;
        }
        #test > div:nth-child(1) {
            transform: translateX(100px) rotateY(90deg);
        }
        #test > div:nth-child(2) {
            transform: translateX(-100px) rotateY(90deg);
        }
        #test > div:nth-child(3) {
            transform: translateY(100px) rotateX(90deg);
        }
        #test > div:nth-child(4) {
            transform: translateY(-100px) rotateX(90deg);
        }
        #test > div:nth-child(5) {
            transform: translateZ(100px);
        }
        #test > div:nth-child(6) {
            transform: translateZ(-100px);
        }
    </style>
    <body>
    <div id="test">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    </body>
    
Copyright © 豆包嘿嘿~ 2012-∞ 冀ICP备17033181号 all right reserved,powered by Gitbook修订: 2020-10-13 14:49:47

results matching ""

    No results matching ""