css3 calc()自适应布局

我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing,在一定程度上解决了上面的问题,而在今天的文章中我们来通过css3新增加的另外一个属性calc()来实现适应布局。

calc()是css3新添加属性,它可以让你使用一个算术表达式来表达长度值,这意味着可以用它来定义div的宽度,并设置margin、padding、border等。

calc()的运算规则

  • 使用”+”、”-”、”*”、”/”四则运算;
  • 可以使用百分比、px、em、rem等单位;
  • 可以混合使用各种单位进行计算。

未完,继续阅读

css3教程:box-sizing属性

说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反,是不包括border和padding的。

在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性:box-sizing,它具有“content-box”和”border-box“两个值。
未完,继续阅读

html5教程:audio音频标签和video视频标签

html5新增audio标签使web开发人员可以轻松的在网页内部加入音频,而video视频标签则可以加入视频文件。

audio音频标签

在页面中加入audio音频:

<audio src="horse.ogg" controls="controls" autoplay="autoplay" loop="loop">您的浏览器不支持audio</audio>

未完,继续阅读

css3 text-shadow文字阴影

在前面的文章里面我们讨论了关于css3图层阴影 box-shadow来实现图层阴影的效果,今天我们来共同学习一下如何实现文字阴影的效果,将用到css3的另外一个属性text-shadow,这两个效果分别增强了图层和文字的质感,创建立体效果。

语法:

text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
text-shadow:X轴上的位移(正负皆可),Y轴上的位移(正负皆可),阴影的宽度,阴影的颜色值

未完,继续阅读

css3图层阴影 box-shadow

css3的box-shadow属性可以实现图层阴影效果。还有一个和它相关的属性text-shadow,是用来实现文本阴影效果,这将在下一篇文章里和大家一块了解。

box-shadow语法:

box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值

未完,继续阅读

css3圆角 border-radius

border-radius

在css2中我们制作圆角时通常使用背景图片,然后添加四个空标签,通过绝对定位来实现。不仅制作麻烦,而且后期维护也不方便。现在css3中添加了border-radius属性,不仅减少了网站维护的工作量,使得代码更简单,而且还提高了网站的性能,减少http请求。 未完,继续阅读

media type媒体类型和media query 媒体查询

media type媒体类型是css2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现丰富的界面。media query(媒体查询)是对media type的一种增强,是css3的重要内容之一。随着移动互联网的发展,它越来越得到大家的重视。 未完,继续阅读