CSS

作者QQ：67065435 QQ群：821635552

常用技巧

规划界面结构时，所有元素都在块级元素内排版

<!--正确示范-->
<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>

设置元素的不透明度

<style>
image {
    opacity:0.5;
}
</style>
<img src="xxx">

隐藏滚动条(滚动功能正常)

<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>

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>

样式发生改变时用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>

实现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>

CSS

CSS

常用技巧

results matching ""

No results matching ""