精灵图
CSS精灵技术:能有效地减少服务器接收和发送请求的次数,提高页面的加载速度。
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。(主要针对小的背景图片,因为其他图片可能经常更换)
通过background-position移动位置,使用需要的图片。(与常规坐标不同,坐标正方向为x往右,y往下,所以精灵图的使用一般为负值)
需要精确的测量,因为需要精确的移动坐标。
.box {/*1.设置一个装图片的盒子,大小为需要显示的图片大小*/width: 60px;height: 60px;margin: 100px auto;/*2.装入图片,将图片向左(负值)移动180px显示需要的图片*/background: url(images/sprites.png) no-repeat -180px 0;}
字体图标
主要用于显示网页中通用、常用的一些小图标,是对于工作中图标部分技术的提升和优化。
看起来是图标,本质是文字,可以变换大小、颜色、边距。
字体图标是一些网页常见的小图标,我们直接网上下载即可。
下载网页:
icomoon字库 Icon Font & SVG Icon Sets ❍ IcoMoon
阿里iconfont字库 iconfont-阿里巴巴矢量图标库
把下载包里面的fonts文件夹放入页面根目录下
/* 字体声明,下载的文件夹中有 */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?p4ssmb');src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?p4ssmb') format('truetype'),url('fonts/icomoon.woff?p4ssmb') format('woff'),url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}
字体声明过后,使用span标签引入字体图标。去安装包中的html复制字体图标的方块使用。
通过修改包裹图标的span的样式来修改字体图标的样式。
span {font-family: 'icomoon';/*必写*/font-size: 20px;color: green;}
图标的追加
在网页中选择import icons在selection.json中添加。
CSS三角
制作一个大小为0,但边框有宽度的盒子,设置其中一边有颜色其余三边透明,则可以生成一个三角形。(为盒子的四边都是三角形,拼起来是正方形)
/*一个底边在上,颜色为红色的三角形*/.box{width: 0;height: 0;border: 10px solid transparent;border-top-color: red;/*为浏览器兼容性*/line-height: 0;font-size: 0;}
三角形的大小取决于边框的粗细。
若需要梯形,可以使用方形盒子加三角。
直角三角形:
1.去掉border-bottom和border-left
2.将border-top设置为原来的两倍
则可以得到两个直角三角形
将其中一个改为透明色就可以得到一个直角三角形。
用户界面样式
鼠标样式
在对象上移动的鼠标指针采用的光标形状。
格式: cursor: pointer;
default箭头,默认pointer小手move 移动text 文本not-allowed 禁止
表单轮廓线
给表单添加outline: 0;或者outline: none;样式之后,就可以去掉默认的蓝色边框。
文本域防拖拽
给文本域添加resize: none;可以禁止文本域的右下角拖拽放大。
vertical-align属性应用
使用场景:常用于设置图片或者表单(行内块元素)和文字垂直对齐。(设置元素的垂直对齐方式,但只针对行内元素或行内块元素有效)
属性:baseline(基线对齐,默认)、top、middle(中线对齐,常用)、bottom
span {vertical-align: middle;}
图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。此时就可使用vertical-align消除空隙。(块级元素没有这种空隙,所以也可以通过转换为块级元素来消除)
文本溢出显示省略号
单行文本
步骤:
强制一行内显示文本 white-space: nowrap; (默认为normal,会自动换行)
超出的部分隐藏 overflow: hidden;
文字用省略号替代超出的部分 text-overf1ow : ellipsis;
多行文本
有较大兼容性问题,适合于webKit浏览器或移动端。
overflow : hidden;text-overflow: ellipsis;/*弹性伸缩盒子模型家*/display: -webkit-box;/*限制在一个块元素显示的文本的行数*/-webkit-line-clamp: 2;/*设置或检索伸缩盒对象的子元素的排列方式*/-webkit-box-orient : vertical;
后端人员可以设置显示多少个字,操作更简单。
布局技巧
margin负值
通过设置margin负值可以使盒子反方向运动,消除盒子重叠时多余的border像素。
问题:当消除多余像素后,盒子边框重叠,鼠标经过边框变色效果只能变三条边,如何解决?
解决方法:鼠标经过某个盒子的时候,提高当前盒子的层级(如果没有有定位,则加相对定位,如果盒子都有定位,则加z-index )
文字围绕浮动元素
给图片增加浮动,文字会围绕图片不会被图片盖住。
若想调整文字和图片的间隙,只需调整图片的margin。
CSS初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾刘览器的兼容,我们需要对CSS初始化。
例如设置* {margin:0;padding:0;}、链接标签无下划线、li标签无小圆点等。
字体的书写方式用Unicode编码代替。