![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 60
Dragon_GL
爱前端 爱代码的 斗笔一枚
展开
-
三种纯CSS方法实现等高列
在这篇文章里, 我会介绍三种使用纯css的方式来实现等高列的方法。在网页布局中设置列等高是比较常见的, 所以写这篇文章就是要总结下一些优雅的纯CSS解决方案。插图自己弄得,不喜莫喷 哈哈。。下面介绍的三种方法都只用到了CSS , 不涉及jQuery、JavaScript计算实现的方法,所以我把它这篇文章标题设为:三种纯CSS方法实现等高列。 方法-1: 使用Margins, Paddings和原创 2016-04-06 20:22:59 · 4433 阅读 · 0 评论 -
Flex 布局教程:语法篇
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex布局将成为转载 2016-06-06 20:58:28 · 315 阅读 · 0 评论 -
3行Css实现div水平、垂直居中
HTML部分:<div class="container"> <!-- This is your content ... --></div>Css部分:就像下面,只需要给.container三行css规则就可以使它在水平方向和垂直方向均处于居中。.container { display: flex; justify-content: center; al原创 2016-06-06 19:25:34 · 978 阅读 · 1 评论 -
BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么?在解释 BFC 是什么之前,需要先介绍 Box、F转载 2016-06-05 20:33:32 · 363 阅读 · 0 评论 -
使用Brackets编写Sass代码
大家知道Brackets是一个可以实时浏览html页面修改效果的工具,对于前段开发人员应该不会陌生,有了它,布局页面再也不是什么困难了, 目前为止已经更新到1.6了。 下载最新版可以到官方网: http://brackets.iosass 大家应该也有所了解,它是一个预编译样式的脚本,可以通过sass编译器编译成相应的css代码。详细的关于sass语法请参考官方网: http://sass-lang原创 2016-06-08 22:05:17 · 2343 阅读 · 0 评论 -
定制椭圆形状
1、自适应椭圆在创建圆形时,是通过border-radius这个属性给四个角指定一个合适的半径,当角半径大于一定值时就是圆了。 Tip : 但是,我们往往不希望设置固定的角半径,而是希望根据容器中的内容自动调整适应。那么,怎么制作出自适应椭圆的?border-radius特性这个属性可以单独制定水平和垂直半径:border-radius: 100px / 75px;使用像素的缺点是,不能自适应原创 2016-06-09 12:20:24 · 1060 阅读 · 0 评论 -
Css转Sass、Css转Less在线工具
1、Css在线转为Sass/Scss :站点:CSS 2 SASS/SCSS CONVERTER2、Css在线转为Less :站点-1: CSS 2 LESS下面随带推荐一个Less转css的在线工具,站点地址是: LESS 2 CSS 站点-2:FISHSTICSS站点-3:CSS2LESS.NET站点-3:CSS PREprocessorsCSS PREprocessors是一个相当不错的站点原创 2016-06-25 14:35:13 · 43085 阅读 · 0 评论 -
遮罩层——通过阴影弱化背景的四种方案
方法一:代码-1:/* 用于遮挡背景 */.overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, 0.8);}/* 需要吸引用户注意的元素 */.lightbox { position: absolute;原创 2016-06-24 21:32:37 · 7537 阅读 · 0 评论 -
【SASS】 一个Opacity混合器(外加如何让背景透明 文字不透明)
下面就是我的这个Opacity mixins的代码,它支持IE, FireFox, Chrome 以及Safari:Sass Opacity混合器:@mixin Opacity($value){ $IEValue: $value*100; // opacity: $value; background-color: agba('', $value); -ms-filter: "pro原创 2016-04-09 15:47:53 · 1494 阅读 · 0 评论 -
CSS,font-family:中文字体的英文名称
插画自弄,不喜莫喷啊 YY!1、宋体 : SimSun 2、新宋体 : NSimSun 3、新细明体 : PMingLiU 4、黑体 : SimHei 5、微软雅黑 : Microsoft YaHei 6、微软正黑体 : Microsoft JhengHei 7、细明体 : MingLiU 8、标楷体 : DFKai-SB 9、楷体 :原创 2016-04-06 21:02:36 · 525 阅读 · 0 评论 -
Less语言特性
Less函数手册作为CSS的一种扩展,LESSCSS不仅向下兼容CSS的语法,而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松,而且你可以在任何时候回退到CSS。Content : 1. 变量 2. 混合(Mixins) 3. 嵌套规则 4. 运算 5. 函数 6. 命名空间 7. 作用域 8. 注释 9. 导入(Import) 10. 变量很容易理解:@n原创 2016-03-22 18:31:22 · 3206 阅读 · 0 评论