htmlayout设计ui 基础篇:[11]super和sub使用

 时间:2024-10-27 14:19:27

1、第一,我们先来看下 x^2这样的结构它是由X和2组成的,也就是说1、这是2个平行元素块2、把和X同样样式的,2大小变小,而且垂直放到上面就可以了

2、第二,我们先来把简单的平行样式搞定<div><span>X</span><span>2</span></div>这时候2个元素平行显示一行

htmlayout设计ui 基础篇:[11]super和sub使用

3、第三,我们查下对应的CSS,了解到这种结构可以用vertical-align:|sub|super1、代码如下:<div><span>X</span><span style="vertical-align:super;">2</span></div>效果如下:

htmlayout设计ui 基础篇:[11]super和sub使用

4、代码如下:<div><span>X</span><span style="vertical-align:sub;">2</span></div>效果如下:

htmlayout设计ui 基础篇:[11]super和sub使用

5、你们可以根据自己的实际需要,调整大小,颜色和元素之间的字间距,这些都是CSS中可以调整的

  • htmlayout设计ui 基础篇:[15]svg图使用
  • htmlayout设计ui 基础篇:[10]rotate的使用
  • htmlayout设计ui 基础篇:[19]input框自定义
  • htmlayout设计ui 基础篇:[20]button垂直对齐
  • htmlayout设计ui 基础篇:[13]元素与窗口同步
  • 热门搜索
    发票丢失证明怎么写 胸前长痘痘是什么原因 哈弗m4怎么样 如何手机赚钱 say是什么意思 肺宁颗粒效果怎么样 孩子早恋家长该怎么办 如何提升服务质量 3d touch怎么用 描写儿童生活的古诗