html+css制作页面右下方固定按钮

 时间:2026-04-21 16:01:35

1、①先创建中间的模拟网页的内容

用几个颜色不一样的div即可,代码如图

html+css制作页面右下方固定按钮

html+css制作页面右下方固定按钮

2、运行查看中间模拟内容,如图

html+css制作页面右下方固定按钮

3、②创建ul标签,并设置其样式

其固定的关键属性就是“ position:fixed ”

html+css制作页面右下方固定按钮

html+css制作页面右下方固定按钮

4、运行查看固定效果。滚动鼠标时,ul都被固定于同一个位置,不随着滚动条的滚动而滑动

html+css制作页面右下方固定按钮

5、③创建ul中的li和a标签,用于制作每一个按钮,并设置其样式

html+css制作页面右下方固定按钮

html+css制作页面右下方固定按钮

6、运行查看li的样式和位置

html+css制作页面右下方固定按钮

7、④复制li和a,并定义其样式

此处li数量可根据自己要求而定,样式也可根据自己网页主题设定

此处只是为了尽可能还原预期样式,从而分别设置了两个颜色

html+css制作页面右下方固定按钮

html+css制作页面右下方固定按钮

8、运行查看最终完成效果

html+css制作页面右下方固定按钮

  • Visual studio code 打印美丽高颜值的代码
  • js怎么把DIV的背景图片给取消
  • 如何在IntelliJ IDEA中导入mysql的驱动jar包
  • 鼠标放在div上延迟改变宽度效果
  • Mysql创建数据库及表的方法-可视化软件Navicat
  • 热门搜索
    包子馅怎么做好吃 腊鱼怎么吃 身份证丢了怎么坐飞机 写作业慢怎么办 京酱肉丝怎么做 胎儿偏小两周怎么办 项目简介怎么写 简历中的自我评价怎么写 维娜化妆品怎么样 clock怎么读