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

常用css样式

2024-09-25 00:12:39   216人阅读

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


联系
我们