2022.3.17内容总结

最新推荐文章于 2024-07-20 15:40:46 发布
最新推荐文章于 2024-07-20 15:40:46 发布
阅读量264 收藏
点赞数 1
文章标签： css 前端 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LOxia/article/details/123591676
版权

1.字体图标的使用

Icon Font & SVG Icon Sets ❍ IcoMoon (国外的网站，进入速度可能会慢一点)

iconfont-阿里巴巴矢量图标库阿里官方推出的字体图标 重点是免费，而且用法也比较简单)

icomoon

1.登入Icon Font & SVG Icon Sets ❍ IcoMoon

2.点击正在上传…重新上传取消

3.选择想要的图标，此处我任选几个正在上传…重新上传取消

4.下载到本地 并解压到iconnmoon文件夹

5.使用方法：

此处使用三种方法：其中第三种方法最为简单

<!DOCTYPE html>
<html lang="zh-CN">
​
<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>
    <link rel="stylesheet" href="./iconmoon/style.css">
    <style>
        /* 引入字体图标 并且要更改文件路径 */
        @font-face {
            font-family: 'icomoon';
            src: url('./iconmoon/fonts/icomoon.eot?40jj8c');
            src: url('./iconmoon/fonts/icomoon.eot?40jj8c#iefix') format('embedded-opentype'),
                url('./iconmoon/fonts/icomoon.ttf?40jj8c') format('truetype'),
                url('./iconmoon/fonts/icomoon.woff?40jj8c') format('woff'),
                url('./iconmoon/fonts/icomoon.svg?40jj8c#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
​
        span {
            /* 声明 */
            font-family: 'icomoon';
        }
​
        i::before {
            /* 必须要加反斜杠转译 */
            content: '\e91c';
            /* 必须要声明 */
            font-family: 'icomoon';
            /* 取消倾斜 */
            font-style: normal;
        }
    </style>
</head>
​
<body>
    <!-- 使用方法一:直接使用 -->
    <span></span>
    <!-- 使用方法二：利用伪元素使用 -->
    <i></i>
    <!-- 使用方法三：调用类名使用  此时必须要引入font里面的style.css-->
    <b class="icon-connection"></b>
</body>
​
</html>

iconfont 阿里妈妈字体库

1.登入iconfont-阿里巴巴矢量图标库

2.可搜索想要的图标正在上传…重新上传取消

3.选择图标，并下载正在上传…重新上传取消

4.将解压完成的文件存放在iconfont文件夹中

5.使用：

<!DOCTYPE html>
<html lang="zh-CN">
​
<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>
    <link rel="stylesheet" href="./iconfont/font_3259708_114vvnjd6w6f/iconfont.css">
    <style>
        body {
            font-size: 32px;
        }
​
        /* 使用方法一 引入iconfont.css文件声明 */
        @font-face {
            font-family: "iconfont";
            /* Project id 3259708 */
            /* 更改路径 */
            src: url('./iconfont/font_3259708_114vvnjd6w6f/iconfont.woff2?t=1647657703210') format('woff2'),
                url('./iconfont/font_3259708_114vvnjd6w6f/iconfont.woff?t=1647657703210') format('woff'),
                url('./iconfont/font_3259708_114vvnjd6w6f/iconfont.ttf?t=1647657703210') format('truetype');
        }
​
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
​
        span {
            /* 必须要字体声明 */
            font-family: "iconfont" !important;
        }
​
        i::before {
            font-family: "iconfont" !important;
            /* 伪元素content里面必须要写转译的 */
            content: "\e604";
            font-style: normal;
        }
​
        p {
            /* 必须要声明 */
            font-family: "iconfont" !important;
        }
    </style>
</head>
​
<body>
    <!-- 方法一：找到demo_index.html网页打开，找到自己想要的图标，然后复制粘贴 -->
    <span>&#xe61a;</span>
    <!-- 方法二：伪元素使用字体图标 -->
    <i></i>
    <!-- 方法三：直接调用类名使用，前提是必须要引入iconfont.css文件 前两种不需要，但是第三种更简单 -->
    <p class="icon-tubiao2"></p>
</body>
​
</html>

2.省略号（不需要记忆，单行多行网上搜索直接复制粘贴 推荐由后端来做这一块）

单行：

<!DOCTYPE html>
<html lang="zh-CN">
​
<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>
        p {
            width: 150px;
            height: 50px;
            border: 1px solid red;
            margin-left: 150px;
            //注释：强制一段文字不换行
            white-space: nowrap;
            //注释：溢出隐藏
            overflow: hidden;
            //注释：超出部分的文本以省略号显示
            text-overflow: ellipsis;
        }
    </style>
</head>
​
<body>
    <p>我终于看到，思念到死的脸庞，追逐的脸，永远在我的身旁</p>
</body>
​
</html>

多行：

<!DOCTYPE html>
<html lang="zh-CN">
​
<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>
        p {
            width: 200px;
            height: 150px;
            border: 1px solid red;
            margin-left: 50px;
            text-overflow: ellipsis;
            display: -webkit-box;
            //设置为弹性盒子
            -webkit-box-orient: vertical;
            //控制显示几行
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    </style>
</head>
​
<body>
    <p>你是我这一辈子都不想失恋的爱，我终于等到，等到梦醒的时分，不管有多少前途未知的坎坷，不用去管，也不用去问</p>
</body>
​
</html>

3.图片模糊处理函数blur（）

blur（）单位是px

filter：blur（xpx） 数值越大，模糊程度越高

<!DOCTYPE html>
<html lang="zh-CN">
​
<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>
        .box {
            margin: 0 auto;
        }
​
        .box img {
            filter: blur(13px);
            transition: all .5s;
        }
​
        .box img:hover {
            filter: blur(0);
        }
    </style>
</head>
​
<body>
    <div class="box">
        <img src="./images/niu1.webp" alt="美女照片">
    </div>
</body>
​
</html>

4.calc计算函数的使用

calc计算函数，主要作用：自动计算

案例：让子盒子始终比父盒子少60px

<!DOCTYPE html>
<html lang="zh-CN">
​
<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>
        .box {
            width: 500px;
            height: 300px;
            background-color: pink;
        }
​
        .box .son {
            margin: 0 auto;
            width: calc(100% - 60px);
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
​
<body>
    <!-- 需求：子盒子的宽度永远比父盒子的宽度小60px -->
    <div class="box">
        <div class="son"></div>
    </div>
</body>
​
</html>

5.过渡

transition: 过渡的属性 过渡时间 速度曲线 何时开始;

通常是 transition：all .5s；

过渡时间必须要加单位

进度条案例

<!DOCTYPE html>
<html lang="zh-CN">
​
<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>进度条案例</title>
    <style>
        .box {
            width: 200px;
            height: 30px;
            border: 1px solid red;
            border-radius: 15px;
​
        }
​
        .box .son {
            width: 30%;
            height: 100%;
            border-radius: 15px;
            background-color: red;
            transition: all .5s;
        }
​
        .box:hover .son {
            width: 100%;
        }
    </style>
</head>
​
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
​
</html>

6.三角的制作（边框）

首先看一下边框的样子

<!DOCTYPE html>
<html lang="zh-CN">
​
<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: 0;
            height: 0;
            margin: 0 auto;
            border-width: 30px;
            border-style: solid;
            border-color: red yellow green pink;
        }
    </style>
</head>
​
<body>
    <div></div>
</body>
​
</html>

案例演示如下：正在上传…重新上传取消

那么想要三角，只需要将其他的边框颜色设置为透明色transparent

要求，只留下绿色的三角

分析:上边框宽度为0 左右下边框宽度不变，左右边框颜色变为透明色

<!DOCTYPE html>
<html lang="zh-CN">
​
<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: 0;
            height: 0;
            margin: 0 auto;
            border-width: 0px 30px 30px 30px;
            border-style: solid;
            border-color: transparent transparent green transparent;
        }
    </style>
</head>
​
<body>
    <div></div>
</body>
​
</html>

显示结果如下：正在上传…重新上传取消

想要不同的三角形，只需改变border-weight就可以

7.今日案例

1.京东秒杀案例（三角形）

如图：正在上传…重新上传取消

<!DOCTYPE html>
<html lang="zh-CN">
​
<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>
        * {
            margin: 0;
            padding: 0;
            /* box-sizing: border-box; */
        }
​
        .box {
            width: 160px;
            height: 40px;
            background-color: #fff;
            border: 1px solid red;
            margin: 0 auto;
            text-align: center;
            font-size: 12px;
            color: #ccc;
            line-height: 40px;
            text-decoration: line-through;
            margin-top: 50px;
        }
​
        .box .left {
            position: relative;
            float: left;
            width: 100px;
            text-align: center;
            height: 40px;
            background-color: red;
            color: #fff;
            font-size: 16px;
​
        }
​
        /* 三角做法 */
        .left::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            border-width: 40px 12px 0px 0px;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
        }
    </style>
</head>
​
<body>
    <!-- css三角做法 -->
    <div class="box">
        <div class="left">
            ￥1352元
        </div>
        1220元
    </div>
</body>
​
</html>

2.鼠标经过大盒子，从底部缓缓升起一个小盒子 （主要利用定位和过渡实现）

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
​
<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>底部上升案例</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 500px;
            margin: 0 auto;
            background-color: pink;
            overflow: hidden;
        }
​
        .mark {
            position: absolute;
            bottom: -300px;
            left: 0;
            width: 300px;
            height: 100px;
            font-size: 30px;
            font-weight: 700;
            text-align: center;
            background-color: #27ba9b;
            transition: all .5s;
        }
​
        .box:hover .mark {
            bottom: 0px;
        }
    </style>
</head>
​
<body>
    <div class="box">
        <div class="mark">吹面不觉杨柳风<br />错把少女当做宝</div>
    </div>
</body>
​
</html>

3.太极案例

这是一个比较好玩的案例

案例中主要用到了边框和定位

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
​
<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>太极</title>
    <style>
        body {
            background-color: #ccc;
        }
​
        div {
            position: relative;
            width: 150px;
            height: 300px;
            background-color: #fff;
            border-left: 150px solid #000;
            border-radius: 50%;
            margin: 100px auto;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: rotate 2s linear infinite;
        }
​
        div::before,
        div::after {
            content: "";
            position: absolute;
            left: -75px;
            width: 30px;
            height: 30px;
            border: 60px solid #000;
            border-radius: 50%;
        }
​
        div::before {
            top: 0;
            background-color: #fff;
​
        }
​
        div::after {
            bottom: 0;
            background-color: #000;
            border-color: #fff;
        }
​
        @keyframes rotate {
            0% {
​
                transform: scale(0) rotate(0deg);
            }
​
            100% {
​
                transform: scale(3) rotate(360deg);
            }
        }
    </style>
</head>
​
<body>
    <div></div>
</body>
​
</html>
小羊卷
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
IntelliJ IDEA 2022.3正式发布，配置云同步&支持Redis好用到炸
架构师：通透，才能写出好代码！
12-05 6671
每种技术是有红利期的，这一般体现在版本升级上。工具类软件一般建议可保持最新，代码类框架一般坐在第二排、第三排看戏。
Kali2022.3虚拟机编译AOSP（从Kali安装到完成Aosp编译详细记录）
itTalmud的博客
09-10 1676
Kali虚拟机编译AOSP
2022.2.17日总结
qq_56739177的博客
02-17 920
假期努力，如虎添翼！
公众号内容拓展学习笔记（2022.3.17）
xiaoxuebajie的博客
03-17 4440
公众号内容拓展学习笔记（2022.3.17） 📎 今日要点 一个框架统一Siamese自监督学习，清华、商汤提出简洁、有效梯度形式，实现SOTA ⭐️⭐️ Abstract: 一个框架统一Siamese自监督学习，清华、商汤提出简洁、有效梯度形式，实现SOTA Paper: Exploring the Equivalence of Siamese Self-Supervised Learning via A Unified Gradient Framework Tips: 来自清
IntelliJ IDEA 2022.2正式发布，支持Spring Boot 3和Spring 6
架构师：通透，才能写出好代码！
08-01 7837
它变快了，也变强了
公众号内容拓展学习笔记（2022.3.12）
xiaoxuebajie的博客
03-12 2438
公众号内容拓展学习笔记（2022.3.12） 📎 今日要点 DINO：目标检测benchmark COCO屠榜的正确姿势 ⭐️⭐️ Abstract: DINO：目标检测benchmark COCO屠榜的正确姿势 Paper: DINO: DETR with Improved DeNoising Anchor Boxes for End-to-End Object Detection Code: https://github.com/IDEACVR/DINO Tips: DINO
Spring Cloud 2022.0.0正式发布：OpenFeign稳得很&全面迈向GraalVM
架构师：通透，才能写出好代码！
12-31 4189
谈OpenFeign被淘汰还为时尚早：依旧主流，该学还得继续学； 学GraalVM已为时不晚：必然的发展趋势，早学早受益； 用Spring Cloud 2022时机基本成熟：demo练手，迎接下一次革新。
全新 IDEA 2022.2 正式发布，新特性真香！
emprere的博客
07-17 3228
因公众号更改推送规则，请点“在看”并加“星标”第一时间获取精彩技术分享点击关注#互联网架构师公众号，领取架构师全套资料 都在这里0、2T架构师学习资料干货分上一篇：别总写代码，这130个网站比涨工资都重要大家好，我是互联网架构师！出品：OSC开源社区ID：oschina2013作为一个经常使用IntelliJ IDEA来写代码的用户，每次对于IntelliJ IDEA的版...
Android 开源项目和文章集合（更新：2022.03.21）
z979451341的博客
11-08 14万+
1.再见SharedPreferences，你好MMKV！ https://mp.weixin.qq.com/s/VBMDIE0QHXQAMuIjon-Fjg
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
热门推荐
qq_54753561的博客
12-25 25万+
2022年最新前端面试题 热门题目 （面经最全版）（蛋糕）...持续维护中，HTML和Css部分vue部分，Null，undefined，Boolean，Number，String，BigInt 、BigInt 、Object、1. **解构赋值、扩展运算符、class类、模块化 import export、箭头函数、generator函数、promise let cosnt ......
2022年重庆专升本计算机试题.doc
11-04
2. 在Word中，除了正文、表格等内容外，图片、数学公式、图表等可以作为对象插入，采用OLE（Object Linking and Embedding）技术，使用这种技术可以实现多种软件之间数据的互换。 3. Windows操作系统的安装类型包括...
2022海康HR面试总结.pdf
10-20
以下是从给出的文件内容中提炼出的海康HR面试的一些核心知识点： 1. **自我介绍**： - 应聘者需准备一个简洁而全面的自我介绍，包括个人信息、教育背景、专业技能和实践经验。 2. **项目经验**： - 需要详细介绍...
2022年自考数据库系统原理简答题总结.docx
11-04
"2022年自考数据库系统原理简答题总结" 概括来说，这个资源文件是关于数据库系统原理的自考简答题总结，涵盖了数据库系统的基本概念、ODBC、SQL/CLI、PB 开发空间、T-SQL、角色、身份验证、触发器、数据导入和导出...
2022年数控车床的编程(1).ppt
11-03
总结，数控车床的编程涵盖了从基本概念、坐标系统、指令使用到高级功能如子程序和固定循环的全面知识，这些内容对于理解和操作数控车床进行精密加工至关重要。熟练掌握这些知识，可以高效、准确地完成各种复杂零件的...
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 520
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 243
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 345
网页隐藏版一行小说阅读器
HTML、CSS、JS浅浅浅浅浅解
最新发布
lbdking的博客
07-20 1451
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
CSS|06 背景样式
Catherinemin的博客
07-19 795
距离他左边的盒子的距离为100px，第二个100px表示 背景图片的。/*左内填充，盒子里面的内容到左边边框线的距离，就称为左内填充*/语法： background-color: red;/*background-repeat 平铺*//*background-repeat 平铺*//*background-repeat 平铺*/
2022年详解8051单片机基础与应用
本资源是一份关于2022年单片机基础知识的PPT，主要讲解了单片机的基本概念、发展历程、51系列单片机的代表性型号及其特性，以及8051单片机的具体功能和引脚配置。以下是对这些内容的详细解读： 1. **单片机概述** ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值