实例演示：模态框

代码

html

<body>
    <header>
        <h1 class="title">千千的博客</h1>
        <button onclick="showModal()">登录</button>
    </header>
    <!-- 模态框 -->
    <div class="modal">
        <!-- 1.半透明的遮罩 -->
        <div class="modal-bg" onclick="closeModal()"></div>
        <form action="" class="modal-form">
            <fieldset style="display: grid; gap: 1em">
                <legend>用户登录</legend>
                <input type="email" name="email" placeholder="user@email.com" />
                <input type="password" name="password" placeholder="不少于6位" />
                <button>登录</button>
            </fieldset>
        </form>
    </div>
    <script src="modal.js"></script>
</body>

css样式

/* 初始化 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 头部 */
header{
    background-color: coral;
    padding: 2em 5em;
    display: flex;
}
/* logo */
header .title{
    font-weight:lighter;
    font-style:italic;
    color:grey;
    letter-spacing:50px;
    text-shadow: 1px 1px 1px white  
}
/* 登录按钮 */
header button{
    margin-left: auto;
    margin-top: auto;
    width: 6em;
    height: 2em;
    border: none;
    border-radius:0.5em;
}
header button:hover{
    cursor: pointer;
    background-color: coral;
    color: white;
    box-shadow: 0 0 10px #fff;
    transition: 0.5s;
}
/* 模态框 */
.modal .modal-form fieldset {
    height:15.5em;
    background-color: lightsalmon;
    border: none;
    padding: 2em 3em;
    box-shadow:0 0 10px #888;
}
/* 模态框表单标题 */
.modal .modal-form fieldset legend {
    padding:7px 1.5em;
    color: #fff;
    border:solid white 0.5px;
    background-color: orange;
}
.modal .modal-form fieldset input {
     height:3em;
     padding-left:1em;
     border: 1px solid #DDD;
     outling:none;
     font-size: 14px;
}
/* :focus: 表单控件，获取焦点时的样式 */
.modal .modal-form fieldset input:focus {
    box-shadow:0 0 10px rgb(90, 90, 90);
    border:none;
}
.modal .modal-form fieldset button{
     background-color: orange;
     color:white;
     border:none;
     height:3em;
     font-size:16px;
     height:2.5em;
     box-shadow:0 0 10px white;
}
.modal .modal-form fieldset button:hover{
    background-color:coral;
    /* cursor: 网页浏览时用户鼠标指针的样式或图形形状。pointer：光标为一只手 */
    cursor:pointer;
}
/* 定位 */
.modal .modal-form {
     position:fixed;
     top:10em;
     left:35em;
     right:35em;
 }
/* 遮罩 */
.modal .modal-bg {
    position: fixed;
    /* 坐标全部清零，定位到四个顶点 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0,0,0,0.5);
}
.modal{
    display:none;
}

代码

html

css样式

效果

更多相关文章

随机推荐