前端小技巧-定位的活学活用之仿淘宝列表
最终效果如下
为了避免相邻的盒子边框宽度叠加,所有盒子float: left;,出现了以下问题(有的盒子的边框被挡住了)
重点来了 -- 定位的灵活运用(除了static),当鼠标移入盒子后,提高盒子的层级,可以轻松实现效果
- 1.情况一:直接给盒子一个
相对定位!绝对定位是不行的,因为绝对定位的盒子不占有原来的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>淘宝列表</title><style type="text/css" media="screen">.item {height: 300px;width: 130px;border: 2px solid #ccc;margin-top: 100px;float: left;margin-left: -2px;}.item:hover {border: 2px solid red;position: relative; /* 绝对定位或者相对定位的盒子层级要比没有定位的盒子高 */}</style>
</head>
<body><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</body>
</html>- 情况二:当盒子里面的子元素有绝对定位的时候,
子绝父相,情况一就不适用了.可以通过z-index值来提高层级关系
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>淘宝列表</title><style type="text/css" media="screen">.item {height: 300px;width: 130px;border: 2px solid #ccc;margin-top: 100px;float: left;margin-left: -2px;position: relative;}.item:hover {border: 2px solid red;z-index: 1; /* 子绝父相的情况下,盒子已经是相对定位了,可以通过z-index值来提高层级关系 */}</style>
</head>
<body><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</body>
</html>前端小技巧-定位的活学活用之仿淘宝列表相关推荐
- 活学活用流行的JavaScript库——《JavaScript实战》
媒体评论 "本书并不像一本教材,畅读之后,你会觉得它就是一位讲课生动的老师,带领你遨游 JavaScript 海洋,把你推向技术风浪的前沿,同时又给了你一个功能完备的冲浪板,接下来就是你在风 ...
- 让知识活学活用，猿辅导小学课堂开课了！
"辩"和"辨"怎么区分它们?妈妈让我买三斤土豆,要花多少钱?薄薄的快递箱,为什么运输中可以毫发无损?有些英语单词的发音怎么和中文很像?其实,答案就在猿辅导的课堂 ...
- Builder构建者模式，将复杂对象的创建过程与其表示分离，活学活用才是王道
首发CSDN:徐同学呀,原创不易,转载请注明源链接.我是徐同学,用心输出高质量文章,希望对你有所帮助. 文章目录 一.前言 传统创建对象的弊端 二.构建者模式 1.通用写法 2.构建者模式的优缺点 3 ...
- UI设计必备工具之活学活用
UI设计必备工具活学活用 工欲善其事,必先利其器.一个优秀的设计师,相关软件的熟练使用是一个重要的因素.随着移动端设备的普及,产品开发速度越来越快,相应的UI设计软件也层出不穷.下面让我们认识一下最经 ...
- [python]抓取啄木鸟社区《活学活用wxPython》内容与图片
请参考crifan的博文如何用Python,C#等语言去实现抓取静态网页+抓取动态网页+模拟登陆网站 这是我看到的关于爬取与模拟登陆最详尽的一个系列,总结整理了很多,获益不少 编辑 20130105 ...
- html前端小技巧—字体及颜色色值准确设置
今天分享下"html前端小技巧-字体及颜色色值准确设置"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一 ...
- 每天一个前端小技巧——生成gif动图下载
每天一个前端小技巧--生成gif动图下载 动态热图的展现,分别展现某个时间段的热图时间变化,例如:最近一周七天内,每天的热图分布变化图:这个动态变化的图生成一个gif图提供下载是否可行? 实现方案: ...
- 《跟二师兄学Nacos吧》EXT-01篇 看看Nacos是怎么活学活用简单工厂模式的！
学习不用那么功利,二师兄带你一起轻松读源码- 番外篇简介 Nacos源码分析系列文章,在开篇已经提到过,写作的目标有两个:第一,能够系统的学习Nacos知识:第二,能够基于Nacos学到涉及到的知识点 ...
- JS 仿淘宝幻灯片 非完整版 小案例
仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 ...
最新文章
- 一个网络公司的任职要求
- 拷贝Python对象、浅拷贝、深拷贝
- 存定期还能加钱进去吗_很多人说傻子才存钱，在银行存定期还有必要吗？
- 远程安装Oracle Server
- 当装了两个tomcat后，如何修改tomcat端口
- 操作RadGrid1，RadAjaxLoadingPanel1不出现
- linux read nchars,Linux常用命令－－read
- SDL 库 无法解析的外部符号 __imp__fprintf
- mvc.net分页查询案例——PagedList
- java 新窗口跳转页面_Java web开发中页面跳转小技巧——跳转后新页面在新窗口打开...
- 【LeetCode】12. Integer to Roman 整型数转罗马数
- 上下相机贴合对位计算公式_深圳贴合机生产家介绍；真空贴合机这些产品功能你了解多少...
- Mysql原理、主从复制、半同步复制及基于SSL复制
- Matlab中imnoise函数的用法
- 【论文学习】10、物联网安全WiFi设备的监控与识别
- java分词支持拼音_支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
- 技术笔记：.Net全套就业班视频教程——数据库
- cpu性能测试软件 国际象棋,国际象棋测试
- 资深黄金专家李鑫：独创7套算点理论震惊市场
- C# 从零开始写 SharpDx 应用 画三角