代码赏析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 背景颜色设置 */
body{
background:lavenderblush;
}
/* 1.盒子设置 宽500 高300 背景颜色 固定位置 调节位置 */
.box{
width:500px;
height:300px;
background: white;
border-radius: 4px;
position: relative;
left:50%;
top:50%;
margin-left:-250px;
margin-top: 150px;
/* 设定塌陷 */
overflow:hidden;
}
/* 2.系统盒子设定 宽490 高40 背景颜色 位置 */
.con{
width:490px;
height:40px;
background: blue;
margin: 15px auto 0px;
border-radius: 6px;
}
/* 2.1设定系统提示文本 左悬浮 字体18 去粗 颜色 行高 */
.con h3{
float:left;
margin:0px;
margin-left:10px;
line-height: 40px;
color:#fff;
font-size:18px;
font-weight: normal;
}
/* 2.2 设定右边边框 右悬浮 字大小 下划线 位置 */
.con a{
float:right;
width:20px;
height:20px;
background: #fff;
margin:10px 10px 0 0 ;
text-decoration: none;
line-height: 20px;
text-align: center;
font-size:20px;
border-radius: 4px;
}
/* 3.中间文字 行高 字20 位置 */
.span{
height: 200px;
text-align: center;
line-height: 200px;
font-size:20px;
}
/* 4.底部设置 行高54 宽500 位置 上边框 */
.regist{
width:500px;
height: 54px;
padding-top:5px;
border-top: 1px solid red;
}
/* 4.1 输入盒子设置 宽100 高36 右浮动 字16 位置 */
.regist input{
width:100px;
height:36px;
float:right;
border-radius:4px;
font-size:16px;
margin:0 10px 0 0 ;
}
</style>
</head>
<body>
<!-- 1.搭建盒子 -->
<div class="box">
<!-- 2.系统提示盒子 -->
<div class="con">
<h3>系统提示</h3>
<a href="#">×</a>
</div>
<!-- 3.中间文字 -->
<div class="span">亲，确定这么做吗？</div>
<!-- 4.底部盒子 -->
<div class="regist">
<input type="button" value="取消">
<input type="button" value="确定">
</div>
</div>
</body>
</html>
