html-css练习题(系统提示)
来源:互联网 发布:emlog博客源码 编辑:程序博客网 时间:2024/06/06 11:45
代码赏析:
<!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:10px10px 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:010px 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>
阅读全文
0 0
- html-css练习题(系统提示)
- html、css、javaScript练习题
- html-css练习题 (注册表单)
- html-css练习题(天天生鲜静态网页制作)
- Web编程入门经典——HTML,XHTML,和CSS(第一章 练习题)
- Web编程入门经典——HTML,XHTML,和CSS(第二章 练习题)
- Html+Css 纯CSS实现的文字提示 (精通CSS高级WEB解决方案)读书笔记
- HTML 练习题
- eclipse对css/html/js智能提示
- 简单新闻发布系统前台界面(html+css)
- html+css实现照片墙系统
- css选择器练习题
- HTML 练习题2
- HTML 练习题3
- css+html(1)
- Notepad++ 配置 支持jquery、html、css、javascript、php代码提示
- myeclipse 8.5 安装aptana插件 提示jQuery、js、css、html
- 让eclipse完全支持HTML/JS/CSS智能提示
- ubuntu 解决“无法获得锁 /var/lib/dpkg/lock -open”的方法
- js监控enter键触发函数提交数据或者登陆
- 梯度下降
- Mybatis之Mapper动态代理方式
- Java语言匿名对象
- html-css练习题(系统提示)
- win10 vs2015超级宝典第五版环境搭建
- Ubuntu14.04 Linux4.x.x 下安装USB转串口驱动---cp210x
- RMQ和LCA在线算法
- KMS Tools Portable 01.09.2017│集成了各类常用的激活工具
- history.pushState()实现不跳转,改变路由异步刷新
- 支持向量机专题——线性可分支持向量机
- <VB6.0 & android开发小工具> 桌面帮助程序 里面涉及到的代码
- 9-2(找规律,思路,