网站右侧悬浮代码教程

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;

使得悬浮框各自有空间，这样可以区分各自，并且离右边一点距离。