首页 > 软件开发 > HTML >

设置div距离顶部距离教程

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

div是HTML里面的重要标签,使用率非常高,几乎每个网站都要使用,表示区域的意思,如果要设置div距离顶部的距离那么我们需要用到CSS语言,因为CSS是负责装饰网站的。yzb办公区 - 实用经验教程分享!

设置div距离顶部距离教程yzb办公区 - 实用经验教程分享!

工具/原料

  • windows 7
  • sublime text 3
  • chrome浏览器

方法/步骤

  • 1

    打开编辑器,新建一个HTML文档。yzb办公区 - 实用经验教程分享!

    设置div距离顶部距离教程yzb办公区 - 实用经验教程分享!

  • 2

    新建一个CSS文档,并且进行关联。yzb办公区 - 实用经验教程分享!

    设置div距离顶部距离教程yzb办公区 - 实用经验教程分享!

  • 3

    这里我们创建一个div,并且设置颜色和大小。yzb办公区 - 实用经验教程分享!

    设置div距离顶部距离教程yzb办公区 - 实用经验教程分享!

  • 4

    我们可以用position: relative来进行偏移顶部。yzb办公区 - 实用经验教程分享!

    设置div距离顶部距离教程yzb办公区 - 实用经验教程分享!

  • 5

    也可以用position: absolute,效果是一样的。yzb办公区 - 实用经验教程分享!

    设置div距离顶部距离教程yzb办公区 - 实用经验教程分享!

    设置div距离顶部距离教程yzb办公区 - 实用经验教程分享!

  • 5相关内容未经许可获取自百度经验
  • 6

    当然还可以用margin-top: 20px来进行偏移。yzb办公区 - 实用经验教程分享!

    设置div距离顶部距离教程yzb办公区 - 实用经验教程分享!

  • 注意事项

    • tips: 注意三个方法的优缺点。

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


    标签: HTMLCSS

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