web第三次作业

CSS样式

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        html,

        body {

            width: 100%;

            height: 100%;

        }

        .container {

            width: 100%;

            height: 100%;

            background-color: #f2f1f2;

        }

        header {

            width: 1200px;

            height: 50px;

            background-color: #fff;

            margin: 0 auto;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        header div:nth-of-type(2) {

            display: flex;

            gap: 20px;

            cursor: pointer;

        }

        header div:nth-of-type(2) span:hover {

            font-weight: bolder;

            color: red;

        }

        .login-box {

            display: none;

            overflow: hidden;

            width: 500px;

            height: 300px;

            background-color: #1fdec1;

            border: solid 1px orangered;

            border-radius: 8px;

            box-shadow: rgba(255, 0, 0, 0.5) 5px 5px 5px;

            position: absolute;

            left: 1150px;

            top: 50px;

        }

        .login-box .header {

            height: 40px;

            background-color: orangered;

            display: flex;

            justify-content: space-between;

            align-items: center;

            color: white;

            cursor: pointer;

            padding: 0 10px;

        }

    

HTML

   

   

       

    

   

       

           

                登录后享受更多内容

           

           

                登录

                注册

           

           

               

                    登录

                    X

               

           

       

   

   

JS代码