首页 > 软件开发 > HTML >

HTML中浮动效果是怎么做的

来源:互联网 2023-03-16 19:19:39 版权归原作者所有,如有侵权,请联系我们

在网上看到的横排的几个框是如何做到的呢,可以使用浮动的效果实现。IsN办公区 - 实用经验教程分享!

工具/原料

  • 华为MateBook D
  • Windows 10 10.3.3
  • DW2019

方法/步骤

  • 1

    打开代码软件后,在body中建立了几个h2标签,如图IsN办公区 - 实用经验教程分享!

    HTML中浮动效果是怎么做的IsN办公区 - 实用经验教程分享!

  • 2

    然后对h2添加css样式,设置width值和height值,并设置一个显示背景h2{width:150px;height:100px;background-color:greenyellow;}IsN办公区 - 实用经验教程分享!

    HTML中浮动效果是怎么做的IsN办公区 - 实用经验教程分享!

  • 3

    当在预览效果时,因为h2是块状标签所以现在显示的是直排的块状IsN办公区 - 实用经验教程分享!

    HTML中浮动效果是怎么做的IsN办公区 - 实用经验教程分享!

  • 4

    如果想要将直排的变为横排的形状,就需要对其添加float:left,都同时向左浮动IsN办公区 - 实用经验教程分享!

    HTML中浮动效果是怎么做的IsN办公区 - 实用经验教程分享!

  • 4本页面未经许可获取自百度经验
  • 5

    这样这四个图形就会按照左侧排列的方式排列IsN办公区 - 实用经验教程分享!

    HTML中浮动效果是怎么做的IsN办公区 - 实用经验教程分享!

  • 6

    因为这四个图形紧挨着影像视觉,所以对每个h2添加个外边框距离,这样就可以完美看到每个图形了。IsN办公区 - 实用经验教程分享!

    HTML中浮动效果是怎么做的IsN办公区 - 实用经验教程分享!

  • 7

    如图所示,浮动后的效果。IsN办公区 - 实用经验教程分享!

    HTML中浮动效果是怎么做的IsN办公区 - 实用经验教程分享!

  • 注意事项

    • 如果对您有帮助,请左侧点赞哦!

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


    标签:

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