网站右侧悬浮代码教程

 时间:2024-10-21 08:33:27

1、打开sublime text3编辑器,新建一个HTML文档,并且创建框架。

网站右侧悬浮代码教程

2、<ul><li>悬浮框A</li><li>悬浮框B</li><li>悬浮框C</li></ul>这里用ul,li来创建三个列表。

网站右侧悬浮代码教程

3、创建css文档,并且与html文档相关联。

网站右侧悬浮代码教程

4、* { margin: 0; padding: 0;}消除格式,这样可以重新定义样式。

网站右侧悬浮代码教程
网站右侧悬浮代码教程

5、ul li { width: 100px; height: 100px; color: red; background-color: grey; text-align: center;}设置一下悬浮框的基本样式。

网站右侧悬浮代码教程
网站右侧悬浮代码教程

6、ul { position: fixed; right: 0; top: 50px;}给ul加上样式,使得整个列表都固定位置,然后我们滚动鼠标就能发现固定悬浮在右边了。

网站右侧悬浮代码教程
网站右侧悬浮代码教程
网站右侧悬浮代码教程

7、display: block;消除前面的圆点。margin-top: 15px;margin-right: 30px;使得悬浮框各自有空间,这样可以区分各自,并且离右边一点距离。

网站右侧悬浮代码教程
网站右侧悬浮代码教程
  • 如何让图片在div中居中显示
  • css怎么让一个图层覆盖在另一个上
  • link标签怎么用
  • HTML怎么实现网页跳转
  • 如何让ul中的li居中
  • 热门搜索
    小学健康教育手抄报 三年级下册手抄报大全 法制安全手抄报图片 关于新年的手抄报图片 孝行雅行我先行手抄报 我爱你中国手抄报 诚信守法手抄报 我爱我校手抄报 关于桥的手抄报图片 争做文明学生手抄报