CSS代码总结

最新推荐文章于 2022-05-19 12:32:22 发布

ddydyt

最新推荐文章于 2022-05-19 12:32:22 发布

阅读量115

点赞数

分类专栏：啊哦额

本文链接：https://blog.csdn.net/qq_39088411/article/details/103079663

版权

啊哦额专栏收录该内容

25 篇文章 0 订阅

订阅专栏

rem 以 html 的font-size 为基准
em 以父元素的font-size 为基准
zoom 以当前元素的fomt-size 为基准
letter-space
content: attr(class) 获取class的值，就算class的值为图形也可以获取。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*伪对象选择符*/
    .link2 a {
        font-weight: bold;
        line-height: 2.8;
        text-transform: uppercase;
        text-decoration: none;
        color: #fff;
        display: inline-block;
        margin: .25em;
        padding-right: 1em;
        border-radius: .25em;
        overflow: hidden;
    }
    
    .link2 a:before {
        content: attr(class);
        background: rgba(0, 0, 0, .375);
        display: inline-block;
        width: 2.8em;
        height: 2.8em;
        margin-right: .875em;
        text-align: center;
    }
    
    .link2 .√ {
        background: #090;
    }
    
    .link2 .✘ {
        background: #c00;
    }
    </style>
</head>

<body>
    <div class="link2">
        <a class="√" href="#">Accept</a>
        <a class="✘" href="#">Decline</a>
    </div>
</body>

</html>

 clip:rect(auto auto 100px 100px);
        /*对定位的元素进行裁切*/
        /*auto就是*不裁切的意思/
        /*四个值分别对应的方位就是上右下左*/
        /*这里例子中裁切的方位就是左下方*

resize /* resize 改变元素；视图大小 */

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>resize_</title>
    <style>
        .test{
            overflow:auto;
            width:200px;
            height:100px;
            /* resize 改变元素；视图大小 */
            resize:both;
            background:#eee;}
    </style>
</head>
<body>
<div class="test">
    <ul>
        <li>新闻列表</li>
        <li>新闻列表</li>
        <li>新闻列表</li>
    </ul>
</div>
</body>
</html>

禁止用户操作

禁止鼠标右键：οncοntextmenu=“return false”；

禁止选择：onselectstart=“return false”；

禁止拖放：οndragstart=“return false”；

禁止拷贝：οncοpy=document.selection.empty() 。

禁止复制：oncopy = “return false”；

禁止保存：，放在head里面。

禁止粘贴：<input type=text οnpaste=“return false”>

禁止剪贴：oncut = “return false”；

关闭输入法：<input style=“ime-mode:disabled”

旋转的正方体

<html>
<head>
    <title>H5立方</title>
    <meta charset="utf-8">
    <style>
        html{
            height: 100%;
            /*径向渐变*/
            background: radial-gradient(circle, #333, #000, #000);
        }
        body{
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            /*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
            当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
            注释：perspective 属性只影响 3D 转换元素。
            1000px 为界限
            */
            perspective: 1500px;
        }
        main
        {
            width: 300px;
            height: 300px;
            /*使被转换的子元素保留其 3D 转换：*/
            transform-style: preserve-3d;
            animation: 10s spin linear infinite;
        }
        main div
        {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100%;
            border: 1px solid black;
        }
        .font
        {
            background-image: url(/demos/img/pic1.jpg);
            /*translateZ表示元素在Z轴上进行平移*/
            transform: translateZ(150px);
        }
        .back
        {
            background-image: url(/demos/img/pic2.jpg);
            transform: translateZ(-150px);
        }

        .left
        {
            background-image: url(/demos/img/pic3.jpg);
            /*rotate表示旋转，rotateY表示绕着Y轴旋转度数，*/
            transform: rotateY(90deg) translateZ(-150px);
        }
        .right
        {
            background-image: url(/demos/img/pic4.jpg);
            transform: rotateY(90deg) translateZ(150px);
        }

        .top
        {
            background-image: url(/demos/img/pic5.jpg);
            transform: rotateX(90deg) translateZ(-150px);
        }
        .bottom
        {
            background-image: url(/demos/img/pic6.jpg);
            transform: rotateX(90deg) translateZ(150px);
        }

        @keyframes spin
        {
            0%
            {
                transform: rotateX(0) rotateY(0);
            }
            100%
            {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<main>
    <div class="font"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</main>
</body>
</html>

ddydyt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS代码总结

rem 以 html 的font-size 为基准em 以父元素的font-size 为基准zoom 以当前元素的fomt-size 为基准letter-spacecontent: attr(class) 获取class的值，就算class的值为图形也可以获取。<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫