养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

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

时间:2024-10-06 12:22:39

如何制作如下图样式的固定按钮

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

工具/原料

电脑

Hbuilder和Chrome

方法/步骤

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、复制l坡纠课柩i和a,并定义其样式此处li数量可根据自己要求而定,样式也可根据自己网页主题设定此处只是为了尽可能还原预期样式,从而分别设置了两个颜色

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

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

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

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

© 一点知识