css进阶（1）

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 元素顶端与行中最低顶端对齐