收藏
PHPz批改状态：合格
老师批语：
<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>
<link rel="stylesheet" href="modaltext.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;}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
