资讯专栏INFORMATION COLUMN

css基础组件库(兼容低版本)

Salamander / 1719人阅读

摘要:图标跟文字混排分享截图注意父容器的值与图标的高度相等,另保持设置图标的的值为。上下垂直居中,需要兼容低版本的浏览器时用比用要好很多。

1、图标跟文字混排
html


css

.link{
    width: 92px;
    border: 1px solid #0f0;
    line-height: 18px;
}
.icon{
    display: inline-block;
    *zoom: 1;
    vertical-align: bottom;
}
.wyyx{
    width: 18px;
    height: 18px;
    background: url(http://p2.qhimg.com/t0116804ffa3cc8a59f.png) no-repeat;
}

截图:

注意:

父容器的line-height值与图标的高度相等,另保持设置图标的vertical-align的值为bottom。

2、上下垂直居中,需要兼容低版本的浏览器时用padding比用line-height要好很多。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111101.html

相关文章

  • 关于CSS Reset 那些事(四)之 构架CSS基础样式

    摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    mj 评论0 收藏0
  • 关于CSS Reset 那些事(四)之 构架CSS基础样式

    摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    Yu_Huang 评论0 收藏0
  • 【译】编写更好的CSS必备的40个工具

    摘要:一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的,并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站,并想要网站正常运行在低版本的上,可以考虑。 众所周知,CSS是非常棒的,它使网站看起来很漂亮,可以为网站添加动画,并让呈现和内容分离。去了解CSS的一切是非常难做到的,它只会变得更加困难,因为我...

    moven_j 评论0 收藏0
  • 前端开发知识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<