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]元素与窗口同步
  • 热门搜索
    拉萨有什么好玩的 什么是娃娃脸 孜孜不倦的意思 什么是清宫 地摊卖什么好 乙酰螺旋霉素片的作用 混合痔用什么药 别来无恙是什么意思 不了了之什么意思 天猫和淘宝有什么区别