html标签笔记一

在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,以后继续补充

猜你喜欢

转载自blog.csdn.net/qq_15508113/article/details/50791571