固定定位简单实例

最新推荐文章于 2023-04-12 12:40:12 发布

lkktyz

最新推荐文章于 2023-04-12 12:40:12 发布

阅读量341

点赞数 1

文章标签：实例固定定位

本文链接：https://blog.csdn.net/lkktyz/article/details/78093212

版权

固定定位

简单的固定定位实例

固定定位样图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                line-height: 50px;
            }
            #dh{
                border: 1px solid #000000;
                width: 100%;
                height: 50px;
                background-color: #FFFFFF;

                position: fixed;/*固定定位*/
                top: 0px;

            }

            #dh2{
                border: 1px solid #000000;
                background-color: #FFFFFF;
                width: 100px;
                height: 300px;

                position: fixed;
                left: 300px;
                top: 300px;
            }

            a{
                display: block;
                margin: 20px;
            }
        </style>
    </head>
    <body>

        <div id="dh2">
            <a href="#nz">女装</a>
            <a href="#man">男装</a>
            <a href="#dq">电器</a>
            <a href="">返回顶部</a>
        </div>
        <font color="red">这里是顶部</font>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <a name="nz"></a>
        <font color="red">这里是女装</font>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <a name="man"></a>
        <font color="red">这里是男装</font>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <a name="dq"></a>
        <font color="red">这里是电器</font>

    </body>
</html>