CSS固定定位生成网页顶部导航栏实例

最新推荐文章于 2024-01-01 14:36:58 发布

小小少年eason

最新推荐文章于 2024-01-01 14:36:58 发布

阅读量1.9k

点赞数

分类专栏：前端网页

本文链接：https://blog.csdn.net/weixin_39872341/article/details/99854146

版权

前端网页专栏收录该内容

65 篇文章 0 订阅

订阅专栏

固定定位 position:fixed

固定定位是相对与浏览器窗口来定位, 就算页面滚动, 固定定位元素的位置不会变

固定定位元素脱离了标准文档流, 会雅盖主标准文档流里的元素

固定定位元素不再占用空间

<html>

<head>
    <style type="text/css">
        p.one {
            position: fixed;
            left: 5px;
            top: 5px;
        }

        p.two {
            position: fixed;
            top: 30px;
            right: 5px;
        }
    </style>
</head>

<body>

    <p class="one">一些文本。</p>
    <p class="two">更多的文本。</p>

</body>

</html>

顶部导航栏实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .nav{
            width:100%;
            height:60px;
            background-color: cornflowerblue;
            /*固定定位*/
            position:fixed;
            left:0px;
            top:0px;
        }
        .nav .inner_c{
            width:1000px;
            height: 60px;
            margin:0px auto;

        }
        ul{
            list-style: none;
        }
        ul li{
            float:left;
            width:100px;
            height:60px;
            line-height: 60px;
            text-align: center;
        }
        ul li a{
            display: block;
            width:100px;
            height: 60px; 
            text-decoration: none;
            color:white;
            font-weight: bold;
        }
        ul li a:hover{
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="inner_c">
            <ul>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
            </ul>
        </div>
    </div>
    <img src="https://img-blog.csdnimg.cn/img_convert/4cfb67d35420c4045a9eb645d699c7c3.png">
    <img src="https://img-blog.csdnimg.cn/img_convert/4cfb67d35420c4045a9eb645d699c7c3.png">
    <img src="https://img-blog.csdnimg.cn/img_convert/4cfb67d35420c4045a9eb645d699c7c3.png">
    <img src="https://img-blog.csdnimg.cn/img_convert/4cfb67d35420c4045a9eb645d699c7c3.png">
    <img src="https://img-blog.csdnimg.cn/img_convert/4cfb67d35420c4045a9eb645d699c7c3.png">
</body>
</html>

小小少年eason

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS固定定位生成网页顶部导航栏实例

固定定位 position:fixed固定定位是相对与浏览器窗口来定位, 就算页面滚动, 固定定位元素的位置不会变固定定位元素脱离了标准文档流, 会雅盖主标准文档流里的元素固定定位元素不再占用空间<html><head> <style type="text/css"> p.one { position:...
复制链接

扫一扫