CSS教程

首页>前端教程>CSS教程

这是我看到深入解释vertical-align最好的文章!

最近在备CSS基础的课程,以为很简单的事情,结果却在一些基本的概念上翻了车,有时候你以为简单的事情,其实你并不理解它的原理。在百度上翻了一下午,终于找到了一篇好文章,是翻译自国外的,很有意义,所以转载到自己博客上。这是中文的链接:你所不知道的vertical-align这是英文的链接:Vertica...

web的经典布局方案介绍

布局是网页的框架,灵活的布局可以让页面信息得以合理的摆放,强健的布局方案可以适应不同分辨率下页面的显示。1、上中下三栏式2、左右两栏式3、左右加页眉页脚4、左中右三栏式       浮动布局    &...

CSS3第十八课:响应式web布局——grid 栅格布局基础介绍

一、什么是栅格布局一提到响应式布局,很多人都会使用框架,比如熟知的bootstrap,但是框架大而全,相应的代码就冗余,有时候开发一个小应用根本不用上框架,直接自己搭建一个小的栅格系统就可以用了。其实栅格,说直白一点就是把页面划分成很多等分的列。比如,经典的12grid,就是把网页划分成等分的12列...

CSS3提供的一个计算函数calc(),在响应式的计算上很有帮助

CSS3提供的函数calc(),是calculate(计算)的缩写,具有计算的能力,允许通过+ - * / 运算符构成一个数学表达式,最终产生一个具体的value值。 calc()是动态计算,任何数值都可以用这个函数计算,比如width,height,font-size...

css3第十七课:filter滤镜,真美颜

因为Edge13支持这个属性了,所以打算写出来,毕竟已经看到有项目使用这个CSS3的新属性了。CSS3 filter 属性是用来为一个元素(通常是图片)添加特殊的效果。一、语法结构filter: none | blur() | brightness(...

html5提供的picture标签可以更好地解决图片响应式的问题

一、图片响应式设计的老方法。在以前为图片做响应式设计的时候,一般用三种方法。第一种,直接让图片和父容器保持100%:img {     width: 100%;     height: ...

CSS3第十六课: Media Queries媒体查询——响应式布局的关键

其实在CSS2的规范就提出了@media的规则,就是根据不同的设备使用不同的css样式。遗憾的是很多设备媒介没有得到支持。所以在CSS3中,关于媒体查询的含义发生了改变,不再是查看设备的类型,而是查看设备的功能。媒体查询主要可以查看设备的功能如下:设备视口的宽度和高度设备本身的宽度和高度。横屏竖屏(...

CSS3第十五课:flex弹性布局,一维布局最好的方法(下)

过年最大的好处就是可以和孩子出门疯玩,不到天黑不回家。一晃眼,又坐在教室里,开始上课写文章了。一直写博客,但是今年想尝试一下自媒体,写写教育类的文章,算是新年的一个flag吧。进入正题……上一篇讲了作用在flex container上的6个属性,这篇文章讲解作用在flex items上面的6个属性。...

CSS3第十五课:flexbox弹性布局,一维布局最好的方法(上)

都9102年了,还使用float布局呢,是时候了解一下被IE11以及谷歌、火狐等浏览器都支持的flex弹性布局了。flexbox布局从最早的2009年开始,历经了各个不同的版本,还有各路浏览器早期的前缀时期,现在在IE11上已经没有问题了,虽然pc端因为IE9的存在还没有彻底普及,但是移动端已经是没...

CSS3第十四课:box-sizing、outline-offset、resize用户界面几个特性介绍

CSS3中,新增了如下的user interface(用户界面)特性:但是,除了box-sizing,outline-offset,resize的支持度不错之外,其他几个特性浏览器全部不支持。曾经早期的Opera还支持,自从被Chrome收编之后,也都不支持了。所以,这篇文章只谈被浏览器支持的三个特...

checkbox复选框样式美化的问题

复选框,单选框都不好直接用css样式美化,总得用点奇思妙想才行。如果只考虑谷歌内核的浏览器的话,那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持,这就逼得大家另想办法了。利用label挂钩checkbox的特点来实现。当html代码中,labe...

select下拉菜单的兼容性问题,支持IE10以上的方法

对于表单控件的样式修改一直是个老大难的问题,如果不做大手术,还是很好兼容IE10和谷歌等现代浏览器的。有两种常规方法。第一种:直接干掉select旁边的小箭头,用图片或者border绘制三角形代替。chrome下面需要利用谷歌的私有属性-webkit-appearance完成。这个appearanc...

linear-gradient线性渐变的兼容性问题,有神器!

兼容性问题一直是让前端工程师脱发的主要罪魁祸首,所以,利用一些神器工具可以挽救你的发际线。先来一个兼容性全包括的代码片段,这是IE9不支持圆角的全系列:.gradient{ background: #d91915; /* Old browsers ...

CSS3第十三课: steps animation逐帧动画,你不应该错过的最详篇!

animation动画除了可以实现补间动画外,还可以完成逐帧动画。在animation的属性中,有个属性animation-timing-function一共具有如下这些值,来自于MDN。/* Keyword values */ animation-timing-fu...

CSS3第十二课:强大的多时间段animation动画!

animation动画与transition过渡动画有两个明显的区别:1、transition过渡动画只能执行一个时间段的动画,从初始到结束。而且必须有事件触发,比如hover事件,或者添加了新的class属性等。2、animation动画可以分时间段执行,比如第一个时间段执行一段动画,第二个时间段...

CSS3第十一课:transform2D变形,注意多个变形的执行顺序!

用过ps的童鞋几乎都知道ctrl+T自由变换工具,我觉得CSS3 transform就汲取了ps变形的精华,好好地继承了这三板斧精神。 一、transform变形 实现对元素的缩放、移动、旋转、倾斜,分别对应以下几个方法。 注意:变形...

CSS3第十课:transition过渡动画(内附神器!)

在十年前,我用flash做动画的时候,总结了一下flash的运动规律,主要有形状、大小、位置、角度、颜色、透明度、加减速等变化。没想到移动端异军突起,似乎一夜之间,flash就没落了。想起自己曾经每天必逛的闪吧,在2012年也停止更新,虽然现在网站还在, 但也只是一个象征了,偶尔回去悼念一下,怀念过...

CSS3第九课:重复放射性渐变repeating-radial-gradient

repeating-radial-gradient重复性放射渐变和radial-gradient放射渐变的参数都是一样的,差别在于是否利用渐变单元扩展至整个容器。可以先看看这篇详细介绍放射性渐变的文章↓CSS3教程:background-image之放射性渐变(radial-gradient)详解一...

CSS3第八课:重复线性渐变repeating-linear-gradient

很早以前写过一篇线性渐变的文章,如果还没有掌握CSS3中的线性渐变,建议先看一下。CSS3教程:background-image之线性渐变(linear-gradient)最in版!时隔一年半,再把它的姐妹篇——重复线性渐变搞定,才算是真正完结了吧。忍不住感叹,How time flies!这个属性...

CSS3第七课:background多重背景及新增属性

关于CSS3的边框、圆角、阴影等新特性,在以前的CSS3教程里面已经详细介绍过,在这个系列里面就不再啰嗦,有兴趣的可以直接查看CSS3教程系列。 这篇文章详细讲解一下CSS3多重背景这个新特性,真的是很强大。 一、多重背景的用法 ba...
Top