IT

2022-10-13
css3菜单点击demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>菜单</title>
    <style type='text/css'>
        .container {
            display: inline-block;
            cursor: pointer;
        }

        /*这就生成了三横杠的菜单*/
        .bar1, .bar2, .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
        }

        .change .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
        }

        .change .bar2 {
            opacity: 0;
        }

        .change .bar3 {
            -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
        }
    </style>
    <script type="text/javascript">
        function myFunction(x) {
            x.classList.toggle("change");
        }
    </script>


</head>
<body>
    <p>点击菜单按钮变为 "X":</p>
    <div class="container" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
</body>
阅读更多

2022-10-13
css中的块元素与行内（内联元素）

块元素–常见元素div

1.独占一行
2.默认宽度是父元素的宽度（即撑满父元素）
3.默认高度由其内容撑开，所以无内容时候（若没有其它样式，height…）就消失了

行内元素–常见元素span

1.只占本身内容大小（设定width,height不会生效）
如果源代码两个span，换行排列（存在换行），而浏览器对其识别成一个空格出现两个元素水平排列，之间存在缝隙。
2.多个行内元素渲染呈现从左往右依次排列，无法容纳时自动换行
3.默认宽高都是由内容撑开（行内元素是无法设置宽高的，若无内容区就消失了）

阅读更多

2022-10-13
css 省略号表示溢出文本

1.先强制一行内显示文本

white-space: nowrap;

2.超出部分隐藏

overflow: hidden;

3.文字用省略号替代超出的部分

text-overflow: ellipsis;

阅读更多

2022-10-13
如何用css3画一个冰墩墩

文章来源：https://baijiahao.baidu.com/s?id=1724607815488021505&wfr=spider&for=pc

阅读更多

2022-10-13
CSS3中特殊字符的用法

首先找出特殊字符的编码，例如：9650 25B2 【正黑三角】

使用方法：after(伪类)

1
<div class="tempble"></div>

样式为：

.tempble:after{
　　content: “/9650 25B2”;//特殊字符或形状
}

这便会在样式为tempble的对象后渲染出一个特殊符号。

阅读更多
浏览 次 |

© 2023 南疆 with help from Hexo and Twitter Bootstrap. Theme by Freemind.

container-narrow --> ▲