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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值