常用css样式

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 可强制显示真实分辨率大小

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的联系信息

spellcheck=true|flase检测文本内容拼写是否正确

<article>标签规定独立的自包含内容<article>

<aside>标签定义其所处内容之外idea内容</aside>

<audio src="some.wav">您的浏览器不支持audio标签</audio>定义声音比如音乐

<head>

</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;文本缩进

超过隐藏省略号代替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 alternate;

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;边颜色

创建缩略图

<img.......>

</a>

img{opacity:0.3;透明度 }

按钮 cursor：pointer；手势 cursor：not-allowed;禁用按钮

在span之后添加内容

.button span:after{content:">>";position:absolute;}

ul >li{display:inline;}排列去样式

<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>

posted @ 2017-05-24 14:43 lxn* 阅读(214) 评论(0) 编辑收藏举报

刷新页面返回顶部

lxn*

常用css样式

公告