web页头-CSDN博客

本文链接：https://blog.csdn.net/SY_mo/article/details/147386785

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页头</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 背景层 -->
    <div class="page-header-bg">
        <!-- 布局层 -->
        <div class="page-header-layout">
            <!-- 内容层 -->
            <div>logo</div>
            <div id="denglu">登录</div>
        </div>
    </div>
    <h2>网站首页</h2>

    <!-- 自定义登录弹窗 -->
     <!-- 背景层 -->
    <div class="login-box">
        <!-- 布局层 -->
        <div class="login">
            <div class="header">
                <span id="guanbi">[关闭]</span>
            </div>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

css

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    font-size: 62.5%;
}
html,body{
    width: 100%;
    height: 100%;
}

page-header-bg{
    height:5rem;
    width:100%;
    background-color: rgb(242, 185, 29);
}

.page-header-layout{
    width:90%;
    height:100%;
    background-color:rgb(255, 229, 116);
    margin: 0 auto;

    display:flex;
    justify-content: space-between;
    align-items: center;
}
/** * * * * * * *  自定义弹窗样式 * * * * * */
.login-box{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color:rgba(0,0,0,0.6);


    /* 隐藏弹窗 */
    display:none;
}
.login{
    width:50rem;
    height:30rem;
    background-color: #fff;

    /* 外边距：上下100px，左右auto自动-居中 */
    margin: 10rem auto;
}
.header{
    height: 3rem;
    background-color: orange;
    display:flex;
    flex-direction: row-reverse;
    align-items: center;
}
.header span{
    cursor: pointer;
}

let d = document.querySelector("#denglu")
let c = document.querySelector("#guanbi")
let w = document.querySelector(".login-box")
d.onclick = function () {
    w.style.display = "block"
}
c.onclick = function () {
    w.style.display = "none" 
}

网页