首页 > 软件开发 > HTML >

HTML/CSS怎么固定DIV在顶部、底部

来源:互联网 2023-03-16 19:17:50 305

我们在开发网页的时候,经常会有这么一个需求,就是把DIV固定在某个位置,例如头部或者底部等等,下面小编就用一个小小的案例为大家演示如何固定位置!kMy办公区 - 实用经验教程分享!

HTML/CSS怎么固定DIV在顶部、底部kMy办公区 - 实用经验教程分享!

工具/原料

  • 技术:HTML5/CSS3
  • 工具:HbuilderX

方法/步骤

  • 1

    为了方便演示,首先我们新建一个【HTML文档】kMy办公区 - 实用经验教程分享!

    HTML/CSS怎么固定DIV在顶部、底部kMy办公区 - 实用经验教程分享!

  • 2

    编写HTML部分代码【创建一个固定的盒子】kMy办公区 - 实用经验教程分享!

    HTML/CSS怎么固定DIV在顶部、底部kMy办公区 - 实用经验教程分享!

  • 3

    编写CSS样式【设置盒子的样式及固定效果】kMy办公区 - 实用经验教程分享!

    HTML/CSS怎么固定DIV在顶部、底部kMy办公区 - 实用经验教程分享!

  • 3相关内容未经授权抓取自百度经验
  • 4

    打开浏览器,滚动页面测试【固定效果】kMy办公区 - 实用经验教程分享!

    HTML/CSS怎么固定DIV在顶部、底部kMy办公区 - 实用经验教程分享!

  • 5

    核心代码:kMy办公区 - 实用经验教程分享!

    div class="top">我是固定的/div>kMy办公区 - 实用经验教程分享!

    .top{position: fixed; left: 0; top: 0; z-index: 999;}kMy办公区 - 实用经验教程分享!

    HTML/CSS怎么固定DIV在顶部、底部kMy办公区 - 实用经验教程分享!

  • 方法总结:

  • 1

    1、新建一个【HTML文档】kMy办公区 - 实用经验教程分享!

    2、编写HTML【创建一个固定的盒子】kMy办公区 - 实用经验教程分享!

    3、编写CSS样式【设置盒子的样式】kMy办公区 - 实用经验教程分享!

    4、打开浏览器,滚动页面测试【固定效果】kMy办公区 - 实用经验教程分享!

  • 注意事项

    • tips1:本教程说的比较详细,您是大神就直接看步骤五就行了!
    • tips2:本教程由小编原创,帮到您了就点个赞哈!

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


    标签: HTMLCSS网站

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