首页 > 代码库 > 常用css样式

常用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 可强制显示真实分辨率大小
<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="http://www.mamicode.com/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代码。

  1. /* 大屏幕 */
  2. @media (min-width: 1200px) { ... }
  3.  
  4. /* 平板电脑和小屏电脑之间的分辨率 */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7. /* 横向放置的手机和竖向放置的平板之间的分辨率 */
  8. @media (max-width: 767px) { ... }
  9.  
  10. /* 横向放置的手机及分辨率更小的设备 */
  11. @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="http://www.mamicode.com/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="http://www.mamicode.com/b.swf"></object>
<object>元素同样可用于包含html文件
<object width="100%" height="50px" data="http://www.mamicode.com/a.html"></object>
 
<embed>元素 没有闭合标签
<embed width="400" height="50" src="http://www.mamicode.com/s.swf">
 
<form oninput="x.value=http://www.mamicode.com/parseInt(a.value)+parseInt(b.value)0
<input type="range" id="a" value="http://www.mamicode.com/50">100
+<input type="number" id="b" value="http://www.mamicode.com/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样式