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里面也内置了弹出框组件.打开 ...
随机推荐
- 【CS Round #37 (Div. 2 only) D】Reconstruct Graph
[Link]:https://csacademy.com/contest/round-37/task/reconstruct-graph/statement/ [Description] 给你一张图; ...
- 安装Apache PHP MySQL PHPMyAdmin
视频教程:https://www.youtube.com/watch?v=FJC2iGt_2bc,Youtube看不了的FQ吧-3- 本人参考这篇文章:http://blog.csdn.net/kno ...
- HDU 5281 Senior's Gun 杀怪
题意:给出n把枪和m个怪.每把枪有一个攻击力,每一个怪有一个防御力.假设某把枪的攻击力不小于某个怪的防御力则能将怪秒杀,否则无法杀死.一把枪最多仅仅能杀一个怪,不能用多把枪杀同一个怪.每杀一次怪能够得 ...
- [Python] Python list slice syntax fun
# Python's list slice syntax can be used without indices # for a few fun and useful things: # You ca ...
- iOS使用push隐藏子页面底部bottom TabBar
下面两种情况是我在开发过程中遇到的,一种是代码使用pushViewController,还有一种是storyboard直接使用push.之前也查阅了非常多关于隐藏底部tabbar的资料.可是要么使用起 ...
- nagios插件之登陆防火墙实现session监控
ssh_firewall_session.sh -- 登陆防火墙并运行dis session statistics firewall_check_sessions.c -- 调用上面脚本.过滤出ses ...
- vim 技巧之用宏命令批量处理文件
今天遇到了一种情况,就是我需要同时修改34个文件中的某些字符串的内容,如果一个个打开需改的话,那也太麻烦了.后来就想着能不能通过vim的宏命令来修改呢?现在就总结下关于宏在文件列表中的应用1.首先,我 ...
- Spark编程模型(博主推荐)
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- HDU——T 4738 Caocao's Bridges
http://acm.hdu.edu.cn/showproblem.php?pid=4738 Time Limit: 2000/1000 MS (Java/Others) Memory Limi ...
- start_kernel----lcokdep_init
void lockdep_init(void) { int i; /* * Some architectures have their own start_kernel() * code which ...