html-css练习题（系统提示）

最新推荐文章于 2025-05-31 20:44:09 发布

原创最新推荐文章于 2025-05-31 20:44:09 发布 · 5.4k 阅读

14 ·

CC 4.0 BY-SA版权

html-css教程同时被 2 个专栏收录

26 篇文章

订阅专栏

html-css练习题

6 篇文章

订阅专栏

本文通过一个具体的案例展示了如何使用HTML和CSS实现一个简洁美观的弹窗提示界面，包括定位、样式调整等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码赏析：


<!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>