CSS常用技巧代码

发布时间:2015-10-23 16:13 | 人气数:421

公共样式重置.css

@charset "utf-8";/* CSS重置 reset.css */
/*全局字体1rem等于100px*/
html{font-size:625%}
body{background:#FFF;font-size:0.14rem;color:#000;word-wrap:break-word;word-break:break-all;font-family:'微软雅黑','Microsoft Yahei','Helvetica Neue',Tahoma,Helvetica,"\5B8B\4F53",Arial,sans-serif}
body,form,img{padding:0;margin:0;border:0}
dl,dd,dt,ul,ol,li,h1,h2,h3,h4,h5,h6{list-style-position:outside;list-style-type:none;margin:0;padding:0;border:0}
input[type=radio],input[type=checkbox]{cursor:pointer}
i,p{display:block;font-style:normal;font-weight:normal;text-decoration:none;margin:0;padding:0}
li,dt,dd{white-space:normal}
td,p,li,form,input,select,div,a,span{page-break-after:auto}
table,td,img,div,span,form,input{border:none;margin:0;padding:0}
select{margin:0;line-height:normal;padding:0.01rem}
img{vertical-align:bottom;display:block}
/*默认链接样式*/
a{text-decoration:none;cursor:pointer}
a:link{color:#259}
a:visited{color:#999}
a:hover{color:#C00;text-decoration:underline}
a:active{color:#C00}
/*清除继承浮动*/
.clear{clear:both;font-size:0rem;visibility:hidden;width:0;line-height:0}
/*清除内部浮动*/
.clearfix{*zoom:1}
.clearfix:after{visibility:hidden;display:block;font-size:0rem;content:"";clear:both;height:0}
* html .clearfix{height:1%}
/*垂直居中IE11+*/
.vmiddle{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}
/*通用字体*/
.fN{font-size:0.14rem;line-height:0.2rem}
h1{font-size:0.2rem}
h2{font-size:0.18rem}
h3{font-size:0.16rem}
h4,h5,h6{font-size:0.14rem}
small{font-size:0.12rem}
/*常用效果 Flex*/
.fShadow{text-shadow:0.01rem 0.01rem 0 #EEE}
.shadow{-webkit-box-shadow:0.05rem 0.04rem 0.05rem rgba(0,0,0,0.5);-moz-box-shadow:0.05rem 0.04rem 0.05rem rgba(0,0,0,0.5);box-shadow:0.05rem 0.04rem 0.05rem rgba(0,0,0,0.5)}
.alpha{opacity:0.7;filter:alpha(opacity=70)}
.radius{-moz-border-radius:0.1rem;border-radius:0.1rem}
.mT10{margin-top:0.1rem}
.flex{
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: box;
    display: flexbox;
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    width: 100%;
    height: 100%;
    background-color: gray;
}

所有一切都垂直居中,在IE11中要小心FLEXBOX

html,body{
height:100%;
margin:0;
}
body{
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
display:-webkit-flex;
display:flex;
}
文字投影
text-shadow:1px 1px 0px #630
阴影效果
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.2);
网站变成灰色
html {
   filter: grayscale(100%);//IE浏览器
  -webkit-filter: grayscale(100%);//谷歌浏览器
  -moz-filter: grayscale(100%);//火狐
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);//谷歌浏览器
}
div禁止选择
unselectable="on" onselectstart="return false;"
CSS 中form表单两端对齐,做form表单的时候,前面经常有姓名,年龄,公司名称等等,有的是2个字,有的是4个字,如何让字对齐呢?有的人的做法是打几个空格,但是这样不是很准确,最好的办法是如下:
<div class="box1">
    <div class="test1">姓 名</div>
    <div class="test1">姓 名 姓 名</div>
    <div class="test1">姓 名 名</div>
    <div class="test1">所 在 地</div>
    <div class="test1">工 作 单 位</div>
</div>
.test1 {
            text-align:justify;
            text-justify:distribute-all-lines;/*ie6-8*/
            text-align-last:justify;/* ie9*/
            -moz-text-align-last:justify;/*ff*/
            -webkit-text-align-last:justify;/*chrome 20+*/
        }
        @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
            .test1:after{
                content:".";
                display: inline-block;
                width:100%;
                overflow:hidden;
                height:0;
            }
        }
给input的placeholder设置颜色
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}
CSS :after 和:before选择器
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0em}
透明度
opacity: .9;
filter:alpha(opacity=90)
IE7和IE6中opacity是没有用的,在IE6中DIV透明的方法一般用filter;
.haorooms{opacity: 0; cursor:pointer;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
CSS强制换行和不换行 自动换行(word-wrap会判断下一行是否能放下单词,如果能放下此单词则不断行而是换行)
div{ 
word-wrap: break-word; 
word-break: normal; 
}
强制英文单词断行(不管单词在下一行是否能单独放下都断行)
div{
word-break:break-all;
}
强制不换行
div{
white-space:nowrap;
}
CSS 圆角(border-radius必须放在最后声明,否则可能会失效。)
-moz-border-radius: 15px;
border-radius: 15px;
textarea禁止拖动
resize: none; //禁止拖动
CSS3的一些前缀总结
-webkit  /*为Chrome/Safari*/
-moz  /*为Firefox*/
-ms   /*为IE*/
-o  /*为Opera*
以旋转为例
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/
css3的box-sizing

给了两个并排带边框的div百分比宽度,假如不用box-sizing,边框的宽度会在行内显示。用box-sizing:border-box,可以去除边框的占位。浏览器支持IE9以上及火狐、谷歌、Opera等等。案例如下:

<style> 
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
 
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>
父DIV设置为相对定位,子DIV设置为绝对定位,可解决元素在页面上的随意布局。
<div style="background-color:red;height:400px;width:400px;position:relative">
  <div style="background-color:green;height:200px;width:200px;position:absolute;top:10px;right:10px;z-index:10">层1</div>
  <div style="background-color:blue;height:350px;width:350px;position:absolute;top:10px">层2</div>
</div>
固定table单元格宽度
当仅在td中使用<td style="width:98px;">固定宽度在IE中无效,必须在table中加上table-layout:fixed,然后在表格第一行设置td宽度就可以了。
CSS的箭头向右样式
<div class="arrow-right"></div>箭头向右
.arrow-right{
    width: 0;
    height: 0;
    border-width: 5px;
    border-color: transparent transparent transparent #666;
    border-style: dashed dashed dashed solid;
    display:inline-block;
    *zoom: 1;
    *float: left;
}
利用特殊符号◆
.f_jt{background:#FFE9C8}
.f_jt span{color:#FFE9C8;position:absolute;top:64px;left:25px}
/*要将三角的color设置成背景色相同。要有边框色彩可以绝对定位两个符号叠加*/
固定table单元格宽度
当仅在td中使用<td style="width:98px;">固定宽度在IE中无效,必须在table中加上table-layout:fixed,然后在表格第一行设置td宽度就可以了。
html标准代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>网页标题</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
 </head>
 <body>
 </body>
</html>
html5手机网页标准代码
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
</body>
</html>
垂直居中于浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test8</title>
<style type="text/css">
div.test{
    width:100px;
    height:100px;
    background:#ccc;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;;
}
</style>
</head>
<body>
    <div class="test"></div>
</body>
</html>
让IE浏览器支持HTML5
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->
<!–[if lte IE 9]>
<script>if (!/update\.htm/.test(location.href)) window.location = ‘//abc.com/update.htm'; </script>
<![endif]–>

关键词:CSS3,前端样式表,CSS常用代码