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

html-css练习题（系统提示）相关推荐

  1. 【HTML、CSS练习题1】

    HTML.CSS练习题1 一.单选题(共25题,每题2分) 二.多选题(不定项选择)(共25题,每题2分) 一.单选题(共25题,每题2分) 1.关于CSS控制字体样式说法错误的是() A .font ...

  2. python django 在线练习题系统

    python django 在线练习题系统 Pythondjango 在线考试系统 基于python Django的在线考试系统 后端:python django 数据库:MySQL 前端:html ...

  3. VMWARE虚拟机安装系统提示CPU已被客户机操作系统禁用和secureCUT乱码

    错误:VMWARE虚拟机安装系统提示CPU已被客户机操作系统禁用 改正:找到虚拟机的位置找到下图灰色的部分:打开 .vmx后缀的操作系统配置文件,加入以下代码: cpuid.1.eax = :: 2. ...

  4. 在创建ArcGIS Server10.5的站点时，系统提示创建‘System/publishingToolsEX.GPServer’失败（转）...

    环境 操作系统:Win2008 R2 SP1 ArcGIS Server版本:ArcGIS Server10.5 浏览器版本:IE8,Chrome 问题 在创建ArcGIS Server10.5的站点 ...

  5. win7拒绝访问_win7系统提示无法访问application data如何解决

    有很多电脑用户都清楚application data是win7系统当中的应用程序数据文件夹,最近有位win7系统用户在访问application data文件夹的时候,系统却提示application ...

  6. exe已停止工作_win7系统提示com surrogate已停止工作的解决方法【介绍】

    我们在平时的工作当中,经常有时候需要打开图片,不过最近有位win7系统用户使用电脑打开图片的时候提示:com surrogate已停止工作,这让用户非常苦恼,那么win7系统提示com surroga ...

  7. win10未开启没有运行无线服务器,win10系统提示共享无线自动配置服务没有自动运行的解决办法...

    win10系统提示共享无线自动配置服务没有自动运行的解决办法? win10系统有很多人都喜欢使用,我们操作的过程中常常会碰到win10系统提示共享无线自动配置服务没有自动运行的问题.如果遇到win10 ...

  8. SAP RETAIL MM42进入商品的销售视图系统提示: No basic purchase price relevant to pricing found with schema RM0000

    SAP RETAIL MM42进入商品的销售视图系统提示: No basic purchase price relevant to pricing found with schema RM0000 M ...

  9. SAP ME12 修改采购信息记录，系统提示：Condition type P000 does not allow supplementary conditions

    SAP ME12 修改采购信息记录,系统提示:Condition type P000 does not allow supplementary conditions 1,执行事务代码ME12,进入采购 ...

最新文章

  1. Windows Azure Platform Introduction (9) 申请Windows Azure 账户
  2. 2016计算机有哪些专业知识点,2016计算机专业知识：精选知识点练习（99）
  3. 小心pthread_cond_signal和SetEvent之间的差异
  4. java 裁剪 pdf_java – 使用iTextPDF修剪页面的空白
  5. sql注入利用_SQL注入：这是什么？ 原因和利用
  6. python程序-第一个Python程序——在屏幕上输出文本
  7. 拓端tecdat|R语言深度学习Keras循环神经网络(RNN)模型预测多输出变量时间序列
  8. 编写一个基于控制台的聊天室程序
  9. wap push概述
  10. Nreal招聘|SLAM算法、深度学习算法、服务器开发工程师等多个岗位
  11. C# 操作Excel文件之NPOI (一)
  12. java 发送邮件demo_java邮件发送Demo(完整例子)
  13. Java设计模式之装饰器模式 （转）
  14. 今日头条文章量如何打造爆款
  15. Swift上写百度地图记录
  16. PHP 操作图片水印
  17. 物联网有哪些安全风险？物联网安全问题汇总
  18. 系统分析与设计第四次作业
  19. 关于dedecms织梦后台html编辑器不能复制word格式的处理方法/ kindEditor编辑器/百度(ueditor)编辑器的添加方法
  20. 从标数法求最短路径数到杨辉三角的思考

热门文章

  1. Python爬虫入门教程 22-100 CSDN学院课程数据抓取
  2. 项目开发日志:Build AssetBundle——SpriteAtlas（已解惑）
  3. Python实现比较两个列表(list)范围
  4. ASP.NET中的Eval（）和DataBinder.Eval（）方法
  5. 数据库中字段类型Number(n,m)大概说明
  6. STM32——I2C
  7. DataWhale组队-Pandas（下）缺失数据（打卡）
  8. python 对xlsx文件数根据日期进行统计分析_Python处理Excel的常用操作（一）
  9. hidl 原理分析_一个 health service 不生效问题引出的一点知识
  10. LeetCode 2176. 统计数组中相等且可以被整除的数对