美文网首页
栅格布局基础样式

栅格布局基础样式

作者: 微little | 来源:发表于2018-04-02 12:11 被阅读0次

    /* 栅格布局基础样式 */ 

    .container {display: block;margin: 0rpx;} .row {display: flex;font-size: 28rpx;} .col>.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9,.col-10, .col-11, .col-1 {overflow: hidden;} .col-1 {width: 8.33333333333333%;} .col-2 {width: 16.6666666666666%;} .col-3 {width: 25%;} .col-4 {width: 33.3333333333333%;} .col-5 {width: 41.6666666666666%;} .col-6 {width: 50%;} .col-7 {width: 58.333333333333333%;} .col-8 {width: 66.66666666666666%;} .col-9 {width: 75%;} .col-10 {width: 83.33333333333333%;} .col-11 {width: 91.66666666666666%;} .col-12 {width: 100%;} /* 列偏移 */ .col-offset-1 {margin-left: 8.33333333333333%;} .col-offset-2 {margin-left: 16.6666666666666%;} .col-offset-3 {margin-left: 25%;} .col-offset-4 {margin-left: 33.3333333333333%;} .col-offset-5 {margin-left: 41.6666666666666%;} .col-offset-6 {margin-left: 50%;} .col-offset-7 {margin-left: 58.333333333333333%;} .col-offset-8 {margin-left: 66.66666666666666%;} .col-offset-9 {margin-left: 75%;} .col-offset-10 {margin-left: 83.33333333333333%;} .col-offset-11 {margin-left: 91.66666666666666%;} /* 文本位置样式 */ .text-center {text-align: center;} .text-left {text-align: left;} .text-right {text-align: right;} /* 定位 */ .position-fixed {position: fixed;} .position-absolute {position: absolute;} .position-relative {position: relative;} /* 标题 */ .h1 {display: block;font-size: 2em;-webkit-margin-before: 0.67em;-webkit-margin-after: 0.67em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;font-weight: bold;} .h2 {display: block;font-size: 1.5em;-webkit-margin-before: 0.83em;-webkit-margin-after: 0.83em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;font-weight: bold;} .h3 {display: block;font-size: 1.17em;-webkit-margin-before: 1em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;font-weight: bold;} .h4 {display: block;-webkit-margin-before: 1.33em;-webkit-margin-after: 1.33em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;font-weight: bold;} .h5 {display: block;font-size: 0.83em;-webkit-margin-before: 1.67em;-webkit-margin-after: 1.67em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;font-weight: bold;} .h6 {display: block;font-size: 0.67em;-webkit-margin-before: 2.33em;-webkit-margin-after: 2.33em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;font-weight: bold;} /* 圆角 */ .round-corner {border-radius: 50rpx;} /* 圆 */ .round {border-radius: 50%;} /* 输入框基础样式 */ input {border: 2rpx solid #cacaca;border-radius: 50rpx;} /* 按钮去边框 */ button:after {border: none;}

    相关文章

      网友评论

          本文标题:栅格布局基础样式

          本文链接:https://www.haomeiwen.com/subject/noevaxtx.html