css字体图标
字体图标使用:
1.把下载的fonts文件夹放到所需要的mtml的根目录下
2.去文件夹打开style.css文件把下面代码复制进来
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?pxxbbz');
src: url('fonts/icomoon.eot?pxxbbz#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?pxxbbz') format('truetype'),
url('fonts/icomoon.woff?pxxbbz') format('woff'),
url('fonts/icomoon.svg?pxxbbz#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
3.去文件夹打开demo.html,找到所需要的图标,复制后面的‘框框’然乎粘贴到标签中去
4.设置字体图标的字体,根据所在标签进行设置把 font-family: 'icomoon'; 复制进去,即可使用字体图标, 图标可以修改大小,和颜色。
--------------------下载图标的文件夹不要删除------------------------------
添加新图标:
1.去incomoon网站 点击左上角的 import lcoons按钮
2.选中第一次下载文件夹里的selection.json文件
3.正常选择图标下载,不会覆盖原有图标
4.把新文件夹里的替换掉原来的文件即可使用新图标
css精灵图
先建立一个盒子量好大小,利用background-position:x,y 来控制背景图片位置,让所需要的背景位置出现在盒子里面,上是负下是正 左是负右是正
css三角形
三角形制作
定义一个盒子,宽高都为0
定义一条边框,就会得到由四个三角形组成的正方形 ,然后把其余三天边框transparent,就得到一个三角形。
还可以修改边框的宽度来获取不同的三角形
css用户页面修改
不常用,很重要,容易忘
单行文字溢出显示省略号必须满足三点
1.强制一行内显示文本
white-space:nowrap (默认normal自动换行)
2.超出部分隐藏
overflow:hidden;
3.文字用省略号代替超出的部分
text-overflow:ellipsis;
多行文字溢出显示省略号:按顺序抄一下代码
verflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2; 这里2是第几行显示省略号
-webkit-box-orient:vertical;
取消input轮廓线
outline: none;
取消textarea轮廓线和禁止拖动
resize: none;
outline: none;
鼠标样式
<li style="cursor: default;">鼠标样式默认</li>
<li style="cursor: pointer;">鼠标样式小手</li>
<li style="cursor: move;">鼠标样式移动</li>
<li style="cursor:text;">鼠标样式文本</li>
<li style="cursor: not-allowed;">鼠标样式禁止</li>
vertical-align设置图片,表单,文字的垂直对齐, 只针对行内和行内块元素
baseline 默认,元素放在父元素的基线上
top 元素顶端与行内中最高元素顶端对齐
middle 在父元素的中部
bottom 元素顶端与行中最低顶端对齐