菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 2022-10-18解婵-css [打印本页]

作者: 美什么鱼 时间: 2022-10-25 19:34
标题: 2022-10-18解婵-css
一、学习内容
CSS其他技巧
1、精灵图
为什么要用精灵图
多张小的图片整合成一张大的图片给返回给浏览器，避免重复请求，减轻服务器压力
精灵图的使用步骤
1、获取所需要的小图标大小
2、设置一个盒子来放我们需要的小图片，尺寸和我们做需要的小图标大小一致
3、background-image：URL（）；将背景引入盒子
4、利用background-position来调整背景图片的位置，已显示我们所需要的图标，注：X和Y轴的像素值一般都是负值，最大是0
输入框删除外框：
代码：border:0;
删除内边框： outline: none;
2、鼠标的样式
属性样式
cursor：default 默认的鼠标样式
cursor：pointer 小手鼠标样式
cursor：text 输入文本时的鼠标样式
cursor：move 鼠标拖动时的样式
cursor：no-allowed 禁止的鼠标样式
3、文本的上下对齐方式
vertical-align目的：为了让行内元素或者行内块元素按照不同的方式来进行对齐
文字的各个线说明
顶线、中线、基线、底线
vertical-align: baseline；基线对齐（默认）
vertical-align: bottom; 底线对齐
vertical-align: middle; 中线对齐
vertical-align: top; 顶线对齐

备注：
图片的地步有空白的原因：图片默认和文字保持基线对齐，所以下方空白是为了给文字底部预留的空间
想让图片与文字沿中线对齐，可以直接使用verticalalign：middle；来实现
CSS三角制作
制作三角的步骤：
1、设置边框的宽度，样式、颜色设置为透明
2、将所需要的边框亚瑟设置为所需要的即可
CSS省略号制作：
步骤：
1、将文字强制一行显示
2、将超出盒子的文字给切掉
3、姜切掉的文字用省略号来代替
CSS滑动门制作
步骤：
1、a标签来实现精灵图左边
2、span标签来实现精灵图的右边
3、指定padding来城开盒子

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)