操作元素作业

最新推荐文章于 2022-08-21 17:47:01 发布

HortenseChen

最新推荐文章于 2022-08-21 17:47:01 发布

阅读量177

点赞数

分类专栏： exercise 文章标签： javascript 前端

本文链接：https://blog.csdn.net/Hortense_/article/details/125519824

版权

1. 世纪佳缘用户名显示隐藏内容

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 头部 */
        header {
            display: flex;
            height: 70px;
        }

        /* logo */
        .logo {
            display: flex;
            margin-left: 100px;
            width: 300px;
            background-color: #fff;
        }

        .logo .txt{
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 50px;
            padding-left: 10px;
            border-left: 1px solid #ccc;
            color: rgb(178, 178, 178);
            font-weight: 700;
        }

        /* 用户信息 */
        .user {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            width: 400px;
        }
        .user input {
            padding-left: 10px;
            outline: none;
            width: 120px;
            height: 25px;
            color: rgb(175, 174, 174);
            font-size: 12px;
        }

        .change {
            border: 1px solid #ff9393;
            color: #000;
        }

        .nochange {
            border: 1px solid #ccc;
            color: #ccc;
        }

        .user button {
            width: 60px;
            height: 25px;
            background-color: rgb(11, 164, 181);
            border: 0;
            color: #fff;
        }

        /* 其他登录方式 */
        .otherway {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            width: 350px;
        }

        .otherway span {
            color: #ccc;
            font-size: 12px;
        }

        .otherway img {
            height: 18px;
        }
    </style>

<body>
    <!-- 头部 -->
    <header>
        <!-- logo -->
        <div class="logo">
            <div class="pic">
                <img src="./image/logo.jpeg" alt="">