1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????*{ 8 ????????????margin: 0; ?????????????????/*重置*/ 9 ????????????padding: 0;10 ????????}11 ????????body{12 ????????????background-color: whitesmoke; ??/*页面背景色*/13 ????????}14 ????????.top{15 ????????????width: 100%;16 ????????????height: 60px;17 ????????????background-color: black;18 ????????????padding-left: 100px;19 ????????}20 ????????.box{21 ????????????width: 500px;22 ????????????height: 600px;23 ????????????background-color: white; ???/*背景色*/24 ????????????border-radius: 5px; ????????/*圆弧*/25 ????????????margin: 20px auto; ?????????/*距离上部20px，自动居中*/26 ????????}27 ????????.box-top{28 ????????????width: 500px;29 ????????????height: 60px;30 ????????????border-bottom: 1px solid black;31 ????????????line-height: 60px;32 ????????}33 ????????.box-top h3{34 ????????????float: left;35 ????????????border-bottom: 3px solid #c18ef0;36 ????????????font-size: 30px;37 ????????}38 ????????.box-top a{39 ????????????float: right;40 ????????????font-size: 20px;41 ????????????color: skyblue;42 ????????}43 ????????.box-regist input{44 ????????????width: 480px;45 ????????????height: 40px;46 ????????????border-radius: 5px;47 ????????????margin:10px;48 ????????}49 ????????.box-regist .inpbox{50 ????????????width: 300px;51 ????????}52 ????????.box-regist a{53 ????????????display: inline-block;54 ????????????border: 1px solid rebeccapurple;55 ????????????width: 100px;56 ????????????height: 40px;57 ????????????border-radius: 5px;58 ????????????margin: 10px;59 ????????????line-height: 40px;60 ????????????text-align: center;61 ????????????color: rebeccapurple;62 ????????}63 ????????.btn{64 ????????????background-color: aqua;65 ????????}66 ????????.tail{67 ????????????width: 100%;68 ????????????height: 120px;69 ????????????background-color: grey;70 ????????}71 72 ????</style>73 </head>74 <body>75 ????<div class="top"></div>76 ????<div class="box">77 ????????<div class="box-top">78 ????????????<h3>请注册</h3>79 ????????????<a href="F:\项目\HTML\标签.html">立即登陆></a>80 ????????</div><br>81 ????????<div class="box-regist">82 ????????????<form method="post" action="">83 ????????????????<input type="text" placeholder="请输入手机号" name="phone"><br>84 ????????????????<input class="inpbox" type="text" placeholder="请输入短信验证码" name="cookie"><a>发送验证码</a><br>85 ????????????????<input type="text" placeholder="请输入用户名" name="user"><br>86 ????????????????<input type="password" placeholder="请输入密码" name="psw"><br>87 ????????????????<input type="password" placeholder="请再次输入密码" name="pswt"><br>88 ????????????????<input class="inpbox" type="text" placeholder="请输入图形验证码" name="img-cookie"><a>此处为图形</a><br>89 ????????????????<input class="btn" type="submit" value="立即注册">90 ????????????</form>91 ????????</div>92 ????</div>93 ????<div class="bot1"></div>94 ????<div class="bot2"></div>95 ????<div class="tail"></div>96 </body>97 </html>CSS基础范例
原文地址：https://www.cnblogs.com/mxwei/p/9484163.html