在HTML5中考虑各个浏览器兼容问题,通过加入不同的前缀,从而满足在各个浏览器的兼容性。
-moz-是Firefox的前缀;
-webkit-是Safari和Chrome的前缀;
-o-是Opera的前缀;
-Khtml-是Konqueror的前缀;
-ms-是Internet Explorer的前缀;
-Chrome-是Google Chrome的专用前缀;
HTML5文档标签中,用到的标签有:
<header>一般用于小块标题
<nav>用于导航链接
<section> 用于内容块
<aside> 用于边框信息或者广告栏
<footer> 评论数量或者版权
<article> 用户评论块
<hgroup> 多级标题分组
<figure> 引用独立图像
<figcaption> 图像信息描写
<mark><small>标注文字重要性
<cite>标识作品
对不同模块通过CSS样式进行调整。
border-radius——实现对边框的圆角化。border-radius:5px;border-radius:4px 5px;圆角化从左上到左下顺时针。
box-shadow至少需要三个属性值。box-shadow:color horizontal-translate vertical-translate [模糊效果px];
box-shadow:green 15px 15px;
box-shadow:green 15px 15px 10px;
文字阴影text-shadow与盒子边框效果一样;
text-shadow:blue 10px 10px 3px;效果如下:
在设置背景颜色渐变时,可以采用linear-gradient、radial-gradient。对应的方法和属性为:linear-gradient(start position,from color.to color)、radial-gradient(start position,shape,from color,to color)
background:-moz-linear-gradient(top,#fff,#069);
很遗憾这里暂时没显示出来,有点没想通。
在放射渐变中的shape设置有两个值:circle、ellipse;
transform这个属性可以改变元素的形状。它含有几个基础函数:scale、rotate、skew、translate。
其中scale、rotate均只接受一个值,分别为放大缩小倍数、旋转角度;
scaleX、scaleY也是函数;
skew如果只有一个参数,那只有水平方向受到影响‘如果有两个参数则对象两个方向受到影响。也可以应用skewX、skewY。
transform:skew(20deg);
transform:skew(20deg,10deg);
transition可以来使元素在两个状态之间过度。受到四个参数限制:受影响的属性、总持续时间、声明转变路径的关键字(ease、linear、ease-in、ease-out、ease-in-out) 和读读延时;
transition:color 2s linear 1s;
在不显示过度状态时,我们可以直接采用CSS样式中的hover,即鼠标移动到某个区域及状态发生改变。
#orign-box{};
#orign-box:hover{};
这是暂时了解到CSS,以后继续补充