CSS高级小技巧

最新推荐文章于 2024-05-17 10:43:01 发布

寻找捷径

最新推荐文章于 2024-05-17 10:43:01 发布

阅读量253

点赞数

分类专栏： html css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_56361740/article/details/128287690

版权

html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

CSS高级小技巧

字体图标

可以选择在IcoMoon下载字体

进入网站点击右上角
选择你想要的字符
点击右下角Generate Font
出现以下界面
点击右下角Donwnload下载字体
下载完成后解压压缩包
想要使用这些字符需要把css引入，打开style.css，复制红框中的代码粘贴到想使用这些字符的css当中

在这里插入图片描述

注意其中的路径，如果网页位置和fonts文件夹处于同一级则不需要修改路径，其他按情况修改好路径即可

回到解压出的文件中，打开demo.html
其中会显示你下载的字符，复制字符后面的框框
放到html当中
特别注意每一个字符看起来是一样的，实际上都不一样
由于这些字符时以文字的形式存在的，所以我们可以给他写一些样式，最终效果如下

注意 font-family: icomoon必须加上

轮廓线outline

在我们加入一个输入框时，我们点击他输入时他会出现一个边框

在这里插入图片描述

如果我们不需要他我们可以用outline: 0或者none来去掉他

<style>
input{
            outline: 0;
        }
</style>

在这里插入图片描述

vertical-align解决空白缝隙

当我们往一个div中添加一张图片，再给div添加一个边框会发现图片底部存在一个空白缝隙

在这里插入图片描述

这是因为行内块元素会和文字基线对齐，解决这个问题我们可以给图片设置一下vertical-align属性为top/middle/bottom都可以解决这个问题

把img变成块级元素也可以解决

<style>
div img {
            vertical-align: middle;
        }
</style>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gE24tKcl-1670829402383)(C:\Users\27518\AppData\Roaming\Typora\typora-user-images\image-20221212144935617.png)]$

溢出的文字省略号显示text-overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 150px;
            height: 100px;
            background-color: skyblue;
            
        }
    </style>
</head>
<body>
    <div>vgwieubviwuebviuwebviwue</div>
</body>
</html>

在这里插入图片描述

文字溢出了

修改样式

<style>
        div{
            width: 150px;
            height: 100px;
            background-color: skyblue;
            /* 1.强制一行显示完(默认normal) */
            white-space: nowrap;
            /* 2.超出的部分隐藏 */
            overflow: hidden;
            /* 3.超出的文字用省略号代替 */
            text-overflow: ellipsis;
        }
    </style>

在这里插入图片描述

解决！！！

可拖拽文本域设置不可拖拽resize

我们添加一个textarea文本域，如果用户随意拉大可能会影响到我们页面的布局

在这里插入图片描述

设置样式

<style>
textarea {
            resize: none;
        }
</style>

文本域变为不可拖拽

在这里插入图片描述

设置鼠标的样子cursor

设置cursor的属性可以设置光标形状

<ul>
    <li style="cursor: default;">我是鼠标默认</li>
    <li style="cursor: pointer;">我是鼠标小手</li>
    <li style="cursor: move;">我是鼠标移动</li>
    <li style="cursor: text;">我是鼠标文本</li>
    <li style="cursor: not-allowed;">我是鼠标禁止</li>
</ul>

[外链图片转存中...(img-dYq3xOWE-1670829402390

鼠标放在对应的位置会变成对应的形状

寻找捷径

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS高级小技巧

- [字符图标](#字体图标)- [轮廓线outline](#轮廓线outline)- [vertical-align解决空白缝隙](#vertical-align解决空白缝隙)- [溢出的文字省略号显示text-overflow](#溢出的文字省略号显示text-overflow)- [可拖拽文本域设置不可拖拽resize](#可拖拽文本域设置不可拖拽resize)- [设置鼠标的样子cursor](#设置鼠标的样子cursor)
复制链接

扫一扫