css技巧收集
1. 使用 :not()
为导航添加/取消边框
传统的方法为导航栏添加边框:
/* add border */ .nav li { border-right: 1px solid #666; } /* remove border */ .nav li:last-child { border-right: none; }
用css的:not()实现:
.nav li:not(:last-child) { border-right: 1px solid #666; }
减少了很多代码实现了相同的功能。
2. 垂直居中(任何元素)
html, body { height: 100%; margin: 0; } /*要设置垂直居中的元素*/ element { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
3. 使用负的 nth-child
选取元素
使用负的 nth-child
在 1 到 n 之间选择元素:
li { display: none; }
/* 使用负的 nth-child
在 1 到 n 之间的元素,选择第1到3个元素就是nth-child(-n+3) */
li:nth-child(-n+3) {
display: block;
}使用 :not()来做:
li:not(:nth-child(-n+3)) { display: none; }
4. 使用 Flexbox 来避免 Margin Hacks
在做多列布局的时候,可以通过 Flexbox 的 space-between
属性来避免nth-
、first-
、 last-child
等 hacks:
.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; }
这样,列之间的空白就会被均匀的填满。
css技巧收集的更多相关文章
- 最常用的CSS技巧收集笔记
1.重置浏览器的字体大小 重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...
- CSS技巧收集——巧用滤镜
最近暴雪一款叫<守望先锋>的游戏火到不行,身边很多人都深受其毒害,虽然博主自己没有买(穷),但是耳濡目染也了解了个大概. 由于之前大致学习了一下 css 滤镜的各种用法,所以心血来潮结合二 ...
- CSS技巧收集——毛玻璃效果
先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...
- 50个CSS技巧
这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...
- 最全的CSS浏览器兼容问题【CSS技巧 】
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
- (转) 50个CSS技巧
这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...
- DelphiXE2 DataSnap开发技巧收集
DelphiXE2 DataSnap开发技巧收集 作者: 2012-08-07 09:12:52 分类:Delphi 标签: 作为DelphiXE2 DataSnap开发的私家锦囊, ...
- CSS技巧-rgba函数的妙用
先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...
随机推荐
- Unique Paths II
这题在Unique Paths的基础上增加了一些obstacle的位置,应该说增加的难度不大,但是写的时候对细节的要求多了很多,比如,第一列的初始化会受到之前行的第一列的结果的制约.另外对第一行的初始 ...
- IE6兼容问题并解决总结
1.使用声明你必须经常在html网页头部放置一个声明,推荐使用严格的标准.例如<!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN” "http: ...
- MyBatis3学习--来源自用户指南
MyBatis是什么? MyBatis 是一款一流的支持自定义SQL.存储过程和高级映射的持久化框架. MyBatis几乎消 除了所有的JDBC 代码,也基本不需要手工去设置参数和获取检索结果. My ...
- Themida和Winlicense加壳软件脱壳教程
(一)Themida和不用license的Winlicense加壳软件就不说了,直接上脚本脱壳. (二)先看看不同版本OEP的一些小特征: Temida2.1.X.X版本之后的OEP特征(2.0.8. ...
- oracle中dual的使用
dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下:1.查看当前用户,可以在 SQL Plus中执行下面语句select ...
- android工程中menu的使用总结
android的Menu使用 转自:thinkYeah的博客 1.普通的Menu 先来看看最简单的Menu怎样实现. 在主Activity中覆盖onCreateOptionsMenu(Menu men ...
- DataTable 删除列 调整列顺序 修改列标题名称
DataTable dt = new DataTable(); //删除列 dt.Columns.Remove("Sex"); dt.Columns.Remove("Ag ...
- iOS 7.1耗电严重解决办法
自从iOS 7.1正式版发布以来,三天后的升级率就已经达到17.9%,预计一周后升级率能突破40%.但是也有不少用户在苹果官方支持论坛上抱怨iOS 7.1系统耗电严重. 名为PJS2006的iPhon ...
- B2C电子商务基础系统架构解析(转载)
系统的开发与演化,前台严格follow消费者的购买流程,后台则盯牢订单流转,牢牢抓住这两条主线,才能高屋建瓴的看清B2C的逻辑链和数据流,更深刻的规划功能模块,从而更有效支撑实际业务的流转. 前台 前 ...
- Fiddler-3 配置Fiddler监听iphone的http/https请求
电脑端可以通过Fiddler监听手机端的http请求.需要两个步骤:首先配置Fiddler,再配置手机端. 1 配置 Fiddler 允许远程设备连接: 菜单Tools - Telerik Fiddl ...