zoukankan      html  css  js  c++  java
  • 自定义开发样式规范(不断更新)

    *{margin:0;padding:0}
    button,input,optgroup,select,textarea {  color: inherit;  font: inherit;  margin: 0;}
    button,html input[type="button"],input[type="reset"],input[type="submit"] {  -webkit-appearance: button;  cursor: pointer;}
    html {  -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;    font: 400 14px/1.5 Arial, "Lucida Grande", Verdana, "Microsoft YaHei", hei;}
    body {  margin: 0;  font-size: 14px;  line-height: 1.5;  background-color: #efefef;  overflow-x: hidden;  -webkit-overflow-scrolling: touch;}
    img {  border: 0;  vertical-align: middle;}
    a {  background: transparent;  text-decoration: none;  -webkit-tap-highlight-color: transparent;  color: #00b358;}
    a:active {  outline: 0;}
    ul li{list-style: none;}
    input {  line-height: normal;}
    input:focus {  outline: 0 none;}
    table {  border-collapse: collapse;  border-spacing: 0;}
    input::-moz-placeholder,textarea::-moz-placeholder {  color: #ccc;}
    input:-ms-input-placeholder,textarea:-ms-input-placeholder {  color: #ccc;}
    input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {  color: #ccc;}
    /*去掉chrome记住密码后自动填充表单的黄色背景*/
    input : -webkit-autofill {background-color : #FAFFBD ;    background-image : none ;    color : #000 ;}
    /*基础样式*/
    .pull_left{float: left;}
    .pull_right{float: right;}
    .width_full{width: 100%;overflow: hidden;}
    .display_center{display: block; margin-left: auto; margin-right: auto;}
    /*文字排列方式*/
    .text_left{text-align: left;}
    .text_center{text-align: center;}
    .text_right{text-align: right;}
    .text_justify{text-align:justify;text-justify:inter-ideogra}
    /*清浮动*/
    .clear_fix:after{clear:both;display:table;content:"";}
    /*文字溢出省略号显示*/
    /*单行文本*/
    .inaline{white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
    /*多行文本*/
    .intwoline {display: -webkit-box !important;overflow: hidden; text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /*多少行*/ }
    /*公用样式设置*/
    .base_width{width:98%; margin-left: auto; margin-right: auto; display: block;}
    .box{overflow:hidden;}
    
    .p10 {padding: 10px;}
    .p15 {padding: 15px;}
    .p20 {padding: 20px;}
    
    .pt10 {padding-top: 10px;}
    
    .pr0 {padding-right: 0;}
    .plr0 {padding-left: 0;    padding-right: 0;}
    .plr10 {padding-left: 10px;  padding-right: 10px;}
    
    .mt5  {margin-top: 5px;}
    .mt10 {margin-top: 10px;}
    .mt15 {margin-top: 15px;}
    .mt20 {margin-top: 15px;}
    
    .mb10 {margin-bottom: 10px;}
    
    .ml5  {margin-left: 5px;}
    .ml10 {margin-left: 10px;}
    .ml15 {margin-left: 15px;}
    
    .mr15 {margin-right: 15px;}
    
    .mlr10 {margin-left: 10px;  margin-right: 10px;}
    .mtb10 {margin-top: 10px 0px;}
  • 相关阅读:
    解决CSS图片底部3像素问题总结
    常用伪元素及content属性值的使用
    javascript中用正则表达式判断是否为汉字及常用的判断
    javascript 正则表达式
    js常用事件
    js动态获取select选中的option
    innerHTML innerText与outerHTML间的区别
    vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同
    JavaScript实现表单验证_02
    JavaScript数组实现图片轮播
  • 原文地址:https://www.cnblogs.com/wuxibolgs329/p/6193438.html
Copyright © 2011-2022 走看看