html css图标怎么跟文字并排,CSS高级技巧:精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...

CSS高级技巧目录

1、精灵图

使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术。核心原理就是将小图片整合到一张图里,这样浏览器只需要发送一次请求到服务器就可以了。

属性:background-position

使用原理:先量好背景图片的宽和高,然后创建一个盒子,大小和背景图片一样,插入整张精灵图到盒子中,图片默认都是在盒子的左上角,再看需要的背景图片在X和Y轴的哪个位置,调整好位置即可显示出来。

精灵图属性

2、字体图标

优点~

字体图标的优点

字体图标使用方法

以icomoon图库为例,挑选需要的图标下载,解压,引入html文件使用。

注意点:1、fonts文件夹需要和html文件放在一起

2、把解压出来的style.css里的样式复制到html文件style里

3、复制解压出来的html里面图标对应的方框,到需要添加字体图标的地方

4、字体图标的字体需要和样式里的字体一致

字体图标使用步骤

字体图标使用步骤

字体图标使用步骤

字体图标更新追加方法

字体图标更新追加

阿里巴巴矢量图标库

1.搜索--加入购物车--添加至项目---下载到本地--解压,挑选字体文件格式(四种:eot/svg/ttf/woff,建议放入单独的字体文件夹 )与样式文件

iconfont.css(head中引入)---若将字体文件与样式文件单独放,在css文件中修改字体src地址,改成对应的;

2.写入公共样式.iconfont,使用i标签插入; 通过class名引入到body中,class名称为iconfont.css中对应图标的class名;

举例

CSS三角做法

4、CSS用户界面样式

(1)更改用户的鼠标样式;(2)表单轮廓;(3)防止文本域拖拽

(1)更改用户的鼠标样式cursor

鼠标样式cursor

(2)去除表单的默认蓝色轮廓outline

input : {outline:none或者0}

表单蓝色轮廓线

(3)防止拖拽文本域resize

textarea : {resize:none或者0}

文本域拖拽

5、vertical-align属性应用(设置元素垂直对齐,行内块)

设置元素垂直对齐

6、溢出文字省略号做法

单行文本省略号

单行文本省略号

多行文本省略号(了解,兼容性差,更推荐让后台做)

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

white-space: normal !important;

word-wrap: break-word;

7、常见布局技巧

(1)margin负值运用,避免边框重叠变粗,如边框为1px,则margin-1px

margin负值运用

如果需要鼠标经过时改变边框颜色,先伪类颜色,然后加上一句提升层级,相对定位(其他定位不保留位置,会影响后面盒子)或者z-index,因为前面设置了margin负值,压住了盒子一个边框,所以需要加一句提升层级,使得鼠标经过某个盒子时,提高它的优先级完整显示出来。

(2)文字围绕浮动

利用浮动只会压住标准流盒子,不会压住里面的内容,可以布局文字围绕效果。先设置一个大盒子,里面左右一个盒子放图片和文字,给图片的盒子设置大小并浮动,文字自然环绕。

(3)行内块运用

行内元素,行内块元素可以用text-align:center水平居中

行内块运用

3、三角强化运用

三角强化运用

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

white-space: normal !important;

word-wrap: break-word;

你可能感兴趣的:(html,css图标怎么跟文字并排)