<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录页面</title> /总体的样式/ <style> /盒子样式/ #box{ width: 350px; //宽 height: 450px; //高 border: 1px solid black; //边框 border-radius: 10px; //边框弧度 font-family: 黑体; //字体 letter-spacing:8px; //段间距 word-spacing: 10px; //字间距 line-height: 40px; //行高 font-size: 18px; //字大小 padding: 20px; //内边框 } /给'注册'授予样式/ .register{ width:280px ; //宽 height: 50px; //高 background-color: skyblue; //背景颜色 border-radius: 10px; //边框弧度 } /将所有边框都改变/ { border-radius: 5px; 边框弧度 } /利用class选择器，授予number宽高和边框/ .number{ width: 185px; //宽 height: 27px; //高 border-width: 1px; //边框宽度 } /id选择器/ #two{ width: 55px; //宽 border-width: 1px; 边框宽度 } /id选择器/ #phone{ width: 103px; //宽 } /class 选择器/ .boxs{ zoom: 75%; //打消浮动 color: darkgray; //颜色 } /class选择器/ .box_a{ width: 50px; //宽 height: 50px; //高 background-image: url("../image/04.jpg "); //背景图片 background-repeat: no-repeat; // 是否平铺 background-size: 50px 25px; //背景尺寸 position: relative; //定位 相对定位 left: 310px; //定位后左移 bottom: 32px; //定位后下移 } </style></head><body><div id="box"> <h1>请注册</h1><p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p><form action="" method="post"> <label for="name">用户名</label> <input type="text" placeholder="请输入用户名" id="name" class="number"> <br> <label for="phone">手机号</label> <select name="" id="two" class="number"> <optgroup> <option style="" class="">+86</option> </optgroup> </select> <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br> <label for="mima">密 码</label> <input type="password" placeholder="请输入密码" id="mima" class="number"> <br> <label for="mima">验证码</label> <input type="password" placeholder="请输入验证码" id="is" class="number"> <div class="box_a"></div> <div class="boxs"> <input type="radio" id="" class="accept">阅读并接管协议<br> </div> <input type="submit" value="注册" class="register" > </form></div></body></html>在这里插入图片描述
