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

迈不过友情╰ 2021-10-19 10:12 425阅读 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>

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2NjR1d2dtb3hqMzBxajBiaGpyZi5qcGc][]

### 顶部导航栏实例 ###

<!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://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/BnSNEaficFAbAbJYFwdEziciaSOsbuD2yjicTxRthcMShOSnCcU6Dj06bbV4ibkfiaxibqC3fSAz3AcmmKLA9VPu3ErMg/640?wx_fmt=png">
        <img src="https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/BnSNEaficFAbAbJYFwdEziciaSOsbuD2yjicTxRthcMShOSnCcU6Dj06bbV4ibkfiaxibqC3fSAz3AcmmKLA9VPu3ErMg/640?wx_fmt=png">
        <img src="https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/BnSNEaficFAbAbJYFwdEziciaSOsbuD2yjicTxRthcMShOSnCcU6Dj06bbV4ibkfiaxibqC3fSAz3AcmmKLA9VPu3ErMg/640?wx_fmt=png">
        <img src="https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/BnSNEaficFAbAbJYFwdEziciaSOsbuD2yjicTxRthcMShOSnCcU6Dj06bbV4ibkfiaxibqC3fSAz3AcmmKLA9VPu3ErMg/640?wx_fmt=png">
        <img src="https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/BnSNEaficFAbAbJYFwdEziciaSOsbuD2yjicTxRthcMShOSnCcU6Dj06bbV4ibkfiaxibqC3fSAz3AcmmKLA9VPu3ErMg/640?wx_fmt=png">
    </body>
    </html>

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2Njdhbnhpb2NqMzFnajBvZWd6Yy5qcGc][]

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2NjdhdWN1cHBqMzFnbzBkendteS5qcGc][]

[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2NjR1d2dtb3hqMzBxajBiaGpyZi5qcGc]: /images/20211018/e53e7dd2821c428b8591fb05696bc99c.png
[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2Njdhbnhpb2NqMzFnajBvZWd6Yy5qcGc]: /images/20211018/3239f01e95b14c609cbc0d2372579612.png
[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc2NjdhdWN1cHBqMzFnbzBkendteS5qcGc]: /images/20211018/e8f0ee7612f04030bbf03c3f53e4abad.png