HTML与CSS学习第10天

已于 2022-03-02 14:49:52 修改
阅读量653 收藏
点赞数
分类专栏： HTML+CSS 文章标签： html css 学习
于 2022-02-24 21:41:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33938234/article/details/123120387
版权
本文详细介绍了HTML中的字体图标，包括其优点、下载与使用方法，并提供了使用Unicode编码和类名的示例。同时，文章深入探讨了CSS平面转换，包括位移、旋转、缩放等属性，通过实例展示了如何实现盒子居中、双开门动画和旋转效果。此外，还提到了渐变背景的使用。
摘要由CSDN通过智能技术生成

HTML学习第10天

在这里插入图片描述

目录

1. 字体图标

1.1 字体图标概述

  • 定义：本质是字体，但展示的是图标
  • 作用：处理简单的，颜色单一的图片

1.2 字体图标的优点

  1. 灵活性：灵活的修改样式，例如：尺寸，大小
  2. 轻量级：体积小，渲染快，降低服务器请求次数
  3. 兼容性：几乎兼容所有主流浏览器

1.3 字体图标的下载

在这里插入图片描述

1.4 字体图标的使用(unicode编码使用)

  1. 引入样式表：

        <link rel="stylesheet" href="../iconfont/iconfont.css">

  2. 使用unicode编码引用字体图标

    <!-- 使用unicode编码引用字体图标 -->
    <span>&#xe704;</span>

  3. 设置span标签的字体为iconfont

    <!-- 设置文字字体为字体图标 -->
    <style>
        span{
            font-family: "iconfont";
        }
    </style>
案例
<!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>
    <!-- 引入字体图标样式表 -->
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <!-- 设置文字字体为字体图标 -->
    <style>
        span{
            font-family: "iconfont";
        }
    </style>
</head>
<body>
    <!-- 使用unicode编码引用字体图标 -->
    <span>&#xe704;</span>
</body>
</html>
  • 效果图

在这里插入图片描述

1.5 字体图标的使用（调用类名实现(推荐)）

  1. 引入样式表：

    <!-- 引入字体图标样式表 -->
    <link rel="stylesheet" href="../iconfont/iconfont.css">

  2. 调用类名

    <!-- 使用类名引用字体图标 -->
    <span class="iconfont icon-QRcode"></span>
注意点
  • 使用类名是需要两个类名：iconfont 和 单个图标本身的类名
案例
<!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>
    <!-- 引入字体图标样式表 -->
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    
</head>
<body>
    <!-- 使用类名引用字体图标 -->
    <span class="iconfont icon-QRcode"></span>
</body>
</html>
  • 效果图
    在这里插入图片描述

1.7 综合案例（购物车）

<!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>
    <link rel="stylesheet" href="../iconfont/iconfont.css">

    <style>


        li{
            list-style: none;
        }

        li a{
            text-decoration: none;
            color: #333;
        }

        li a.icon-cart-Empty-fill{
            color: orange;
        }

    </style>
</head>
<body>
    <!-- 第一和第三个a使用字体图标 -->
    <li>
        <a href="#" class="iconfont icon-cart-Empty-fill"></a>
        <a href="#">购物车</a>
        <a href="#" class="iconfont icon-arrow-down"></a>
    </li>
</body>
</html>
  • 效果图

在这里插入图片描述

1.8 矢量图片转换为图标

  1. 将svg格式的矢量图片上传到阿里巴巴图标库
  2. 去除本地svg图片的颜色再上传
  3. 加入购物车，下载

2. 平面转换

2.1 平面转换的定义

  • 定义：改变盒子在平面内的形态（位移，旋转，缩放）
  • 2D转换

2.2 平面转换属性1(位移)

  • 属性名：transform：translate（水平移动距离，垂直移动距离）
  • 取值（正负均可）
    • 数字+px
    • 百分比：盒子自身大小的百分比
注意点

  • translate（）如果只给出一个值，表示x轴方向移动的距离

  • 单方向取值：translateX（），translateY()

案例：实现盒子相对于父元素水平居中对齐（无论父子宽高如何变化）
<!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>
        /*  清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }
        
        .father{
            position: relative;
            margin: 100px auto;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .son{
            position: absolute;
            left: 50%;
            top: 50%;
            /* 平面转换实现 */
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>
</html>
  • 效果图
    在这里插入图片描述
案例：双开门
<!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }

        .father{
            width: 1000px;
            height: 600px;
            background: url("./images/bg.jpg") -180px 0;
            margin: 100px auto;
            /* 移出时隐藏 */
            overflow: hidden;
        }

        .son1{
            float: left;
            width: 500px;
            height: 600px;
            background: url("./images/fm.jpg") -180px 0;
            transition: all 0.5s;
        }

        .son2{
            float: left;

            width: 500px;
            height: 600px;
            background: url("./images/fm.jpg") -650px 0;
            transition: all 0.5s;

        }

        .father:hover .son1{
            /* 左移出去 */
            transform: translateX(-100%);
        }

        .father:hover .son2{
            /* 右移出去 */
            transform: translateX(100%);
        }


    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

注意点
  • background：right 0 可以取图片右半部分

2.3 平面转换属性2（旋转）

  • 属性名：transform：rotate（角度）
  • 取值：数字+deg
    • 取值为正，顺时针移动
    • 取值为负，逆时针移动
注意点
  • 角度的单位为deg
案例
<!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 400px;
            height: 400px;
            background-image: url("./images/rotate.png");
            background-size: 400px;
            transition: all .5s;

        }

        .box:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • 效果图

在这里插入图片描述

2.3.2 转换中心点（不止旋转，其他效果如位移，缩放的中心点也是这个）

  • 属性：transform-origin：原点水平位置 原点垂直位置

  • 取值：默认是盒子的中心点

    • 方位名词（left，top,right,bottom,center）
    • 数字+px
    • 百分比：参照盒子自身大小
案例
<!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 400px;
            height: 400px;
            background-image: url("./images/rotate.png");
            background-size: 400px;
            transition: all 2s;
            /* 旋转的中心点改变：右下角 */
            transform-origin: right bottom;
        }

        .box:hover{
            /* 顺时针旋转360度 */
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • 效果图

在这里插入图片描述

案例：旋转加上位移
<!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>
        /* 清除默认间距 */
        *{
            margin: 0;
            padding: 0;
        }

        body{
            line-height: 1;
        }

        .box{
            width: 1336px;
            height: 400px;
            box-sizing: border-box;
            border: 1px solid #000;
            margin: 100px auto;
        }

        .img{
            text-align: center;
            width: 400px;
            height: 400px;
            transition: all 2s;

        }

        .img img{
            margin-top: 50px;
        }

        .box:hover .img{
            transform: translateX(1000px) rotate(720deg);
        }
           
    </style>
</head>
<body>
    <div class="box">
        <div class="img"><img src="./images/tyre.png" alt=""></div>
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

注意点
  • 旋转会改变坐标轴的方向

2.4 平面转换属性3（缩放）

  • 缩放在之前可通过width和height的变化实现，但不是中心缩放，而这个属性为中心缩放

  • 属性名：transform：scale（x轴缩放倍数，y轴缩放倍数）

  • 属性值：纯数字

    • 大于1放大
    • 小于1缩小

  • 一般情况下这样使用：

    • transform：scale（缩放倍数）
案例
<!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>
        .box{
            width: 400px;
            height: 200px;
            /* background-color: pink; */
            margin:100px auto;
        }

        img{
            width: 100%;
            transition: all 1s;
        }

        .box:hover img{
            transform: scale(1.2);
        } 
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/fm.jpg" alt="">
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

案例2：现实案例
<!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>
        /*清除默认边距 */
        *{
            padding: 0;
            margin: 0;
        }

        .box{
            width: 300px;
            height: 300px;
            background-color: #fff;
            
        }

        .box .pic{
            width: 100%;
            
            position: relative;
        }

        .box img{
            /* overflow: hidden; */
            
            width: 100%;
        }

        .box .pic::after{
            position: absolute;
            content: '';
            width: 58px;
            height: 58px;
            left: 50%;
            top: 50%;
            /* 层叠性原因，需要连写在一起 */
            transform: translate(-50%,-50%) scale(5);
            /* background-color: blue; */
            background-image: url("./images/play.png");
            background-size: 100%;
            opacity: 0;
            transition: all 1s;
        }

        .box:hover .pic::after{
            opacity: 1;
            /* 由于层叠性原因，需要加上translate(-50%,-50%) */
            transform: translate(-50%,-50%) scale(1);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="./images/party.jpeg" alt="">
        </div>
        <p>【和平精英】”初火“ 音乐概念片：四圣觉醒......</p>
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

3. 渐变

  • 定义：多个颜色逐渐变化的视觉效果

  • 作用：设置盒子的背景

  • 语法

    • background-image: linear-gradient(
                颜色1,
                颜色2,
                ....,
                颜色n
            );

案例

<!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 200px;
            height: 200px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.7)
            );
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • 效果图

在这里插入图片描述

凌歆
关注
专栏目录
HTML和Css的学习
SYX_lh的博客
10-19 4226
学习HTML和Css
html+css学习第五天（页内跳转、表单）
And_End的博客
07-18 918
表单的主要知识
网页制作基础学习——HTML+CSS常用代码
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
HTML5+CSS3学习笔记第七天
weixin_72043867的博客
08-05 1000
定位（绝对定位、相对定位、固定定位），CSS精灵，字体图标icon，CSS修饰属性（过渡、透明度、光标）
VS code-HTML与CSS基础学习与运用Week02
2301_80216014的博客
12-14 1367
CSS指的是层叠样式表（Cascading Style Sheets），是一种表现HTML或XML等文件样式的计算机语言，可以静态修饰网页和脚本语言，动态地对网页各元素进行格式化，还能够对网页中元素位置的排版进行像素级精确控制，具有丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩等特点。简单来说，就是只改变网页的静态表现。CSS规则集（rule-set）由选择器和声明块组成：p {color:red;
制作一个简单HTML个人网页网页（HTML+CSS）
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
html+css学习第二节
m0_74110356的博客
10-27 1511
html 和css学习第二节
HTML&CSS学习总结
autismhealer的博客
07-09 976
这学期新学习
HTML总结&CSS学习总结
m0_65791148的博客
06-21 1570
HTML总结&CSS学习总结
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 59万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
html与css学习第8天的精灵图
03-06
在HTML和CSS的学习过程中，了解并熟练运用精灵图是非常关键的一步。 在前端开发中，HTTP请求是影响页面加载速度的重要因素。每个图像文件都需要单独的HTTP请求，当页面中包含大量小图标时，加载时间会显著增加。...
Head First HTML与CSS 第2版【高清】带书签pdf
05-16
《Head First HTML与CSS》是初学者学习网页制作的优秀教材，第二版更是对原本的内容进行了更新和优化，以适应不断发展的Web技术。这本书以其独特的视觉设计和易于理解的讲解方式，深受读者喜爱。现在，你拥有的是一...
Head First HTML与CSS 第二版 源码打包
07-01
《Head First HTML与CSS》是学习网页制作的经典教材，第二版更是对原有的内容进行了更新和完善。这个源码打包包含了书中各个章节的实例代码，旨在帮助读者更直观地理解和实践HTML和CSS的基础及进阶概念。以下是对每...
html5+css3 学习效果资料以及相关亮眼的css+html 代码
11-21
为了学习和实践这些技术，"html5-css3-master"这个压缩包可能包含了各种示例代码、教程文档和项目实例，你可以通过解压并分析这些文件，加深对HTML5和CSS3的理解，提升自己的前端开发技能。不断探索和实践，将使你在...
html TAB切换按钮变色、自动生成table
最新发布
TrueLink的博客
09-24 510
/ 为当前点击的按钮添加.active-tab类。/* 文本颜色变为白色，以便在蓝色背景上可见 */// 移除所有按钮的.active-tab类。/* 鼠标悬停时显示手指形状 */// 动态生成选项卡头部和内容。// 动态生成选项卡头部和内容。/* 选中时背景色变为蓝色 */// 默认显示第一个选项卡的内容。/* 增加内边距以便点击 */// 显示对应的选项卡内容。/* 初始背景色透明 *//* 添加一些间隔 */// 更多数据...// 更多数据.../* 简单的样式 */
python：基于django的html二维码页面生成功能页面
我是你大爷
09-23 613
这里给出一个基于django的html二维码页面生成功能页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能（包含无限扩展内容框生成功能）。
python：基于django的html订单提交页面
我是你大爷
09-23 735
这里给出一个基于django的html订单提交页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能。
HTML粉色烟花秀
兔子王
09-21 7809
HTML语言实现的粉红色跨年烟花秀的完整代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值