设计初衷:提供每个常用模块的基础样式,便于快速应用修改
枫叶科技--css文件下载


标准一:bootstrap.css文件一点也不能修改,保留comtainer row col-**栅格的内补和外补
标准二:common.css样式只是作为bootstrap.css的修改和补充,使用时放在下面

基本辅助样式

主要作用:设置一些全局使用的辅助样式

/* 公共样式 */ *{font-family:"微软雅黑", "新宋体"; } ul{ padding:0;list-style:none} html{overflow-y:scroll;} body,html{ margin:0;padding:0} a{text-decoration:none;} a:hover{ text-decoration:none; } /*辅助类*/ .sheng{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .center-block{display:block; margin:0 auto;} .clear{ clear:both} .pm{ padding:0!important; margin:0!important} .fright{ float:right} .fleft{ float:left} .block{ display:block} .inline{ display:inline-block} .relative{ position:relative}.absolute{ position:absolute} .show{ display:block;} .hidden{ display:none} .col-md-20 {width: 20%; }

bootstrap优化

因bootstrap原则不动,所有有些用着不方便的再次进行重写

主要作用:
1.优化手机版间距,手机版原15像素内补再手机页面太大

.row { margin-right: -15px; margin-left: -15px; } .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{ padding-right: 15px; padding-left: 15px; } @media (min-width:760px)/*页面宽度大于760起作用--电脑版专用*/ .row { margin-right: -5px; margin-left: -5px; .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{ padding-right: 5px; padding-left: 5px; } }

文字+段落样式

主要作用:解决文字类问题

/*文字类*/ .red{ color:#f00!important;} .green{ color:#063!important;}.green2{ color:#0c9!important;} .yellow{ color:#F60!important;} .white{ color:#fff!important;} .gray{ color:#666!important;} .blue{color:#09f!important;} .h1{ font-size:36px; }.h2{ font-size:30px}.h3{ font-size:24px} .h4{ font-size:18px}.h5{ font-size:14px}.h6{ font-size:12px} .f12{font-size:12px!important;}.f13{font-size:13px!important;} .f14{font-size:14px!important;}.f15{font-size:15px!important;} .f16{font-size:16px!important;}.f18{font-size:18px!important;} .f20{font-size:20px!important;}.f22{font-size:22px!important;} .f25{font-size:25px!important;}.f30{font-size:30px!important;} .f35{font-size:35px!important;} /*段落类*/ .text-center{ text-align:center} .text-right{ text-align:right} .text-left{ text-align:left} .indent2{text-indent: 2em;} .line25{ line-height:25px;}.line30{ line-height:30px;} .line35{ line-height:35px;}.line40{ line-height:40px;} .line45{ line-height:45px;}.line50{ line-height:50px;} .line55{ line-height:55px;}.line60{ line-height:60px;}

宽度+高度类

主要作用:设置一些常用的高度和宽度

<div class="w05 h25 bg-red fleft"></div> <div class="w100 h03 bg-red fleft margin20"></div> <div class="w08 h08 bg-green fleft margin10"></div> .h01{min-height:1px;}.h02{min-height:2px;}.h03{min-height:3px;}.h04{min-height:4px;}.h05{min-height:5px;} .h06{min-height:6px;}.h07{min-height:7px;}.h08{min-height:8px;}.h08{min-height:9px;}.h09{min-height:9px;} .h10{min-height:10px;}.h15{min-height:10px;}.h20{min-height:20px;}.h25{min-height:25px;}.h30{min-height:30px;} .h40{min-height:50px;}.h50{min-height:50px;}.h60{min-height:60px;}.h100{min-height:100px;} .w01{width:1px;}.w02{width:2px;}.w03{width:3px;}.w04{width:4px;}.w05{width:5px;} .w06{width:6px;}.w07{width:7px;}.w08{width:8px;}.w09{width:9px;}.w10{width:10px;} .w15{width:15px;}.w20{width:20px;}.w30{width:30px;}.w40{width:40px;}.w50{width:50px;} .w60{width:60px;}.w70{width:70px;}.w80{width:80px;}.w90{width:90px;} .w100{width:100px;}.w110{width:110px;}.w120{width:120px;}.w130{width:130px;}.w140{width:140px;} .w150{width:150px;}.w200{width:200px;}.w300{width:300px;}.w400{width:400px;}

边框+线+圆角

主要作用:设置各个方向的边框,和一些常用线条

<div class="h50 w50 fleft mar20 bk"></div> <div class="h50 w50 fleft mar20 bk-red"></div> <div class="h50 w50 fleft mar20 bk radius10"></div> <div class="h50 w50 fleft mar20 bk radius100"></div> <div class="xian clear"></div> /*边框类 border+线*/ .bk{border:1px solid #ccc} .bk2{ border:1px solid #f00} .bk-left{border-left:1px solid #eee;} .bk-right{border-right:1px solid #eee;} .bk-top{border-top:1px solid #eee;} .bk-bottom{border-bottom:1px solid #eee;} .bk-top-bottom{border-bottom:1px solid #eee;border-top:1px solid #eee;} .bk-left-right{border-left:1px solid #eee;border-right:1px solid #eee;} .bk-red{border:1px solid #f00} .radius0{border-radius: 0!important}.radius5{border-radius: 5!important} .radius6{border-radius: 6!important}.radius7{border-radius: 7!important} .radius8{border-radius: 8!important}.radius9{border-radius: 9!important} .radius10{border-radius: 10!important}

boostrap自带各种图标

主要作用:用于列表等常用图形

<div class="f20 blue"> <span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-play"></span> <span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-hand-right"></span> <span class="glyphicon glyphicon-bell"></span> <span class="glyphicon glyphicon-leaf"></span> <span class="glyphicon glyphicon-map-marker"></span> <span class="glyphicon glyphicon-envelope"></span> <span class="glyphicon glyphicon-user"></span> <span class="glyphicon glyphicon-phone"></span> <span class="glyphicon glyphicon-phone-alt"></span> <span class="glyphicon glyphicon-home"></span> </div>

按钮各种样式

主要作用:设置按钮样式,可以应用input button a 等元素,在bootstrap基础上优化,所有只需设置文字颜色,背景颜色,边框颜色即可,快速扩展也是如此

新增:
1. btn-radius按钮半圆样式 2. 新增一个layui的主色按钮,也是一个快速扩展的示例

a链接样式 a链接样式 a链接样式 按钮样式
<button class="btn-layui btn btn-radius">layui主色按钮样式</button> <button class="my-btn-red btn-radius">button按钮样式</button> <button class="my-btn-success">button按钮样式</button> <button class="my-btn-yellow">button按钮样式</button> <a href="" class="my-btn-red">a链接样式</a> <a href="" class="my-btn-success">a链接样式</a> <a href="" class="my-btn-yellow">a链接样式</a> <input type="submit" value="提交" class="my-btn-success" /> <input type="submit" value="提交" class="my-btn-red" /> <a href="" class="my-btn-yellow radius100">按钮样式</a> /*组件-按钮类 */ .my-btn-success,.my-btn-red,.my-btn-yellow{display:inline-block; line-height:30px; padding:0 20px; color:#fff!important; border:none; margin:10px 0; cursor:pointer;border-radius:5px; font-size:15px;} .my-btn-success{background:#096;color:#fff;} .my-btn-success:hover{ background:#063;; } .my-btn-red{ background:#ED0C1D;color:#fff;} .my-btn-red:hover{ background:#f30;color:#fff} .my-btn-yellow{ background:#F60;color:#fff;} .my-btn-yellow:hover{ background:#F30;color:#fff} .btn-layui { color: #fff; background-color: #009688; border-color: #009688; } .btn-layui:hover{ color: #fff; background-color: #1e9b8e; border-color: #1e9b8e; }

背景各种样式

主要作用:设置常用背景色,宽度应用+一些透明色

背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
背景样式
<div class="col-md-1 line30 bg-000">背景样式</div> <div class="col-md-1 line30 bg-111">背景样式</div> <div class="col-md-1 line30 bg-222">背景样式</div> <div class="col-md-1 line30 bg-333">背景样式</div> <div class="col-md-1 line30 bg-444">背景样式</div> <div class="col-md-1 line30 bg-555">背景样式</div> <div class="col-md-1 line30 bg-666">背景样式</div> <div class="col-md-1 line30 bg-999">背景样式</div> <div class="col-md-1 line30 bg-ccc">背景样式</div> <div class="col-md-1 line30 bg-eee">背景样式</div> <div class="col-md-1 line30 bg-ef">背景样式</div> <div class="col-md-1 line30 bg-fff">背景样式</div> <div class="col-md-1 line30 bg-red">背景样式</div> <div class="col-md-1 line30 bg-green">背景样式</div> <div class="col-md-1 line30 bg-yellow">背景样式</div> <div class="col-md-1 line30 bg-blue">背景样式</div>

各类margin 和padding数值

主要作用:快速设置间距

/*间距类 padding & margin--手机公用*/ .pad0 {padding:0px}.pad5 {padding:5px}.pad10 {padding:10px} .pad15 {padding:15px}.pad20 {padding:20px}.pad30 {padding:30px} .pad40 {padding:40px}.pad50 {padding:50px} .mar0 {margin:0px}.mar5 {margin:5px} .mar10 {margin:10px} .mar15 {margin:15px}.mar20 {margin:20px}.mar30 {margin:30px} .mar40 {margin:40px}.mar50 {margin:50px} /*0px*/ .pad-y0 {padding:0px 0}.pad-x0{padding:0 0px}.pad-left0 {padding-left:0px}.pad-right0 {padding-right:0px}.pad-top0 {padding-top:0px}.pad-bottom0 {padding-bottom:0px} /*5px*/ .pad-y5 {padding:5px 0}.pad-x5{padding:0 5px}.pad-left5 {padding-left:5px}.pad-right5 {padding-right:5px}.pad-top5 {padding-top:5px}.pad-bottom5 {padding-bottom:5px} /*10px*/ .pad-y10 {padding:10px 0}.pad-x10{padding:0 10px}.pad-left10 {padding-left:10px}.pad-right10 {padding-right:10px}.pad-top10 {padding-top:10px}.pad-bottom10 {padding-bottom:10px} /*15px*/ .pad-y15 {padding:15px 0}.pad-x15{padding:0 15px}.pad-left15 {padding-left:15px}.pad-right15 {padding-right:15px}.pad-top15 {padding-top:15px}.pad-bottom15 {padding-bottom:15px} /*20px*/ .pad-y20 {padding:20px 0}.pad-x20{padding:0 20px}.pad-left20 {padding-left:20px}.pad-right20 {padding-right:20px}.pad-top20 {padding-top:20px}.pad-bottom20 {padding-bottom:20px} /*30px*/ .pad-y30 {padding:30px 0}.pad-x30{padding:0 30px}.pad-left30 {padding-left:30px}.pad-right30 {padding-right:30px}.pad-top30 {padding-top:30px}.pad-bottom30 {padding-bottom:30px} /*50px*/ .pad-y50 {padding:50px 0}.pad-x50{padding:0 50px}.pad-left50 {padding-left:50px}.pad-right50 {padding-right:50px}.pad-top50 {padding-top:50px}.pad-bottom50 {padding-bottom:50px} /*0px*/ .mar-y0 {margin:0px 0}.mar-x0{margin:0 0px}.mar-left0 {margin-left:0px}.mar-right0 {margin-right:0px}.mar-top0 {margin-top:0px}.mar-bottom0 {margin-bottom:0px} /*5px*/ .mar-y5 {margin:5px 0}.mar-x5{margin:0 5px}.mar-left5 {margin-left:5px}.mar-right5 {margin-right:5px}.mar-top5 {margin-top:5px}.mar-bottom5 {margin-bottom:5px} /*10px*/ .mar-y10 {margin:10px 0}.mar-x10{margin:0 10px}.mar-left10 {margin-left:10px}.mar-right10 {margin-right:10px}.mar-top10 {margin-top:10px}.mar-bottom10 {margin-bottom:10px} /*15px*/ .mar-y15 {margin:15px 0}.mar-x15{margin:0 15px}.mar-left15 {margin-left:15px}.mar-right15 {margin-right:15px}.mar-top15 {margin-top:15px}.mar-bottom15 {margin-bottom:15px} /*20px*/ .mar-y20 {margin:20px 0}.mar-x20{margin:0 20px}.mar-left20 {margin-left:20px}.mar-right20 {margin-right:20px}.mar-top20 {margin-top:20px}.mar-bottom20 {margin-bottom:20px} /*30px*/ .mar-y30 {margin:30px 0}.mar-x30{margin:0 30px}.mar-left30 {margin-left:30px}.mar-right30 {margin-right:30px}.mar-top30 {margin-top:30px}.mar-bottom30 {margin-bottom:30px} /*40px*/ .mar-y40 {margin:40px 0}.mar-x40{margin:0 40px}.mar-left40 {margin-left:40px}.mar-right40 {margin-right:40px}.mar-top40 {margin-top:40px}.mar-bottom40 {margin-bottom:40px} /*50px*/ .mar-y50 {margin:50px 0}.mar-x50{margin:0 50px}.mar-left50 {margin-left:50px}.mar-right50 {margin-right:50px}.mar-top50 {margin-top:50px}.mar-bottom50 {margin-bottom:50px}

图片类容器

主要作用:
.row-img图片行容器,再电脑板增加15像素外扩展内补可以使图片对齐

.row-img{ margin-right: -15px; margin-left: -15px; } @media (min-width:760px)/*页面宽度大于760不起作用--手机版专用*/ .row-img{ margin-right: -30px; margin-left: -30px; }
版权所有:奋达科技 备案号: 豫ICP备2021000581号-3