代码赏析:
<!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>