如何定义自己的宽度来fixed定位 不直接依赖浏览器的窗口

原创 1028490987 随笔 HTML CSS 116阅读 2018-01-26 17:42:19 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>顶部导航栏固定</title>
<style>

  • {
    padding: 0;
    margin: 0;
    }
        body {
            position: relative;
        }
    
        .header {
            width: 100%;
            height: 60px;
            background: black;
            position: fixed;
            z-index: 999;
        }
    
        .nav {
            width: 80%;
            background: #008000;
            height: 60px;
            position: absolute;
            left: 10%;
            top: 0;
        }
    
        .left_box {
            width: 10%;
            height: 60px;
            background: white;
        }/*相对于最近relative定位的父级(body)*/
        .right_box {
            width: 10%;
            height: 60px;
            background: white;
            position: absolute;
            top: 0;
            right: 0;
        }/*相对于最近relative定位的父级(body)*/
    
        .container {
            width: 80%;
            margin: 0 auto;
            height: 600px;
            background: #FFC0CB;
        }
    
        .container01 {
            width: 80%;
            margin: 0 auto;
            height: 600px;
            background: #5580FB;
        }
    
        .container02 {
            width: 80%;
            margin: 0 auto;
            height: 600px;
            background: #00CECE;
        }
    
        .nav {
            width: 80%;
            float: left;
            height: 60px;
        }
    
        .nav ul li {
            list-style-type: none;
            float: left;
            line-height: 60px;
            text-align: center;
            width: 100px;
        }
    
        .nav ul li a {
            color: #ffffff;
            text-decoration: none;
            display: block;
        }
    
        .nav>ul>li:hover {
            background: #00cece;
        }
    </style>

    </head>
    <body>
    <div class="header">
    <div class="left_box"></div>
    <div class="nav">
    <ul>
    <li>
    <a href="">首页</a>
    </li>
    <li class="l1">
    <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 class="right_box"></div>
    </div>
    <div class="container">
    </div>
    <div class="container01">

    </div>
    <div class="container02">
    
    </div>

    </body>

</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复