css收集整理

转载 2018年04月16日 13:57:23
/**
 * Created by yangyurong on 2016.12.06
 * description:整理项目中常用的样式
*/
@charset "utf-8";
/* reset start */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,fieldset, lengend, button, input, textarea,th, td {margin: 0;padding: 0;}
body,button, input, select, textarea {font: 14px/1 "Microsoft Yahei UI", "Microsoft Yahei","\5fae\8f6f\96c5\9ed1",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}
h1 { font-size: 18px;}
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; }
small { font-size: 12px; }
ul, ol { list-style: none; }
a { text-decoration: none; cursor: pointer;}
a:hover { text-decoration: underline; }
abbr[title], acronym[title] {border-bottom: 1px dotted;cursor: help;}
q:before, q:after { content: ''; }
legend { color: #000; }
fieldset, img { border: none; }
button, input, select, textarea {font-size: 100%;}
table {border-collapse: collapse;border-spacing: 0;}
hr {border: none;height: 1px;}
i{font-style: normal;}


/*自定义字体*/
@font-face {
    font-family: 'HelveticaNeue-BoldCond';
    src: url('../font/HelveticaNeue-BoldCond.eot');
    src: url('../font/HelveticaNeue-BoldCond.woff2') format('woff2'),
    url('../font/HelveticaNeue-BoldCond.woff') format('woff'),
    url('../font/HelveticaNeue-BoldCond.ttf') format('truetype'),
    url('../font/HelveticaNeue-BoldCond.svg#HelveticaNeue-BoldCond') format('svg'),
    url('../font/HelveticaNeue-BoldCond.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
.class-name{
    font-family: "HelveticaNeue-BoldCond","Microsoft Yahei","黑体";
}


/*浮动*/
.lf{
    float: left;
}
.rf{
    float: right;
}
.clearfix{
    zoom: 1;
}
.clearfix:after{
    display: block;
    content: "";
    clear: both;
}


/*设置页面文本选中的背景颜色*/
::selection{//用之前先caniuse一下,看看是否满足你的兼容需求
    background: #00ada7;
    color:#ffffff;
}


/*单行文本截断省略*/
.overflow{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


/*边框*/
.border-t{
    border-top: 1px solid #ddd;
}
.border-b{
    border-top: 1px solid #ddd;
}
.border-l{
    border-top: 1px solid #ddd;
}
.border-r{
    border-top: 1px solid #ddd;
}


/*透明效果*/
.opacity{
    opacity: 0.6;/*IE9以上*/
    filter: alpha(opacity=60);
}


/*雪碧图icon*/
.icon{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(img/icon-1x.png);
    background-image: -webkit-image-set(url(img/icon-1x.png) 1x, url(img/icon-2x.png) 2x);/*ratio屏显示两倍图标*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.icon-one{
    background-position: 0 0;
}


/*icon垂直居中*/
.icon-vertical-middle{
    position: relative;/*使用vertical-align: middle;可能会有一个像素的误差*/
    bottom: 1px;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}


/*行内元素之间消除间距*/
.parent{
    font-size: 0;
    word-spacing:-1px;
}
.children{
    font-size: 12px;
    letter-spacing: normal;/* 设置字母、字间距为0 */
    word-spacing: normal; /* 设置单词、字段间距为0 */
}


/*水平垂直居中*/
//method 1 相对定位
.parent{
    position: relative;
    width: 400px;
    height: 400px;
}
.children{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;/*负的自身高度的一半*/
    margin-left: -100px;/*负的自身宽度的一半*/
    width: 200px;
    height: 200px;
}
//method 2
.parent{
    position: relative;
    width: 400px;
    height: 400px;
}
.children{
    position: absolute;
    width: 200px;
    height: 200px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


/*不固定高度水平垂直居中*/
//method 1 适用于手机
.box{
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}
//method 2 ie7及其以下浏览器不支持display: table;
.parent{
    display: table;
    text-align: center;
}
.children{
    display: table-cell;
    vertical-align: middle;
}
//method 3 只针对宽高小于parent的图片
.parent{
    position: relative;
    width: 400px;
    height: 400px;
}
.children-img{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
//method 4 图片(宽高可大于parent)
.parent{
    position: relative;
    width: 400px;
    height: 400px;
    overflow: hidden;
}
.children-img{
    position: absolute;
    margin: auto;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
}


/*页面内容不足以铺满整个屏幕,footer居底显示*/
//method 1
/*<div class="page">  
    主要页面  
</div>  
<footer>底部</footer>*/
html,body{  
    height: 100%;  
    margin: 0;
    padding: 0;
}  
.page{ 
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,ie7以下包括ie7不支持这个属性*/  
    min-height: 100%;
    padding-bottom: 300px;
}  
footer{
    height: 300px;
    margin-top: -300px;
    z-index: 2px;  
    opacity: 0.5;
}
//method 2
/*<div class="page-container">  
    <div class="page-main">  
        主要页面   
    </div>  
    <footer>底部</footer>  
</div>*/ 
html,body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.page-container{ 
    position: relative;
    min-height: 100%;
}
.page-main{
    padding-bottom: 300px; 
}
footer{ 
    position: absolute;
    left: 0;
    bottom: 0;  
    height: 300px;  
}














/*自定义动画*/
/*
*适用于手机
*心跳效果
*/
.animated{
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform:scale(1)
    }
    50% {
        -webkit-transform:scale(1.5)
    }
    95% {
        -webkit-transform:scale(0.9)
    }
    100% {
        -webkit-transform:scale(1)
    }
}
@keyframes pulse {
    0% {
        transform:scale(1)
    }
    50% {
        transform:scale(1.5)
    }
    95% {
        transform:scale(0.9)
    }
    100% {
        transform:scale(1)
    }
}
.pulse {
    -webkit-animation-name:pulse;
    animation-name:pulse;
}










css系统学习篇

-
  • 1970年01月01日 08:00

谈一下自己收集资料和整理资料的经验

谈一下自己收集资料和整理资料的经验   自己一直以来主要从事开发工作,对于资料收集和整理这方面做得工作不多,如果你觉得下面内容中表现出的技巧和方法比较拙劣望理解。   收集资料技巧 1.   下...
  • xiaoqiangxx
  • xiaoqiangxx
  • 2013-05-23 15:51:47
  • 1088

[从头学数学] 第127节 数据的收集、整理与描述 小结与复习题

剧情提要: [机器小伟]在[工程师阿伟]的陪同下进入了筑基初期的修炼, 这次要修炼的目标是[数据的收集、整理与描述 小结与复习题]。 正剧开始: 星历2016年03月08日 14:56...
  • mwsister
  • mwsister
  • 2016-03-08 16:24:05
  • 226

漂亮的TableCSS

  • 2012年12月18日 03:24
  • 38KB
  • 下载

资料收藏大师收集整理你的所有资源

  • 2009年08月06日 11:09
  • 4.61MB
  • 下载

收集整理的工具代码片段链接

各种开发环境、工具的下载 http://www.androiddevtools.cn/
  • qq_31479481
  • qq_31479481
  • 2017-07-12 15:31:35
  • 96

iOS 开发一些小技巧(收集整理)

目录目录 去除UITableView多余的Cell 自定义了leftBarbuttonItem左滑返回手势失效了怎么办 ScrollView莫名其妙不能在viewController划到顶怎么办 怎么...
  • c521xiong
  • c521xiong
  • 2015-07-28 23:55:23
  • 419

IT 网站收集(整理)

综合性知识网站 Quora  stackoverflow 知乎 Quora 问答SNS网站 特点:Quora的“肯定”功能和投票决定答案排序的功能会对内容质量有帮助。 Stackoverflo...
  • moffe_
  • moffe_
  • 2017-03-13 08:37:14
  • 146

Oracle内置SQL函数-收集整理大全

F.1字符函数——返回字符值 这些函数全都接收的是字符族类型的参数(CHR除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数...
  • smartsmile2012
  • smartsmile2012
  • 2012-11-12 09:27:13
  • 1150

资料收集整理工具软件汇总(更新中)

  国内部分: 1、Mybase Desktop Edition/Mybase Networking Edition 软件类型:共享软件介绍:Mybase 是一个功能强劲且可随心所欲自定义格式及层次...
  • sczhoubing
  • sczhoubing
  • 2004-08-03 15:43:00
  • 7629
收藏助手
不良信息举报
您举报文章:css收集整理
举报原因:
原因补充:

(最多只允许输入30个字)