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>转载于:https://www.cnblogs.com/carpenterzoe/p/10250380.html
CSS笔记 - fgm练习 2-10 - 提示框效果 （清除子元素浮动高度塌陷的影响）相关推荐
- html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转) (2012-02-18 20:46:23) 标签: html div css 杂谈 提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么 ...
- 仿windows关机对话框的提示框效果
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2<HTML>3<HEA ...
- 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果
原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...
- Android仿QQ、微信聊天界面长按提示框效果
最近在工作项目中要实现一个长按提示 "复制" 的功能,类似于QQ.微信聊天界面长按提示框效果,本来想偷懒在网上找个开源的项目用,但是看了好几个都不是很满意,所以就打算按照自己的思路 ...
- Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框 使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打 ...
- Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- 弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- Jquery提示框效果（确认提示框）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- 为什么高手都懂得拆解目标？
- 棋牌游戏服务器架构: 部署
- P4735 最大异或和
- C# -- RSA加密与解密
- 如何对web.config进行加密和解密
- 计算机应用技术自我分析,计算机应用*个人自我鉴定
- 新特性：postgresql的vacuum漫谈
- oracle 查询创建了哪些存储过程
- Liferay 加载自定义css 文件
- 3D LUT调色预设如何导入并应用？(fcpx/PR/AE/PS/LR/达芬奇)
- mov和mp4格式哪个好_录音软件哪个好用？8款好用的录音软件
- Python数据分析与展示(一)（基于北理MOOC）
- 帝云CMS内容管理系统
- ivms 4200 linux_iVMS-4200E 海康威视微服务器系列NVR 集成海康硬件和软件实现灵活的一站式解决方案_...
- 读书，读一本好书，让我们得以明净如水
- 长期宅在家的人都有什么比较好的室内锻炼的方法？
- 淘宝Push智能文案生成
- html 手机ar,vr与ar技术的区别有哪些
- tomcat重启警告：Abandoned connection cleanup thread 服务器宕机解决方案
- QT状态栏（statusbar）用法