CSS学习第六天

最新推荐文章于 2024-07-18 14:29:38 发布

是桔子很甜

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量69

点赞数

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

本文链接：https://blog.csdn.net/Auroriiina/article/details/123919912

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS第六

目标

目标

在这里插入图片描述

精灵图

为什么需要精灵图

为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites CSS雪碧）
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

精灵图的使用

1.精灵技术主要针对于背景图片的使用。就是把多个小背景
2.这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position
4.移动的距离就是这个目标图片的X和y坐标。注意网页中的坐标有所不同
5.因为一般情况下都是往上往左移动，所以数值是负值
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

精灵图案例

拼出自己的名字

<!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>拼出自己的名字</title>
    <style>
        span {
            /* 转换为行内块元素 */
            display: inline-block;
            background: url(abcd.jpg) no-repeat;
        }

        .a {
            width: 110px;
            height: 110px;
            background-position: 0 -12px;
            /* background-position: 0 -12px; */

        }

        .u {
            width: 111px;
            height: 113px;
            background-position: -477px -422px;
        }

        .r {
            width: 111px;
            height: 113px;
            background-position: -134px -412px;
        }

        .o {
            width: 111px;
            height: 113px;
            background-position: -372px -277px;
        }
    </style>
</head>

<body>
    <span class="a"></span>
    <span class="u"></span>
    <span class="r"></span>
    <span class="o"></span>
    <span class="r"></span>
    <span class="a"></span>
</body>

</html>

在这里插入图片描述

字体图标

字体图标的产生

字体图标使用场景：主要用于显示网页中通用，常用的一些小图标

字体图标iconfont 可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

字体图标的优点

轻量级
灵活性
兼容性

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此可以分为
1.字体图标的下载
2.字体图标的引入
3.字体图标的追加

icommoon字库网站
阿里iconmoon网站

font文件放在html同目录下

CSS三角

 width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;

 width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;

CSS用户界面样式

什么是界面样式

所谓界面样式，就是更改一些用户操作样式，以提高更好的用户体验
1.更改用户的鼠标样式
2.表单轮廓
3.防止表单域拖拽

鼠标样式cursor

在这里插入图片描述

轮廓线online

<!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>用户界面样式——表单轮廓和防止拖拽文本域</title>
    <style>
        input,
        textarea {
            /* 取消表单轮廓 */
            outline: none;
        }

        textarea {
            /* 防止文本拖拽 */
            resize: none;

        }
    </style>
</head>

<body>
    <!-- 1.取消表单轮廓 -->
    <input type="text">
    <!-- 2.防止拖拽文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

</html>

vertical-align属性应用

使用场景：常用于设置图片或者表单（行内块元素）和文字垂直对齐
用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
在这里插入图片描述
解决图片底侧会有一个空白缝隙，原因是行内块元素会和文字基线对齐

溢出的文字省略号显示

单行文字溢出省略号显示

在这里插入图片描述

多行文字溢出省略号显示

在这里插入图片描述

常见布局技巧

在这里插入图片描述

CSS初始化

京东CSS初始化

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}
 
img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}
 
button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}
 
a {
    color: #666;
    text-decoration: none
}
 
a:hover {
    color: #c81623
}
 
button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
 
body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}
 
.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}
 
.clearfix {
    *zoom: 1
}

是桔子很甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习第六天

CSS第六目标精灵图为什么需要精灵图精灵图的使用精灵图案例字体图标字体图标的产生字体图标的优点目标精灵图为什么需要精灵图为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites CSS雪碧）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。精灵图的使用1.精灵技术主要针对于背景图片的使用。就是把多个小背景2.这个大图片也称为sprites精灵图或者雪碧图3.移动背景图片位置，此时可以使用backg
复制链接

扫一扫