首页 > 软件开发 > HTML >

怎么敲出将图标和文字并排的代码

来源:互联网 2023-03-16 19:12:49 487

在网站看到有的图标和文字在一起排列,我们使用代码该如何做出来呢EkW办公区 - 实用经验教程分享!

怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

工具/原料

  • html

方法/步骤

  • 1

    如图,在打代码的软件中,建立一个基础 在一个大的div中包含图标div和文字div,分别添加不同的类名称EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 2

    然后添加图标图片内容,然后在样式中设置图片div的大小,并且图片跟着框大小相同EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 3

    打开预览效果,默认是图标在上面,然后下面是文字EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 4

    可以对图标和文字设置浮动效果EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 5

    设置浮动后就在一个横线上了EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 6

    对文字内容添加修饰,改变颜色,将文字在图形的中间对齐EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 7

    这时候的样式是这样的,中间隔开了一段距离EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 8

    为了更好的提现,可以对整个大div添加修饰,增加边框和宽度EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 9

    然后就可以看到图标被大框所包含了,如图所示EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 10

    在遇到多个的图标文字的时候,因为样式一样的,所以可以对main进行复制即可,然后更改里面的图片位置EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 11

    然后就会有种并排排列的图标了,如图所示,做这种效果的代码有很多种,看自己习惯使用哪种了。EkW办公区 - 实用经验教程分享!

    怎么敲出将图标和文字并排的代码EkW办公区 - 实用经验教程分享!

  • 11本页面未经许可获取自百度经验
  • 注意事项

    • 如果此经验对您有帮助,请左侧投票/关注,谢谢大家的支持^_^

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!EkW办公区 - 实用经验教程分享!


    标签: 软件HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码