css3
文章平均质量分 82
kylin-v
个性,来自内心;水准,全凭修心!
狂诳与收敛并驾;谦虚与实力共存!
不明、不了!不走不跑!
明明、了了!边走边跑!
展开
-
2012五大主流浏览器 HTML5 和 CSS3 兼容性大比拼
距离上一次发布《五大主流浏览器 HTML5 和 CSS3 兼容性大比拼》转眼已过去一年,在这一年里,浏览器领域的竞争愈演愈烈。Firefox 成为新的“版本帝”但依然未能摆脱被 Chrome 超越的命运,支持更多标准的 IE10 将随着 Windows 8 在10月底正式发布,淡定的 Opera 也在上个月发布了新版本,国内的各大浏览器厂商更是掀起一轮又一轮的 HTML5 跑分竞赛。转载 2013-06-10 13:18:18 · 366 阅读 · 0 评论 -
圣杯布局
圣杯布局我听就听了很久很久啦,而且每次看到圣杯布局总会离不开一篇文章,那就是a list apart里面的In Search of the Holy Grail。随着现在H5,CSS3的发展,IE6,IE7的逐渐退出舞台,或许现在工程师也没那么纠结了(或许而已,移动的大肆发展,还是出现了更多要兼容的东西,但是现在也逐渐不用再纠结那个IE6了吧,起码做移动端的就可以不用)。这篇文章06发布的,或许将转载 2015-03-03 17:14:12 · 370 阅读 · 0 评论 -
CSS布局之--淘宝双飞翼布局
淘宝的页面布局中,最经典的应该是它的 【子列】 【主列】 【附加列】这三个概念。通过查看淘宝店铺页面的DOM结构及其CSS可以发现:淘宝使用的左中右三列布局采用的方式与我们平常有很大差别。一般我们是下面这种做法:div class="sub">子列div>div class="main">主列div>div class="extra">附转载 2015-03-03 16:54:27 · 281 阅读 · 0 评论 -
CSS布局-强大的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。本文非常基础,老鸟可以略过。 负边距在普通文档流中的作用和效果那些没有脱离文档流的元素(指不是浮动元素也不是绝对定位、固定定位的元素等),其在页面中的位置是跟随者文档流的变化而变化的。看下转载 2015-03-03 16:32:24 · 314 阅读 · 0 评论 -
【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧
引言 在现在的前端页面中,尤其是移动端,经常会需要将或者是模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示。 “回复主题”模块,就是跟随页面的浮动一直悬浮在页面的最下方,代码结构如下。1 ...2 section class='footer'>3 div class='reply-topic'>回复主题div>4 sectio转载 2015-03-27 11:44:24 · 1676 阅读 · 0 评论 -
基于CSS3的WEBAPP横向滑动模式演化
前言随着移动网络速率和设备硬件水平的不断提升,webapp的发展更加的native化,其表现效果和性能也会越来越好,在可预计的未来很有可能替代native或者平起平坐,那么我们研究更好的交互体验是非常有必要的。目前我们所常见的webapp越来越多的是以SPA(single page application)的模式进行开发,同时嵌套在android或者ios本地壳里面,也就是hybrid应用转载 2015-07-31 10:52:11 · 371 阅读 · 0 评论 -
响应式设计的未来——Flexbox
CSS中,浮动几乎代替了表格用来服务于布局,做为替身,比表格好用得多。但他们仍然有限。现在有一个建议的解决方案称为CSS Flexible Box布局模块,一般称为Flexbox。Flexbox是CSS3推荐方法,用来帮助设计师更好的控制页面的元素,在没有比较好的解决方案之前,Flexbox要比其他现代布局方案要更强。真的,我们仍然没有在使用,因为Flexbox支持至今还是受到限制的。转载 2015-07-30 12:45:40 · 354 阅读 · 0 评论 -
IE10中的Flexible Box("Flexbox")布局
经过这一系列对Flexbox的介绍,我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解。话又说回来,虽然Flexbox功能强大(特别是弹性布局),但还是很多同学不敢使用,也不想尝试性使用。我想主要原因出于他的语法版本众多,浏览器对其兼容性等。在《“老”的Flexbox和“新”的Flexbox》一文中,让我们了解了如何识别Flexbox的语法版本,而在《使用转载 2015-07-30 17:52:28 · 884 阅读 · 0 评论 -
一个完整的Flexbox指南
Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。(这里我们称为Flex)。Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出转载 2015-07-30 17:35:26 · 338 阅读 · 0 评论 -
【发现资源共同分享】介绍一些web前台开发比较不错的网站
1. 模板之家(强烈推荐)中国div+css 模板中的精品网站 这个网站中的有很多现成的div+css做的模板供大家之间使用,最主要的是它是免费滴。而且图片已经切好、css文件已经写好、html demo也已经写好,您只需要改下里面的内容即可。 网站地址:http://www.cssmoban.com 2. 模板王 这个网站里有很多现成的psd、小图转载 2013-12-26 16:54:02 · 570 阅读 · 0 评论 -
Web前端浏览器兼容初探,小生浅文抛砖引玉,期待高手攻破难关!
前言为什么会有兼容问题?javascript兼容性问题让人头疼的CSS兼容结语前言浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端:1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6.。。。)2 我要遵循标准,我只要ff就转载 2013-12-25 15:25:18 · 476 阅读 · 0 评论 -
【正视CSS 07】再看vertical-align
前言CSS布局(一)vertical-align数字百分比结语前言最近学习CSS有点走火入魔了,CSS一直是自己的短板,没想到最近居然能静下心来学了这么多CSS的东西,着实值得表扬。俗话说得好,不疯活不成魔,我最近真有点刀狂剑痴的味道了。有时候晚上学习结束后,一晚上睡得很浅,我感觉下雨了,但下的雨居然全部是html标签!我在电梯里面看到了一张手机中的图片,我诡异的笑了,转载 2013-12-25 17:23:55 · 424 阅读 · 0 评论 -
关于web中的自适应布局 简明范例
一、”自适应网页设计”的概念 2010年,Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)--这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。二、允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。 viewport是网转载 2013-06-12 18:02:41 · 498 阅读 · 0 评论 -
响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门。Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。那么,Media Queries是如何工作的?两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件:link r转载 2013-06-12 18:04:19 · 427 阅读 · 0 评论 -
CSS2.0实现面包屑
CSS2.0实现面包屑 面包屑这样的 我们以前都是用背景图片做这块工作,但是直到大概2个星期之前在新浪微博上看到用css3.0实现这样的面包屑 但是目前情况下IE6-8并不支持css3.0 只有标准游览器(像火狐 谷歌等支持)。由于有前一次总结一篇关于"CSS实现气泡框效果" 的文章 其中有关于怎么样实现小三角形的列子 所以感觉用那个小三角形可以正好模拟这块工作,所以也就试转载 2014-01-06 11:02:38 · 360 阅读 · 0 评论 -
【正视CSS 03】block与position,出门在外的朋友端午节快乐
【正视CSS 03】block与position,出门在外的朋友端午节快乐前言块级元素block与positionrelative绝对定位的破坏性绝对定位的位置优化之元素隐藏两栏等高布局block与relative的故事IE6与relative的爱情故事这是一个例子结语前言一件非常重要的事情!!!很多朋友问我是不是妹子!!!哎,想我刀狂剑痴叶小钗堂堂七尺男儿居然一而再再转载 2013-12-25 14:21:19 · 330 阅读 · 0 评论 -
【正视CSS 02】inline与line-height、float、absolute的故事
前言那一年,你未娶我未嫁奇怪的现象float与行内元素行内元素与absolute行内元素与vertical-algin参考资料结语小弟初学,有何问题欢迎拍砖哟。前言那是一个很久之前的故事了。。。之前我一直认为CSS最重要的是布局,将一个图片很好的以网页显示出来就是王道。但是,经过后来慢慢入门后,才发现其实布局感觉不是很难了,倒是行内元素这个家伙深藏不露。行内元素属于那种很仁转载 2013-12-25 14:20:21 · 374 阅读 · 1 评论 -
各位周末玩了一天累了吧,我们一起来做两道面试题吧(据说淘宝的哟)!
前言进入正题题目一第二题结语前言我的CSS一直是一块短板,原因就是前几年对CSS不重视,现在重视了项目经验又不足,所以在这块上我是下了很大功夫的,也看了一点书,做了点东西,希望在几个项目后CSS水平有所提高!完了,我最近在思考自己的CSS是短板,那么JS就是强项了吗?却发现自己前端水平貌似也不是很高,于是又开始走老路开始自卑起来了,于是这个时候我们要嘛做点实事做点项目,不然就在转载 2013-12-25 14:55:29 · 377 阅读 · 0 评论 -
DIV+CSS外边距合并问题详解
在进行DIV+CSS网页布局时会遇到许多奇怪的问题,这些问题可能是浏览器的bug,也可能是我们对CSS属性不够了解。下面说说CSS外边距合并(叠加)的问题。简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并是一个相当简单的概念。但是,在对网页进行布局时可能会出现错乱。当一个元素出现在另一个元转载 2013-12-25 15:00:52 · 710 阅读 · 0 评论 -
【正视CSS 05】我们错过了些什么,为何叶小钗?
前言我错过了什么为何叶小钗?containing blockBFCbfc与margin collapsefloat的破坏与重建BFC与haslayout结语前言我的记忆力不行,所以会花很多时间研究相同的事物,这不我又来了。我研究CSS有一段时间了,却无情的发现一个事实,学的越多,懂的越少,卑微的人类啊!回想我几次看CSS权威指南,第一次草草而过毫无所获,第二次醍醐灌顶,第三转载 2013-12-25 16:47:45 · 378 阅读 · 0 评论 -
使用CSS3 Flexbox布局
伸缩容器(flex containers)和伸缩项目(flex items)一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。伸缩容器(flex containers)是一个HTML标签元素,并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items转载 2015-07-30 12:48:37 · 238 阅读 · 0 评论