CSS笔记 - fgm练习 2-10 - 提示框效果 (清除子元素浮动高度塌陷的影响)
CSS清除浮动方法参考:
https://blog.csdn.net/promiseCao/article/details/52771856
<style>
*{
margin: 0; padding: 0; list-style: none; font-size: 12px;
}
.outer{
width: 560px;
margin: 10px auto;
border: 1px solid #000;
padding: 10px 0 0 10px;
}
.outer>h2{
text-align: center;
font-size: 18px;
margin-bottom: 10px;
} .outer>ul{
/* overflow: hidden; */
/* 这里不能用overflow: hidden; 否则li里面img超出ul范围边角会被裁剪。
疑问: 这里的li是浮动流, 怎么也可以撑起外层盒子的高度??
其实还是会导致塌陷。 由后面 :after 伪元素的设置解决了这个问题。 */
zoom: 1;
/* zoom: 1; 什么作用?? */
}
.outer>ul:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
/* :after伪类+content 清除浮动的影响 。
这些设置撑起了ul的高度。 (li是浮动流,所以撑不起外层盒子。) */
} .outer>ul>li{
width: 80px;
height: 80px;
padding: 10px;
float: left;
background: #f0f0f0;
border: 1px solid #000;
margin: 0 10px 10px 0;
cursor: crosshair;
position: relative;
} /* 子绝父相,img参照li 定位,hover的时候才显示。
由操作引发,后面显示的内容覆盖了原本的,要联想到定位这个方法! */ /* 疑问:
img是属于li标签内的。所以图片的显示只能从li元素的左上角边界开始。
怎么实现左上角能超出边框显示???
ul不要设置overflow: hidden , 就不会导致img边角被裁减。 */ .outer>ul>li>img{
position: absolute;
left: -14px;
top: -14px;
display: none;
border: 2px solid #000; z-index: 1;
/* z-index要设置,否则img的边框被li给覆盖了。 */
} .outer>ul>li:hover img{
display: block;
} /* .outer>ul>li:hover{
background: url("imgs/1.jpg") -20px -20px no-repeat;
} */
</style>
CSS笔记 - fgm练习 2-10 - 提示框效果 (清除子元素浮动高度塌陷的影响)的更多相关文章
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- WPF提示框效果
WPF提示框效果 1,新建WPF应用程序 2,添加用户控件Message 3,在Message中编写如下代码 <Border x:Name="border" BorderTh ...
- 单一按钮显示/隐藏&&提示框效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果
原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...
- 基于JQuery 的消息提示框效果代码
提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...
- DIV+CSS实现左侧带三角形的提示框
实现效果
- Android学习笔记通过Toast显示消息提示框
显示消息提示框的步骤 这个很简单我就直接上代码了: Button show = (Button)findViewById(R.id.show); show.setOnClickListener(new ...
- Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...
随机推荐
- XML解析——SAX解析以及更方便的解析工具(JDOM、DOM4J)
XML主要用于数据交换,HTML则用于显示. 相对于DOM的树形解析,SAX采用的是顺序解析,这种解析方法可以快速地读取XML数据的方式. SAX主要事件: No. 方法 类型 描述 1 public ...
- Top 22 Free Responsive HTML5 Admin & Dashboard Templates 2018
Top 22 Free Responsive HTML5 Admin & Dashboard Templates 2018 May 18, 2018 Alex Ivanovs Website ...
- OpenCASCADE中散乱Edge生成Wire
OpenCASCADE中散乱Edge生成Wire eryar@163.com Abstract. In OpenCASCADE a wire can be built from any number ...
- linux 进程等待 wait 、 waitpid
waitpid() 与 wait() 功能相似,都是用户主进程等待子进程结束或中断. 可用于进程之间的同步 wait 函数原型 pid_t wait(int *status); 函数说明 wait() ...
- js---11闭包
//匿名立即调用函数 (function(){//把a,b,f全部隐藏在函数中,外部访问不到, var a = 5; var b = 6; function f(){ alert(a); } wind ...
- vim 计算器寄存器使用
我们可能会在vim的使用中,碰到下面的情况 当我正在写一周预算的时候,我想计算下每天我买菜花2.7,每天买两顿,周死晚上出去吃,周六额外买1.5斤14.8一斤的猪肉... 这时候你打算怎么办呢,是不是 ...
- JS实现队列效果,先进先出
/** * [Queue] * @param {[Int]} size [队列大小] */ function Queue(size) { var list = []; //向队列中添加数据 this. ...
- Day1下午解题报告
预计分数:0+30+30=60 实际分数:0+30+40=70 T1水题(water) 贪心,按长度排序, 对于第一幅牌里面的,在第二个里面,找一个长度小于,高度最接近的牌 进行覆盖. 考场上的我离正 ...
- 配置Lotus Domino集群视频详解
IBM Lotus Domino Server 有个最重要的高可用特新就是集群,它对于任何使用 Domino 服务器的组织,让用户能够持续访问它们的数据库,保证业务不间断运行.下面通过两个视频来学习如 ...
- android学习笔记五。1、Service深入学习
一.Service,服务是没有界面而在后台长期运行的程序,可以看做是后台的Activity. 1.在Android中按返回键退出一个应用并不会(内存充足时)直接销毁一个进程,所以其中的子线程也可以在后 ...