Tips_关闭按钮的简单实现 && Felx实现水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin : 0;
padding: 0;
}
/* 关闭按钮 */
.card{
width: 200px;
height: 240px;
border: 1px solid #ccc;
border-radius: .2em; margin: 100px auto;
}
.cardHeader{
overflow: hidden;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.closeCard{
display: inline-block;
padding: 0 10px;
font-size: 24px;
font-family: helvetica;
float: right;
cursor:pointer;
color: #ccc;
}
.closeCard:hover{
color: #007;
} /* flex实现水平垂直居中 */
.father{
/*以下三个设置*/
display: flex;
justify-content: center;
align-items: center; width: 400px;
height: 400px;
border: 1px solid #ccc; margin: 100px auto; }
.child{
width: 40px;
height: 60px;
background: #ccc;
}
</style>
</head>
<body>
<h3>关闭按钮</h3>
<div class="card">
<div class="cardHeader">
<span class="closeCard"> ×</span>
</div>
</div> <h3>flex实现水平垂直居中</h3>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
Tips_关闭按钮的简单实现 && Felx实现水平垂直居中的更多相关文章
- css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
- 把简单做好也不简单-css水平垂直居中
44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
- CSS实现水平|垂直居中漫谈
利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...
- CSS实现元素水平垂直居中—喜欢对称美，这病没得治
[TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...
- 【前端攻略】最全面的水平垂直居中方案与flexbox布局
最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
随机推荐
- .Net Core的Excel导入
1.前台代码,layui模板 2.后台代码,后台实现 (1)导入 (2)数据验证 (3)将导入数据存储在数据库中 (4)定义保存导入数据接口 (5)接口的实现调用业务层 (6)业务层接口 (7)业务层 ...
- 有关mysql索引
1.首先我们需要明确一下什么是索引以及为什么要使用索引: 索引在MySQL中也叫做“键”,是存储引擎用于快速找到记录的一种数据结构.在生产环境中,对于数据库我们最常进行的是查询的操作,而当我们的数据非 ...
- Windows如何上传代码到Github
1.首先得安装git客户端 进入官网:https://git-scm.com/ ,点击右侧下载windows版本的软件包,然后双击安装就可以了. 安装完成之后,在开始菜单可以看到,此时,在想上传的文件 ...
- [转]在static代码块或static变量的初始化过程中使用ServiceManager提供的api的陷阱
一. 案例 1.源码: /** @hide */ private TelephonyManager(int slotId) { mContext = null; mSlotId = slotId; i ...
- story 泄露服务器libc版本
记录下学到的姿势,利用信息泄露得到服务器libc 至少两个函数偏移,利用libc-databse得到服务器libc版本 传送门 泄露脚本如下 from pwn import * context.log ...
- #10038.A Horrible Poem
#10038.A Horrible Poem 题目传送门 思路解析 既然这道题目在hash板块里,那么自然就可以想到用hash做这道题目. 首先我们可以用hash数组存储字符串的前缀的hash值. 因 ...
- Mysql 多实例 +表损坏
什么是实例? 进程+多个线程+预分配的内存结构 MySQL多实例: 多个进程+多个线程+多个预分配内存结构 多个配置文件: 1)多个端口 2)多个数据目录 3)多个socket文件 ./mysql_i ...
- eclipse下properties文件中文乱码的解决方案
今天在工程下编辑.properties文件时输入了中文然后就保存出错,弄了好久才搞定!大家瞄瞄 在中文操作系统下,Eclipse中的Java类型文件的编码的默认设置是GBK,但是对Properties ...
- java爬虫实现爬取百度风云榜Top10
最近在项目中遇到了java和python爬虫进行程序调用和接口对接的问题, 刚开始也是调试了好久才得出点门道. 而后,自己也发现了爬虫的好玩之处,边想着用java来写个爬虫玩玩,虽说是个不起眼的dem ...
- CentOS运维常用技能
1.添加系统帐号 [root@localhost ~]# adduser gordon [root@localhost ~]# passwd gordon //新帐号添加密码,然后输入密码就完成了.修 ...