标签：translate 网站名 内容 ellipsis enabled anim pointer user 标题
opacity：0.2；图像的透明度
设置文本域无法拉伸textarea{resize:none;}
display:none;隐藏当前元素不保留位置 visibility：hidden 隐藏当前元素 但是保留位置
filter：alpha（opacity=20）
margin:0 auto;按钮居中
vertical-align:middle; /* 居中对齐，实现图片居中 */
margin-left: auto;
margin-right: auto;实现div居中
优先级为：
!important > id > class >tag !important比内联优先级高，但内联比ID要高
CSS3新增伪类举例
p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素
p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素
p:only-of-type 选择属于其父元素的唯一的<p>元素的每个<p>元素
p:only-child选择属于父元素唯一子元素的每个<p>元素
p:nth-child(2)选择属于其父元素的第二个元素的每个<p>
:enabled :disabled控制表单控件的禁用状态
:checked 单选框或复选框被选中
transform：rotate（8deg）旋转 scale（0.8,0.8）缩放 translate（0px,-29px）定位 skew(-9deg,0deg)倾斜;
position:fixed;
background:rgba(0,0,0,0.8);
z-index:1000;
text-shadow:10px 10px 4px red投影x轴偏移量 y轴偏移量 阴影模糊半径 阴影颜色 给文本添加阴影效果
text-shadow:1px 1px 0 red;文本阴影实现文字立体感
box-shadow:给元素快添加周边阴影效果
display: inline-block;块状一行显示
.font-03 ul>li:nth-child(2){}
word-wrap:break-word; 字体自动换行
target-densitydpi=device-dpi 可强制显示真实分辨率大小
<meta name="viewport" content="width=device-width,initial- scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target- densitydpi=device-dpi"> （ 加上这句 target-densitydpi=device-dpi 可强制显示真实分辨 率大小）
pixel是相对单位 point是绝对单位
odd是基数 even是偶数 例子：p:nth-of-type(odd){color:red}
background：-moz-linear-gradient(top,#000000,red)渐变效果
径向改变：-moz-radial-gradient(red,green,blue);颜色由里向外
重复径向渐变-moz-repeaating-radial-gradient(red,yellow10%,blue)
border-radius:百分比 设置圆角边框（也可接受两个参数 0px 120px）
abbr标签指示间歇或者缩写 <abbr title="jjjjj">text</abbr>
acronym标记一个首字母缩写<acronym title="World wide wed ">www</acronym>
Example.com的联系信息
<address></address>
spellcheck=true|flase检测文本内容拼写是否正确
<article>标签规定独立的自包含内容<article>
<aside>标签定义其所处内容之外idea内容</aside>
<audio src="some.wav">您的浏览器不支持audio标签</audio>定义声音比如音乐
<head>
<base target="_blank">
</head>
transition:width 2s;2秒内填充
background-image:url(‘1.jpg‘)
backgrond-size:80px 60px;调整图片的大小
background-size:100% 100%;完全填充
background-image:url(img.gif)，url(image.gif);多个背景图片
background：linear-gradient（top,color1,color2.....）上下渐变
background:-moz-radial-gradient(red,green,blue)由中心开始渐变
background:-moz-radial-gradient(red5%，green15%，blue60%) 径向渐变-颜色节点不均匀分布 椭圆形
background：-moz-radial-gradient(circle,red,green,blue);原形径向渐变
background：-moz-repeating-radial-gradient()red,yellow10%,green10%);重复径向渐变
backgound-repeat:repeat-x;只在水平方向平铺
background-repeat:no-repeat;设置定位与不平铺
background-position:right top;设置图片定位
background:#ffffff url(‘1.jpg‘) no-repeat right top;简写
简写顺序 color image repeat attachment position
text-align:justify;文本的对齐方式
text-decoration:none;删除文本的装饰 链接的下划线
text-decoration:overline线在文字上
text-decoration:line-through;线在文字中间横穿
text-decoration:underline;在文字下方画线
text-transform:uppercase;大写
text-transform:lowercase;小
text-transform:capitalize;首字母大写
text-indent:50px;文本缩进
<sub> 下标</sub> 和 <sup> 上标</sup>
超过隐藏省略号代替color:#666666;width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
word-wrap:break-word;允许文本换行
font-style:normal;
font-style:italic;斜体
a:link{background-color:#ddd}
a:hover{background-color:#ddd}
a:visited已经访问过的链接
a:active点击 伪类 点击
list-style-image:url(‘1.gif‘)作为列表标记图形
border-collapse:collapse;折叠边框
vertical-align:bottom;底部
transform：rotate（30deg）;2D效果
transform：translate（30px,100px；左上距离
transform：scale（2，3）对元素进行缩放
transform:matrix(0.8,0.5,-0.5,0.8,0,0);接收6个参数包含旋转，缩放，移动（平移）和倾斜功能
transform：skew（30deg,20deg）; 该元素会根据横向x轴和垂直y轴给定参数（是绕着x轴和y轴周围20度和30度的效果）
transform：rotateX（120deg）; 围绕其在一个给定度数x轴的元素
transform：rotateY（120deg）；围绕y轴旋转
transition-duration:5s；在指定时间内
transition:width 2s, height 2s, transform 2s;
时间transition-delay:2s;
transition-property:width;逐渐改变宽度
transition-delay:2s;指定毫秒内切换效果
例子div:hover{
width:200px;height:200px;transform:rotate(180deg);
}
{
width:100px;height:100px;
animation:myfirst 5s;
}
@keyframes myfirst
{
form{background:#f0c;}
to{background:#fc0;}
}
div{width:100px;height:100px;background:red;position:relative;
animation:myfirst 5s linear 2s infinite altername;
animation:myfirst(@keyframes动画定义的名称) 5s（完成一周期所花费的时间）
linear(规定动画运动曲线)
2s（规定动画何时开始） infinite规定动画默认的次数 默认是1
alternate;（规定动画下一周期是否逆向默认是normal）
}
虚线 border-bottom: 1px dashed #e0e0e0;
@keyframes myfrist
{
0% {background:red; left:0px;top0px;}
25%{background:yellow; letf:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
100%{background:green;left:0px;top:0px;}
}
animation:mymove 5s infinite;
@keyfraames mymove
{
form {background-color:red;}
to{background-color:blue;transform:rotate(180deg);width:100px;height:100px;}
}
固定底部position:fixed;bottom:0px;left:0px;
@media screen and (max-width:320px){
css代码
}
上面代码说明，如果当前屏幕大于320像素则执行下面css代码。
- /* 大屏幕 */
- @media (min-width: 1200px) { ... }
-
- /* 平板电脑和小屏电脑之间的分辨率 */
- @media (min-width: 768px) and (max-width: 979px) { ... }
-
- /* 横向放置的手机和竖向放置的平板之间的分辨率 */
- @media (max-width: 767px) { ... }
-
- /* 横向放置的手机及分辨率更小的设备 */
- @media (max-width: 480px) { ... }
边框
火狐-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:dotted;.....outset边
-moz-column-rule-color:#f0c;边颜色
创建缩略图
<a target="_blank" href="1.jpg">
<img.......>
</a>
img{opacity:0.3;透明度 }
按钮 cursor：pointer；手势 cursor：not-allowed;禁用按钮
在span之后添加内容
.button span:after{content:">>";position:absolute;}
ul >li{display:inline;}排列去样式
<object>元素 所有的浏览器都支持这个标签
<object width="400" height="50" data="b.swf"></object>
<object>元素同样可用于包含html文件
<object width="100%" height="50px" data="a.html"></object>
<embed>元素 没有闭合标签
<embed width="400" height="50" src="s.swf">
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
超出省略号显示
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.il_content .media-body p{}
<? echo iconv(‘GB2312‘,‘UTF-8‘,‘赔付宝‘);?>强制转换字符集
SELECT * from (SELECT pi.id pi_id FROM huadao.core_t_policy ctp LEFT JOIN supeibao.policy_info pi on ctp.`POLICYNO` = pi.policyno) datas where 1 and datas.pi_id is not NULL
htmlspecialchars_decode
解析编辑器
网站页面规范
1，首页
<head>
<title>网站SEO标题</title>
<meta name="description" content="网站描述" />
<meta name="keywords" content="网站关键词" />
</head>
2，网站频道
<head>
<title>频道/栏目SEO标题-网站名称</title>
<meta name="description" content="频道/栏目描述" />
<meta name="keywords" content="频道/栏目关键词" />
</head>
3，网站文章页
<head>
<title>文章SEO标题-网站名称</title>
<meta name="description" content="文章描述" />
<meta name="keywords" content="文章关键词" />
</head>
常用css样式
标签：translate 网站名 内容 ellipsis enabled anim pointer user 标题
原文地址：http://www.cnblogs.com/lixiaoni/p/6898854.html
