利用CSS+HTML实现简单的提示框静态页面。

一个简单的提示框

一个简单的提示框

系统提示 X

http://blog.csdn.net/xun527

亲！确定要这么做吗？

---

确定 取消

 ，main .div1 { border-radius:0.5rem; border: 0.1em solid black; width: 30rem; height: 16rem; } 设置一个外部整体盒子,设置好大小，将边角变圆。

main div .div2 {
border-radius: 0.5rem;
margin: 0.5rem;
height: 2rem;
line-height: 2rem;
background-color: #167BEF;
position: relative;
color: white;
padding-left: 0.5rem;
} 将系统字样行设置大小 调整背景颜色为蓝色，字体为白色，居中字体，设置相对定位，微调位置。

main div .div3 {
position: absolute;
right: 13px;
top: 5px;
border-radius: 0.5rem;
color: black;
font: normal bold 1rem “幼圆”;
outline:none;
}设置关闭按钮的样式大小背景颜色。设置绝对定位到父元素。

body {
font: normal bold 1.1rem “幼圆”;
} 给所有字体设置大小方便后续不用调整。

main div .div4 {
text-align: center;
padding-bottom: 4rem;
}居中字体，调整位置。

main div .div5 {
text-align: center;
opacity: 0.1;
position: absolute;
right: 45px;
top: 40px;
}调整位置，设置绝对定位，设置透明度。

main div .div6 {
padding-top: 4rem;
position: relative;
}利用相对定位调整位置。

main div .div7 {
display: inline-block;
float: right;
}设置行内块并使其进行浮动。
main div .div8{
color:white;
text-align:center;
border:0rem;
border-radius:5px;
width:6rem;
height:2rem;
background-color:#167BEF;
font: normal bold 0.9rem “幼圆”;
outline:none;
}为按钮设置边框，调整位置，设置样式。
main div .div9{
color:#676767;
text-align:center;
border:0rem;
border-radius:5px;
width:6rem;
height:2rem;
background-color:#DDDDDD;
font: normal bold 0.9rem “幼圆”;
margin-right:1rem;
outline:none;为按钮设置边框，调整位置，设置样式
}
.div10{
opacity:0.2;
}设置透明度，