HTML中浮动效果是怎么做的

 时间:2026-04-22 09:52:54

1、打开代码软件后,在body中建立了几个h2标签,如图

HTML中浮动效果是怎么做的

2、 然后对h2添加css样式,设置width值和height值,并设置一个显示背景 h2{width:150px;height:100px;background-color:greenyellow;}

HTML中浮动效果是怎么做的

3、当在预览效果时,因为h2是块状标签所以现在显示的是直排的块状

HTML中浮动效果是怎么做的

4、如果想要将直排的变为横排的形状,就需要对其添加float:left,都同时向左浮动

HTML中浮动效果是怎么做的

5、这样这四个图形就会按照左侧排列的方式排列

HTML中浮动效果是怎么做的

6、 因为这四个图形紧挨着影像视觉,所以对每个h2添加个外边框距离,这样就可以完美看到每个图形了。

HTML中浮动效果是怎么做的

7、如图所示,浮动后的效果。

HTML中浮动效果是怎么做的

  • 怎样让html中的文字垂直水平居中显示
  • html字间距怎么设置
  • html设置网页背景图片全屏
  • 如何在HTML中插入图片
  • 实现整个html居中最简单方法
  • 热门搜索
    腐竹怎么做好吃 蝴蝶结怎么打 狗肉火锅的做法 社保卡怎么办理 冬笋的做法 酸菜鱼的做法 咸菜的做法 冬瓜汤的做法 紫米粥的做法 早餐食谱简单快速做法