CSS
文章平均质量分 64
guo-snowstorm
在校学生
展开
-
两个viewport的故事(二)
http://www.360doc.com/content/13/0918/12/8445249_315365119.shtml转载 2016-08-22 09:52:07 · 684 阅读 · 0 评论 -
CSS hack 技术
原文链接:http://blog.csdn.net/freshlover/article/details/12132801做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用转载 2016-04-11 11:30:10 · 429 阅读 · 0 评论 -
相应式web页面中的meta标签
meta标签使用方法如下:在content属性中,主要包括如下表所示的值,用来处理可视区域:例如:另外,如图:原创 2016-04-11 11:08:37 · 312 阅读 · 0 评论 -
CSS3动画之animation属性学习笔记
一、概述CSS3的animation属性可以像flash制作动画一样,通过关键帧控制动画的每一步,实现更为复杂的动画效果。使用方法:1)利用@keyframes声明一个关键帧组。2)在animation属性中调用上述声明的的关键帧组,来实现动画。二、浏览器兼容性为了最大限度的兼容各个浏览器,在使用此属性时需要加上浏览器的前缀。例如,可以这样: -webkit-animati原创 2016-04-11 09:59:00 · 865 阅读 · 0 评论 -
CSS3过渡
通过:hover、:focus、:active、:checked或者JavaScript触发一个元素,并改变样式时,可以使用transition属性,让外观的变化显得更加细腻,而不是瞬间从一个外观变成另一个外观。一、使用CSS创建简单过渡的步骤:1)在默认样式中声明元素的初始状态样式。2)声明过渡元素最终状态样式,比如悬浮状态。3)在默认样式中通过添加过渡函数,添加一些不同的样原创 2016-04-10 22:26:19 · 562 阅读 · 0 评论 -
CSS3变形笔记
主要关注2D变形,包括平移、旋转、缩放和倾斜效果,每个效果都是变形函数,可以结合css3的transition和动画的keyframe产生一些动画效果(例如结合使用transition属性,可以时变形有一个过渡的时间,而不是一下子就变形了,视觉上比较好)。一、css3变形中的X/Y可用函数:translateX()、translateY()、scaleX()、scaleY()、skewX()和原创 2016-04-10 21:24:11 · 531 阅读 · 0 评论 -
CSS3多列布局
CSS3多列布局可以自动将内容按指定的列数排列,它实现了和报纸、杂志排版非常相似的布局效果。一、CSS3多列布局核心属性:1、columns:集成column-width和column-count两个属性。2、column-width:定义每列列宽度3、column-count:定义分列列数4、column-gap:定义列间距5、column-rule:定义列边框6、c原创 2016-04-10 19:27:38 · 1149 阅读 · 0 评论 -
瀑布流布局的简单应用
原文链接:http://www.cnblogs.com/onlyfu/archive/2012/04/18/2456096.html瀑布流布局简单应用瀑布流布局,简单说,就是按列向下展开,每一列只有固定宽度,没有固定高度。用平时的布局方法肯定不能满足需求,如果仅仅是布局倒也好说,但又要读取数据的时候,就稍麻烦一点。简单说一下原理:利用绝对定位,将每一块数转载 2016-04-09 10:12:33 · 465 阅读 · 0 评论 -
keypress,keydown,keyup问题
原文链接:http://blog.csdn.net/z69183787/article/details/25700837虽然从字面理解, KeyDown是按下一个键的意思, 但实际上二者的根本区别是, 系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码, 而KeyPre转载 2016-03-26 23:22:10 · 590 阅读 · 0 评论 -
css各种居中
原文链接:http://www.cnblogs.com/2050/p/3392803.html居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无转载 2016-03-26 23:15:21 · 807 阅读 · 0 评论 -
css负边距问题
首先,记住,负边距会改变块级框的边界位置(向里收缩)和宽度(特定情况下)原文链接:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.htmlcss中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端转载 2016-03-26 23:11:15 · 544 阅读 · 0 评论 -
CSS圣杯布局与双飞翼布局
原文链接:http://www.cnblogs.com/imwtr/p/4441741.html按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。但在这里实现起来还是有一些区别的 【圣杯布局】在这里,实现了左(200px) 右(220px) 宽度固定,中间自适应,container部分高度保持一致。D转载 2016-03-26 23:03:27 · 470 阅读 · 0 评论 -
CSS3 timing-function:steps()详解
原文链接:http://www.tuicool.com/articles/neqMVr一、不堪回首的过往在应用 CSS3 渐变/动画时,有个控制时间的属性 。它的取值中除了常用到的 三次贝塞尔曲线 以外,还有个让人比较困惑的 steps() 函数。在许多相关文章里,关于这个函数的解释都比较含糊其辞,比如:steps() 第一个参数 number 为指定的间转载 2016-04-11 11:32:42 · 391 阅读 · 0 评论 -
Less简介
Less是一种CSS预处理技术,它是一种动态样式语言,属于CSS预处理语言中的一种,它使用类似CSS的语法,为css赋予了动态语言的特性,如变量、继承、运算、函数等,更方便css的编写和维护。它以在多种语言环境中使用,包括浏览器端、桌面客户端、服务器端。原创 2016-05-12 09:25:27 · 328 阅读 · 0 评论 -
两个viewport的故事(一)
http://www.360doc.com/content/13/0918/12/8445249_315365119.shtml原创 2016-08-22 09:51:25 · 586 阅读 · 0 评论 -
深入理解viewport
移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,转载 2016-08-22 09:49:47 · 710 阅读 · 0 评论 -
CSS样式中字体大小,建议font-size使用em
在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免,那就是使用em单位作为字体显示单位。 浏览器的默认字体高都是16px,所以未原创 2016-06-03 22:51:39 · 17943 阅读 · 0 评论 -
当各个input框前面名字长度不等时,让上下input框对齐方法
这个问题的解决方法很简单,就是想到和想不到方法的问题,基本思想是这样的,给input框前的名字加一个div标签或span标签(display样式值设置为inline-block,设置一个width,让它装得下最长的名字)关键点来啦,就是text-align设置为right,让内部的名字右对齐,效果就出来啦!!原创 2016-04-23 11:34:57 · 3864 阅读 · 0 评论 -
CSS外边距叠加问题
转自:http://www.cnblogs.com/winter-cn/archive/2012/11/16/2772562.html读过李松峰老师翻译的新书中《CSS设计师指南(第3版》的外边距叠加部分( http://www.ituring.com.cn/article/16969)实在是有些捉急啊,这地方实在是有些没写到位,也有错误(如“叠加的只是垂直外边距,水平外边距不叠加”)转载 2016-04-23 10:56:26 · 419 阅读 · 0 评论 -
怎么用css去掉chrome浏览器中input获得焦点时的带颜色边框呢
可以设置表单控件的outline属性为none值,来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框。css代码如下:input{outline:none}原创 2016-04-23 09:39:35 · 33857 阅读 · 0 评论 -
font-family中文字体的英文名称
转自:http://www.xwbetter.com/font-family/宋体SimSun黑体SimHei微软雅黑Microsoft YaHei微软正黑体Microsoft JhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标转载 2016-04-23 09:26:13 · 636 阅读 · 0 评论 -
使用HTML5中的classList操作CSS类
在HTML5 API 里,页面DOM中的每个节点上都有一个classList对象,web developer 可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,还可以判断某个节点是否被赋予了某个CSS类。classList对象中的方法如下:{ length: {number}, /* # of class on this element */ add: fun原创 2016-04-22 20:50:12 · 513 阅读 · 0 评论 -
css动画效果回调处理
转自:http://www.jb51.net/css/258407.html我们在做js动画的时候,很多时候都需要做回调处理,如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等,但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢?CSS3动画也是可以做回调处理的,这里分为两个属性,一个是transition[w3c文档],另外一个是animation[w转载 2016-05-12 22:03:22 · 579 阅读 · 0 评论 -
display:table-cell的几个应用
转自: http://www.zhangxinxu.com/wordpress/?p=1187一、display:table-cell属性简述display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cel转载 2016-05-12 21:50:57 · 784 阅读 · 0 评论 -
去除inline-block元素间的空隙
原文链接:http://www.cnblogs.com/2050/archive/2012/05/16/2504081.html去除inline-block元素间的空隙inline-block元素在布局时会给我们带来很多方便,但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙(有的浏览器可能是8px)。废话不多说了,直接讲解决方法吧。总体来时可分转载 2016-04-07 08:54:37 · 378 阅读 · 0 评论 -
将导航栏固定在窗口的顶部
这是一个常见的问题,代码:html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> .header{ position: fixed; top:0; width: 100%; height: 30p原创 2016-03-26 22:48:40 · 13972 阅读 · 2 评论 -
移动开发之viewport的深入理解
原文链接:http://www.cnblogs.com/2050/p/3877280.html移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、view转载 2016-04-07 11:06:17 · 342 阅读 · 0 评论 -
解决外边距折叠问题
转自知乎评论:http://www.zhihu.com/question/19823139如何解决外边距叠加的问题?上面div的margin-bottom:10px;下面div的margin-top:10px;这样他们的外边距叠加了,有什么方法解决,最好不要转换成padding<div style="width:100px; background转载 2016-04-06 20:43:04 · 2180 阅读 · 0 评论 -
深入了解CSS行高 Line Height属性
原文链接:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html什么是行间距?古时候我们使用印刷机来出来文字。印刷出来的每个字,都位于独立的一个块中。行间距,即传说中控制两行文字垂直距离的东东。在CSS中,line-height被用来控制行与行之间垂直距离。不过,行间距与半行间距,还转载 2016-03-24 14:55:36 · 414 阅读 · 0 评论 -
CSS3层次选择器
在css3中,层次选择器分为4类,如下表所示:选择器类型功能描述E F后代选择器选择E的所有后代元素E>F子选择器选择E的直接子元素FE+F相邻兄弟选择器选择E的后面的直接相邻兄弟元素E~F同样选择器选择E后面的所有F元素原创 2016-03-10 22:05:41 · 614 阅读 · 0 评论 -
CSS 媒体查询
媒体查询是进行响应式设计的核心要素,其功能十分强大,这里只列出了Bootstrap用到的功,具体可以访问 http://www.w3.org/TR/css-3-mediaqueries/进行查看。Bootstrap主要用到min-width、max-width,以及and语法,用于在不同的分辨率下设置不同的CSS样式,实例如下:@media (max-width: 767px) {/*在原创 2016-03-10 22:14:16 · 697 阅读 · 0 评论 -
IE6中宽高值奇数1px bug
一个相对定位的父容器,其子容器采用绝对定位的方式向左或向右靠齐,当父容器的宽度值为奇数时,父容器与子容器之间会存在1px的间隙,不能完全紧贴在一起。一个相对定位的父容器,其子容器采用绝对定位的方式向上或向下靠齐,当父容器的高度值为奇数时,父容器与子容器之间会存在1px的间隙,不能完全紧贴在一起。原创 2016-04-05 22:43:21 · 256 阅读 · 0 评论 -
神奇的border属性
原文链接:http://www.cnblogs.com/binyong/archive/2009/02/21/1395386.html这世界太疯狂,Border属性也搞模仿秀!这里讨论的都是关于边框属性border的极致应用,这些应用虽说有些剑走偏门,但在一些特殊的场合,可能还是会用得上的,如果你对HTML代码有洁癖,有切肤之痛,并且认为冗余的标签影响到你的视觉神经,那转载 2016-04-05 22:15:50 · 535 阅读 · 0 评论 -
透明圆角化背景图片
原文链接:http://www.cnblogs.com/binyong/archive/2009/12/01/1614195.html在上面的案例中,我只给出最为原始的圆角框模型,它还是存在一些不足之处。比如不能将图片应用到圆角框内。而在本例中,我会在上面的基础上作出一些创新。就是将背景图片也圆角化,好像目前在网络上还没有这样的功能应用,我只见过用js方式来实现的,可以参看我的《超圆滑转载 2016-04-05 21:50:44 · 1007 阅读 · 0 评论 -
纯CSS实现圆角框
原文链接:http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html纯CSS实现圆角框是一件大家都说烂了的事件,我也写过两篇总结文章,为什么还会有这篇文章呢,事情是这样的。在我们的以前的项目中,实现圆角框往往是用背景图片来实现的,但是,当这些项目发布上线后,在维护过程中,有时需要添加一些新的需求,因为以前的项目中大量采用转载 2016-04-05 21:42:18 · 526 阅读 · 0 评论 -
CSS导航菜单--三状态玻璃效果菜单(双层滑动门应用)
原文链接:http://www.cnblogs.com/zfang/archive/2011/10/13/2209635.html本例进一步讨论背景图片制作菜单的方法,目标是实现一个具有3个状态的菜单,如图所示三状态玻璃效果菜单首先要准备所需的图片,本例中只是用了一张图片完成这个效果,如图所示:现在设置HTML代码,如下所示。HomeContact转载 2016-04-05 20:18:12 · 2627 阅读 · 0 评论 -
CSS滑动门特性
原文链接:http://www.cnblogs.com/amboyna/archive/2009/02/03/1383000.html 看了css,原来以为没啥技术含量,狂背就成了,现在才发现,背是不行地……最起码光背是不行地,看到这个被css设计师们称为“滑动门”的设计,……,有点意思。 需求是有不同长度的按钮,却要求同一种背景……要是图片缩放的话,圆角是转载 2016-04-05 20:16:26 · 1338 阅读 · 0 评论 -
text-overflow的用法
原文链接:https://www.douban.com/note/347965244/1、text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),也就是说 overflow: hidden; text-o转载 2016-03-22 11:12:33 · 578 阅读 · 0 评论 -
CSS利用padding和margin正负相消实现多列等高
原文链接:http://www.cnblogs.com/2050/archive/2012/07/31/2616460.htmlCSS布局奇淫技巧之-多列等高什么是等高布局?先来看一个案例: 上图中的页面的主体内容是两列结构,左列是用来导航的,右列是用来显示内容的。我们看到它们有一个共同的边框,中间还有一条分隔线,左右两列的高度都是不固定的。这种情况下就需要两列的高转载 2016-04-06 21:13:06 · 5033 阅读 · 1 评论 -
CSS绝对定位中bottom参照点问题
原文链接:http://www.cnblogs.com/2050/archive/2013/04/11/3014901.html绝对定位时关于bottom的参照点的一些问题关于绝对定位元素的参照点,相信大家都知道,那就是离它最近的具有动态定位(absolute、relative、fixed)的祖先元素的左上角,如果它的祖先元素都没有动态定位,则把文档根元素即html元素转载 2016-04-06 21:58:50 · 7899 阅读 · 1 评论