----------------------------网页兼容测试--------------------------
http://browsershots.org/
----------------------------自定义属性data------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xx</title>
<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>
</body>
</html>
----------------------------伪类做遮罩------------------------------------------
注意点：
1.一个元素可以做两层蒙版 :before :after,并且要用content激活
2.用transition-delay控制每个蒙版的出现时间
3.最外层盒子要relative,内部元素absolute
4.蒙版文字的移动都是用transform
<one><img /><two><h3></h3><p></p></two></one>
1. one先设relative,长宽,overflow:hidden
2. img设置vertical-align: top;与行中最高元素的顶端对齐
3. two先设absolute,把位置定在one里,不需要设到one外面去
4. p,h3设置好颜色,字距,透明度
5. one:after(before)设置absolute,content,透明度,transform:skew(倾斜) translateX(-100%初始位置);
6. one two:after(before)设置absolute,content,透明度,transform:skew(倾斜) translateX(-100%初始位置);
以上都是设置初始位置形态，下面设置动画效果
因为是鼠标进入one后产生动画,所以每个效果都要有one:hover写在前面
7. one:hover two h3(p)设置透明度/位置变化,然后设置鼠标进入one后多少秒开始动画transition-delay,然后设置此次动画执行多少秒transition:all 1s
8. one:hover:before(after)设置透明度/位置变化,然后设置鼠标进入one后多少秒开始动画transition-delay,此次动画执行多少秒就不用设置了,然后设置此次动画执行多少秒transition:all 1s
9. one:hover two:before(after)设置透明度/位置变化,然后设置鼠标进入one后多少秒开始动画transition-delay,此次动画执行多少秒就不用设置了,然后设置此次动画执行多少秒transition:all 1s
-----------------------------看不懂------------------------------------------
? background-position
?设置页面鼠标选中文字的颜色
?visibility: hidden
?text-stroke
?CSS content 属性 content:attr(url/data-name)
oncontextmenu="return false"
-----------------------------网页设计注意----------------------------------------
Arial、Tahoma、和Verdana、微软雅黑等。 Futura, Merriweather , Proxima Nova ,
大字号使用称体文字
小字号用非称体文字
文本宽度控制在450-700px为宜，此范围内参照字号大小;
英文每行80-100个字母(空格算一个字母)为宜;
中文每行30-40个汉字为宜。
越来越多的页面采用浅灰色和淡黄色做为页面背景
通常超过2种不同的字体用于一个页面会让人觉得混乱
多使用长页面： 长页面更能创建沉浸式用户体验，因为相比于点击“下一页”按钮，直接滚动或者滑动对于用户来说操作更加简单，而且滑动的精准程度远比点击链接和按钮要好得多。
-----------------------------搜索引擎优化----------------------------------------
一、内部优化
（1）META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化
（2）内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接
（3）网站内容更新：每天保持站内的更新(主要是文章的更新等)
二、外部优化
（1）外部链接类别：博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相关信息网等尽量保持链接的多样性
（2）外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升。
（3）外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名
1. 时效长：在有专业SEO维护的情况下可以长久有效，一年、两年甚至永远。
2. 效果好：网站流量提升；注册用户增多；这些都是可以精确量化的，而不像广告，效果难以准确评估。
3. 性价比：比竞价排名和广告便宜很多。竞价排名或网络广告的费用越来越高，而SEO相比有绝对优势。
4. 用户体验：增强网站友好度，增强品牌美誉度。
-----------------------------绝对定位居中---------------------------------------
如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。
兼容性不错的主流用法是：
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
但，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。
CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，于是，我们可以：
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
于是乎，无论绝对定位元素的尺寸是多少，其都是水平垂直居中显示的。
--------------------------------知识点----------------------------------
字体颜色白色更好看,按钮最好不要有边框,
背景用蒙版模糊化,使用不同大小和格式的字体
纯css时钟:用动画@keyframes做 秒针每60s转一圈.....
文字描边效果 :text-shawdow 和 text-stroke text-shadow属性值可以不断累加，但是text-stroke属性却不行，如果想要实现多重描边效果，可以借助伪元素多层叠加模拟。
text-align: justify;让英文字体两端对齐，要让中文也对齐的话，得用split("").join(" ");加入空格才行
text-overflow: ellipsis; 用...表示超出范围被隐藏的内容 一般要和不换行合用:white-space:nowrap;
letter-spacing: px; 控制文字间间距 可以使负数
background-attachment:fixed/scroll; 用于视差滚动
----------------------------控制大小写-------------------------------------------
Object.style.textTransform="none|capitalize|uppercase|lowercase|inherit"
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
----------------------------对文字空白处理--------------------------------------
white-space:normal 默认。空白会被浏览器忽略。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
--------------------------在文字上中下划线--------------------------------------
text-decoration: underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
repeating-linear-gradient(180deg, #f00, #ff0 10%, #f00 15%); 线性渐变(角度,颜色空格占用比率,颜色空格占用比率,....)
webkit-background-clip: text; 背景修剪成text形状
-webkit-text-fill-color: transparent; 文本颜色透明,和下一层的颜色相同 color:transparent; 非文本颜色透明
这个CSS声明组合可以让文字正体显示为背景模样，于是文字可以是渐变色或者甚至图案，再配合-webkit-text-stroke描边，文本的表现力又可以更上一层楼。
设置块元素转换为行内元素，会因为各元素长度不同而浮动，需要取消浮动
------------------------------transform---------------------------
transform:transform:translate(100px,20px); 向x轴位移100px,y轴位移20px
transform:rotate(30deg) 顺时针30度
transform:scale(2,1.5) x轴从中心点向两边总共增加一倍长度,y轴从中心点向两边总共增加0.5长度
transform:skew(30deg) 倾斜30deg
transform:Transform-origin(x,y); 控制最外层盒子的视角深度,类似于position:relative;
下面4个用来控制背景图片,一般一起使用
background-image:url(‘bgimage.gif‘);
background-repeat:no-repeat; 不平铺
background-attachment:fixed; 固定位置
background-position:200px 100px; 控制背景位置在x轴200px,y轴100px
---------------------------------css动画---------------------------------
@-webkit-keyframes loop{
0%{background-position: -800px 0;}
100%{background-position: -0 0;}
}
animation:loop 10s linear infinite;
-------------------------------display的兼容和bug--------------------------------------
把块元素display:inline-block;后会出现间隙的问题
? block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；
? inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；
? font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；
? letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。
-----------------------------关于display---------------------------------------
display:block 将对象变成宽度和高度都可以设置的块元素
display:inline-block 将对象变成高度定死，宽度自适应的行内块元素
display:display:box 将对象作为弹性伸缩盒显示，同样继承block属性。（伸缩盒最老版本）
display:inline-box： 将对象作为内联块级弹性伸缩盒显示，同样继承inline-block属性。（伸缩盒最老版本）
display:flexbox 将对象作为弹性伸缩盒显示，同样继承block属性。（伸缩盒过渡版本）
display:inline-flexbox 将对象作为内联块级弹性伸缩盒显示，同样继承inline-block属性。（伸缩盒过渡版本）
display:flex 将对象作为弹性伸缩盒显示，同样继承block属性。（伸缩盒最新版本）
display:inline-flex 将对象作为内联块级弹性伸缩盒显示，同样继承inline-block属性。（伸缩盒最新版本）
---------------------------黑白----------------------------------------
这段代码会让你的彩色照片显示为黑白照片，是不是很酷？
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-------------------------------@media-------------------------------------
可以参照一下bootstrap的媒体查询宽度
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
网页设计标准尺寸:
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
max-device-width和max-width是有区别的，表现在如下几个方面：
1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
2、max-width是目标显示区域的宽度，例如，浏览器宽度。
3、如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。
4、如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。
5、通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。
---------------------------target ----------------------------------------------------
_blank - 在一个新的未命名的窗口载入文档
_self - 在相同的框架或窗口中载入目标文档
_parent - 把文档载入父窗口或包含了超链接引用的框架的框架集
_top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架
<td>标签中添加超链接
只能在<td></td>标签内添加超链接，而不能在<tr></tr>中添加（不符合标准）。如果直接使用<a href></a>无效，可通过以下代码实现：
<td style="cursor:pointer;" onclick="window.open(‘http://blog.163.com/hdyl_8603‘,‘_blank‘)">网址 ：<a href=‘‘>hdyl的blog</a></td>
----------------------boder-shadow----------------------------------------------
官方用语： box-shadow:1px 2px 3px 4px #ccc inset；
来分别看一下以上六个值的含义： 1px 从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）；
2px 从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）；
3px 阴影的模糊度，只允许为正值；
4px 阴影扩展半径；
#ccc 阴影颜色；
inset 设置为内阴影（如果不写这个值，默认为外阴影）；
四个方向阴影正确写法
box-shadow: 0px -10px 0px 0px #ff0000, /*上边阴影 红色*/
-10px 0px 0px 0px #3bee17, /*左边阴影 绿色*/
10px 0px 0px 0px #2279ee, /*右边阴影 蓝色*/
0px 10px 0px 0px #eede15; /*下边阴影 黄色*/
---------------------------json----------------------------
["one", "two", "three"] //数组
{ "one": 1, "two": 2, "three": 3 }//对象，注意成员名称必须用双引号
{"names": ["张三", "李四"] }//值为复合对象
[ { "name": "张三"}, {"name": "李四"} ]//对象数组
http://blog.csdn.net/lyt_7cs1dn9/article/details/53398698
--------------------------em/rem-----------------------------------------------------------
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
然后用rem做
html{
font-size: 32px;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 375px){
html {
font-size: 37.5px;
}
}
@media only screen and (min-width: 414px){
html {
font-size: 41.4px;
}
}
body{
font-size: 12px;
记得要把body font－size默认值设回来 不然就默认字体就变成32px啦
}
