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里面也内置了弹出框组件.打开 ...
随机推荐
- Linux中配置网桥
使用kvm虚拟机时,有时候需要自己添加网桥供guest使用. 不使用libvirt来管理的话,可以使用以下方法创建网桥并绑定到物理网卡(RHEL6/Fedora已实验): 1.创建网桥配置文件ifcf ...
- 稀疏表示字典的显示(MATLAB实现代码)
本文主要是实现论文--基于稀疏表示的图像超分辨率<Image Super-Resolution Via Sparse Representation>中的Figure2.通过对100000个 ...
- JavaScript中获取Map集合中的key和value值(前提是:既不知道key为什么值,也不知道value有哪些值)
for(var i in maps){//通过定义一个局部变量i遍历获取map里面的所有key值 alert(maps[i]); //通过获取key对应的value值 }
- vue -- 跨域cookie 丢失的问题
前端使用了vue-reource的$http进行请求后台接口 登陆完成后,服务端监控发现无法拿到cookie,下面看几张前端控制台监控的图 reqqust Header 没有显示cookie 信息 ...
- Impala性能优化
不多说,直接上干货! • 执行计划 – 查询sql执行之前,先对该sql做一个分析,列出需要完成这一项查询的详细方案 – 命令:explain sql.profile 要点: • 1.SQL优化,使用 ...
- __get__()方法研究
看源码的时候发现了这个魔法方法 class A(object): def __init__(self): self.name = 'mod' def __get__(self, instance, o ...
- 阅读笔记—EL表达式
表达式语言(EL) 表达式语言是一种在JSP页面中使用的数据访问语言,通过它可以很方便地在JSP页面中访问应用程序数据. 使用EL访问数据 表达式语言的使用形式: ${exp ...
- ubuntu-虚拟机跟主机资源共享的实现方法
之前自己的虚拟机跟主机资源共享的时候,使用的是非常笨的方法,就是通过创建两个飞鸽,然后在两个飞鸽之间进行文件的传输,今天工作相对轻松一些,就趁机完善一下自己的工作环境,在网上搜索了关于资源共享的方法, ...
- php课程 12-42 php中类的关键字有哪些
php课程 12-42 php中类的关键字有哪些 一.总结 一句话总结:const.final.static 1.类常量-const2.最终版本-final3.静态成员-static 1.php中类常 ...
- onblur 对象失去焦点事件
onblur 对象失去焦点事件 一.总结 1.几乎所有的控件都支持onblur事件 二.简介 onblur 事件 Event 对象 定义和用法 onblur 事件会在对象失去焦点时发生. 语法 onb ...