<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模态框定位实战</title></head><body><header><h2 class="title">朱老师的blog</h2><button onclick="document.querySelector('.modal').style.display='block'" >登录</button></header><!-- 模态框 --><div class="modal"><!-- 1 半透明遮罩 --><div class="modal-bg" onclick="this.parentNode.style.display='none'"></div><!-- 2 弹层表单 --><form action="" class="modal-form"><fieldset><legend>用户登录</legend><input type="email" name="email" placeholder="usename@emial.com"><input type="password" name="password" placeholder="***********"></fieldset></form></div></body><style>/* 初始化 */*{margin:0;padding:0;box-sizing: border-box;}/* 头部样式*/header{background-color: seagreen;display: flex;padding: 0.5em 1em;}header .title{font-weight: lighter;font-style: italic;color:white;text-shadow: 1px 1px 1px;letter-spacing: 1px;}header button{margin-left:auto;width:5em;border: none;border-radius: 8px;}header button:hover{cursor: pointer;background-color: coral;color: white;box-shadow: 0 0 5px white;transition: 0.3s;}/* 模态框 */.modal .modal-form fieldset legend{padding: 5px 1em;background-color: rebeccapurple;color: white;}/* 表单的固定定位：正中间 */.modal .modal-form{position: fixed;top:10em;left:20em;right: 20em;/* background-color: lightpink; */}/* 半透明的遮罩 */.modal .modal-bg{position: fixed;/* height: 100px; */background-color: rgb(0,0,0,0.5);top:0;left:0;right:0;bottom:0;}</style></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
