CSS3教程
CSS3
1.边框图片 border-image: url(test.png) 10/10px; outline:10px solid #ff0;outline-offset:15px;边框的边框，两边框之间距离
2.三角形 span{display:inline-block;border:50px solid transparent;border-top-color:red;border-left-color:red;}
3.背景大小 background-size:50%/100px 200px/cover/contain;//原图50%/宽为100px 200px/覆盖/容纳
4.阴影 box-shadow:red 0px 0px 10px 0px inset/outside;阴影颜色 X偏移 Y偏移 阴影模糊半径 扩展半径
内部/外部显示 阴影累加box-shadow:red 0px 0px 10px 0px inset,green 0px 0px 10px 0px outside;
文本阴影： text-shadow:red 0px 0px 10px; 阴影颜色，X偏移，Y偏移，模糊半径
5.圆角 边框圆角border-radius:5px/10%; border-radius:50%：圆
border-radius:150px 150px 0px 0px;/ border-radius:20px 100px 0px;/border-radius:20px 100px;
border-top-left-radius:150px;/border-top-left-radius:130px 40px;
6.HSLA background:hsla(0,100%,100%,0.5); 色调,饱和度,亮度,透明度//(0,0%,100%)白;(0,0%,0%)黑
7.RGB backgrund:rgb(255,0,0) 三个值的范围为0~255
(255,0,0)红；(0,255,0)绿，(0,0,255)蓝； (255,255,0)黄；(0,0,0)黑，(255,255,255)白
8.渐变 ①线性渐变：background: linear-gradient(#fff, #333); //由#fff渐变为#333
background: linear-gradient(#000, #f00 50%, #090); //由#00渐变为#f00,并占50%,最后为#090，
background:linear-gradient(0deg,yellow 50px,blue 51px,blue 100px,#F89 101px,#F89 200px);
从下到上黄色高度0-50px，蓝色高度50-100px，#f89高度101-200px
background:linear-gradient(0deg,yellow 50px,blue 100px,#F89 200px);从下到上渐变
重复线性渐变：background:repeating-linear-gradient(45deg,#FFF,#FFF 45px,#ccc 46px)；
②径向渐变：background:radial-gradient(100px 100px,yellow,blue); 从内到外由yellow变为blue，
background:radial-gradient(100px 500px at 50px 10px,yellow,blue);
内部宽100px;高50px的黄色圆在距上面50px左边10px渐变为蓝色
重复径向渐变：background:repeating-radial-gradient(yellow,yellow 20px,blue 21px,blue 40px);
9.White-space处理文字空白：pre保留html中的格式nowrap强制不折行，直到遇到br标签+overflow：
hidde超出部分隐藏+text-overflow:ellipsis;以省略号的形式显示， (overflow:auto;带滚动条的隐藏)
div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} div:hover{white-space: normal;}文字显示一行，划过全部显示
10.链接字体 @font-face { font-family : name ; src : url( url ) ; }
url('../font/lie_to_me_-_ttf-webfont.otf') format('otf'), url('../font/lie_to_me_-_ttf-webfont.ttf') format('ttf'),
url('../font/lie_to_me_-_ttf-webfont.woff2') format('woff2'), url('../font/lie_to_me_-_ttf-webfont.woff') format('woff');
11.文本域的自由缩放resize:both;overflow:auto/horizontal/vertical; 整体/高/宽缩放
12.创建伸缩容器 display:flex;伸缩流方向;默认水平/row;竖直;column; 伸缩性：flex:2;容器按比例分配额外空间。
13.缩放 transform-origin:10% 20px;transform:scale(1.5,0.5);以X轴10%，Y轴的20px为中心点
缩放为原来的宽1.5倍，高0.5倍；//只有一个数值时宽高缩放一致。
14.旋转 div{transition:2s;} div:hover{transform:rotateY(180deg);} 滑过div时2秒旋转180度
15.变形 transform:skew(-30deg,10deg) 内容逆时针倾斜30%；整体顺时针旋转10度；
16.位移 transform:translate(20px,40px);向水平方向位移20px;向竖直方向位移40px;
例：p:hover{ transform:translate(1000px) rotate(360deg);}
模块移动(文字、图片): 两次移动
font:normal 40px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409; -moz-animation: 3s slidein; -webkit-animation: 3s slidein; -webkit-perspective: 100; -moz-perspective: 300px; }
@-moz-keyframes slidein { from {top:-100px;} 85% {top:80%;} to {top:70%;} }
@-webkit-keyframes slidein { from {top:-100px;} 85% {top:80%;} to {top:70%;} }
17.过渡 p:hover{ transform: translate(1000px); background:blue;color:#000;height:500px; }
p{transition:transform 2s ease-in 0.5s,background 1s ease-out,color 5s ease-in-out,height 1s lincar;}
p:hover{ transform: translate(1000px); background:blue;color:#000;height:500px; }
2s内加速位移1000px且延迟0.5s开始；1s内背景减速变蓝，
5s内字体颜色先加速再减速变白，1s内高度恒速变为500px
18.动画 p:hover{animation-play-state:paused;}
p{animation:a1 5s ease-in;animation-iteration-count:3;animation-direction:alternate;animation-fill-mode:forwards;}
@keyframes a1{ 0%{ transform:translate(0p,0px);} 30%{transform:translate(500px,0px);}
50%{transform:translate(1000px,300px);} 70%{transform:translate(300px,500px);}
100%{transform:translate(1300px,800px)} }
19.鼠标指针变化：变成抓手cursor:pointer; cursor:move;
HTML5
1.插入音频: 支持格式：Oggvorbis、MP3和WAV
preload=”auto/metadate/none” 音频文件的下载方式：整个文件/音频时长和开头/不预先下载
Loop/autoplay 无限次播放/自动播放 例：”a.mp3” controls preload=”metadate” autoplay >
2.插入视频： 支持格式：OGG、MP4、WEBM
两种格式都不支持的浏览器看到的是这行文字
如果html5标签和flash格式都不识别，请点击下载
如果html5标签和flash格式都不识别，请点击下载
3.元素定义了在 HTML 文档中嵌入的对象，例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。
4.新增html5布局标签
·
外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容
· 页面或站点主题之外的内容,可用在文章的侧栏 |
· 标签定义摘自另一个源的块引用。 |
· |
· |
· |
· |
·文档的页脚 |
·导航 |
·文章的章节 |
· |
· |
·被突出标记的内容 |
· |
· |
4.新增表单标签
”search”> 搜索框 |
”search”> 搜索框 |
”email”> 邮箱输入 |
”range”> 显示进度条 |
”tel”> 电话号码输入 |
”number”> 数字输入 |
”URL”> 网址输入 |
”date”> 日期类型(带时间控件) |
”datetime”> 日期类型(不带时间控件) |
”week”> 选择星期(带时间控件) |
”month”> 选择年月(带时间控件) |
”datetime-local”>年、月、日、时、分(带时间控件) |
4.网页title滚动
5.获取地理位置
点击按钮获取您当前坐标（可能需要比较长的时间获取）：
附一：.响应式布局
Pc： 1902px 1600px 1366px 1280px
平板 1024px 992px 768px ipad竖屏768X1024
手机 767px 480px 414px 414X395 375X365
外部样式：
//user-scalable=no"页面不进行缩放
//手机页面自适应
javascript的实现
导入样式
附二：.圣杯布局
附三：大型门户站基础css样式命名和应用原则
1.CSS命名规范。
全局样式 base.css 公共块的样式; 首页样式 index.css
内容页面的样式 content.css 频道页面样式 channel.css 详细页面样式 detail.css
2.页面框架结构保留字。
页面容器：＃wrapper |
页面头部：#header #head |
页面中心内容：#maincontent |
页面底部：#footer #foot |
横向方位容器1：main，side |
横向方位容器2：leftframe，midframe，rightframe |
横向分段容器：section，field，column |
盒子内容属性：contentbg |
盒子上方属性：topbg |
盒子下方属性：bottombg |
盒子左边属性：leftbg |
盒子右边属性：rightbg |
3.导航保留字。
导航：nav |
主导航：mainnav |
子导航：subnav |
顶导航：topnav |
边导航：sidebar |
左导航：leftsidebar |
右导航：rightsidebar |
菜单：menu |
快速菜单：quickmenu |
子菜单：submenu |
下拉菜单：dropmenu |
|
4.功能保留字。
列表：list |
标题：title |
摘要：intro |
内容：text |
按扭：btn |
搜索：search |
登陆：login |
注册：regsiter |
提示信息：msg |
小技巧：tips |
图标: icon |
滚动：scroll |
|
|
|
附四
(1).一段时间后页面自动跳转：
在head中
(2).网页关键词与介绍：