<style type="text/css">* {margin: 0px;padding: 0px;box-sizing: border-box;}.box1 {width: 100%;height: 60px;background: brown;color: white;padding: 8px 16px;}.box1 h1 {padding-top: 15px;font-size: 25px;text-align: center;letter-spacing:10px;}.box1 button {position: fixed;right: 0;}/* .box2{display: none;} */.box2 input{width: 220px;height: 27px;border: 1px solid blue;border-radius: 5px;margin-left: 70px;}.btu {width: 220px;height: 26px;/* 去掉边框 */border: none;/* 设置圆角 */border-radius: 5px;background: seagreen;color: white;/* 外边距向左侧移动 */margin-left: 100px;margin-top: 15px;margin-bottom: 15px;}/* 模态框 */.box2 fieldset {border-radius: 5px;border: none;width: 400px;height:300px ;background: rgb(243, 244, 245);/* 固定定位 */position: fixed;top: 200px;left: 600px;/* 模态框居中 */vertical-align:middle;}/* <!-- 半透明框 --> */.box3 {/* 固定定位 */position: fixed;/* 定位四个角 全部清零 */top: 0;left: 0;right: 0;bottom: 0;background-color:#042d53;/* 半透明 */opacity: 0.5;}.box2 p {font-weight: 100%;font-size: 20px;color: #1b0212;background-color: chartreuse;text-align: center;font: 2em sans-serif;}.box4 input {background-color: rgb(241, 243, 241);margin-top: 15px;/* 输入框居中 */vertical-align:middle;margin-left: 100px;}</style>
<body ><div class="box1"><h1>后台管理系统</h1><button>登录</button></div><!-- 模态框 --><div class="box2"><!-- 半透明框 --><div class="box3"></div><form ction=""><fieldset><div class="box4"><p>登录到后台管理系统</p><br><input type="tetx" name="username" placeholder="用户名" /><br><input type="password" name="password" placeholder="密码"><br><button class="btu">登录</button></div></di></fieldset></form></body>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
