html5+css3（昨日学习总结）

最新推荐文章于 2023-10-23 08:00:00 发布

晚风吹耶yep

最新推荐文章于 2023-10-23 08:00:00 发布

阅读量201

点赞数 1

文章标签： css3 css javascript

本文链接：https://blog.csdn.net/m0_64492064/article/details/123565397

版权

1.字体图标：

（1）icomoon:

要点：

1.1 解压完的fonts文件要放到将要引入文件同级目录下。

1.2 把解压完里面的style.css里面的字体路径复制进去：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?yt1na2');
  src:  url('fonts/icomoon.eot?yt1na2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?yt1na2') format('truetype'),
    url('fonts/icomoon.woff?yt1na2') format('woff'),
    url('fonts/icomoon.svg?yt1na2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3 要给这个元素进行字体定义：font-family: 'icomoon'; 必不可少。

(2) 阿里图标库 iconfont

2.1 类名引用（font calss）

1.link引入解压包内的iconfont.css。
2.给元素复制想要的字体图标的类名，注意类名一定要加类前缀iconfont 才可以生效。

2. 文本溢出隐藏：

2.1单行

1.先强制文本不换行：white-space:nowrap;

2.超出文本溢出隐藏：overflow:hidden;

3.隐藏的文字变省略号：text-overflow：ellipsis;

2.2 多行

多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分都是wibkit内核）,更推荐让后端人员来做这个效果。

1.overflow：hidden；

2.tex-overflow:ellipsisi;

3.弹性伸缩盒子模型显示：display:-webkit-box;

4.限制在一个块元素显示的文本的行数：-webkit-line-clamp:2;

5.设置或检索伸缩和对象的子元素的排列方式：-webkit-box-orient:virtical;

3.滤镜函数属性 filter:blur（模糊）

对图片盒子文字字体图标都有效。

数值越大模糊越大。

4.calc函数

width：calc( 100% - 50px);

运算符左右要有空格

5.操作文本类伪元素补充（不常用）

  /* 操作选中的文本样式 */
        
        .box::selection {
            background-color: pink;
        }
        /* 操作第一个字 */
        
        .box::first-letter {
            color: aquamarine;
            font-size: 30px;
        }
        /* 操作第一行 */
        
        .box::first-line {
            color: red;
        }

6.三角制作

要点：

宽高为0，设置四条边为透明，边框宽度，边框样式。

.son::after {
            position: absolute;
            top: 0;
            right: 0;
            content: '';
            border-style: solid;
            border-width: 26px 15px 0 0;
            border-color: red #fff transparent transparent;
        }

7.兄弟选择器

 <style>
        .nav ul li {
            list-style: none;
            height: 45px;
            width: 50px;
            background-color: pink;
            border: 1px solid red;
        }
        /* 找紧紧挨着的第一个亲兄弟   使用 + 号表示*/
        /* .nav ul li:first-child:hover+p {
            background-color: red;
        } */
        /* ---------------------------------------- */
        /* 找所有指定的兄弟   使用  ~ 符号表示 */
        
        .nav ul li:nth-child(1):hover~li {
            background: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>哥哥</li>
            /*ul里面不能直接包含p,此处只是示例.*/
            <p>弟弟</p>
            <p>弟弟</p>
            <li>弟弟</li>
            <li>弟弟</li>
            <li>弟弟</li>
        </ul>
    </div>
</body>


</html>

8.太极的案例

要点：合理利用边框，和定位

  body {
            background-color: #ccc;
        }
        
        .box {
            position: relative;
            width: 150px;
            height: 300px;
            border-left: 150px solid #000;
            background-color: #fff;
            border-radius: 50%;
        }
        
        .box::after {
            position: absolute;
            top: 0;
            left: -75px;
            display: inline-block;
            content: '';
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
            border: 60px solid #000;
        }
        
        .box::before {
            position: absolute;
            top: 150px;
            left: -75px;
            display: inline-block;
            content: '';
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50%;
            border: 60px solid #fff;
        }


<body>
    <div class="box"></div>
</body>