global.min.css 页面通用样式

最新推荐文章于 2024-03-08 14:14:04 发布

weixin_34408717

最新推荐文章于 2024-03-08 14:14:04 发布

阅读量408

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2393989/blog/3026326

版权

2019独角兽企业重金招聘Python工程师标准>>>

全局设置

1, body设置了默认的字号为14号，微软雅黑字体，以及文字颜色#414141. 2, 所有元素的大小、宽度、间距等皆使用10px为基准 rem为单位设置例如：

.demo{ font-size:1.2rem;   //相当于字号font-size:12px;}
.demo{ margin:0.4rem 1rem;   //相当于设置外间距margin:4px 10px;}

常用class属性设置

图片横向全屏 class="img-full" 图片横向沾满外部盒子空间，高度自适应，如需高度也沾满盒子请执行设置height:100%; 使用方法

<div><img src="" class="img-full"></div>

截图文字

class="clamp1"  文字以一行显示，多余的部分自动截取并以点显示。
class="clamp2"  文字以两行显示，多余的部分自动截取并以点显示。

浮动

class="clearfix"或 class="clear" 父级清除浮动，使用clearfix 或clear。
class="fl"  左浮动
class="fr"  右浮动

数字字体

class="Arial" 英文文字字体 font-family:Arial, Helvetica, sans-serif;

设置字号

class="fz10"  <=> font-size:10px;       class="fz11"  <=> font-size:11px;
class="fz12"  <=> font-size:12px;       class="fz13"  <=> font-size:13px;
class="fz14"  <=> font-size:14px;       class="fz15"  <=> font-size:15px;
class="fz16"  <=> font-size:16px;       class="fz18"  <=> font-size:18px;
class="fz20"  <=> font-size:20px;       class="fz21"  <=> font-size:21px;
class="fz22"  <=> font-size:22px;       class="fz24"  <=> font-size:24px;

内间距设置

class="pt2"  <=>padding-top:2px;     class="pt4"        class="pt5"
class="pt8"      class="pt10"        class="pt12"       class="pt15"    
class="pt20"

同理 class="pb2"  //padding-bottom:2px 
     class="pl2"  //padding-left:2px
     class="pr2"  //padding-right:2px
**外间距设置**
class="mt2"  <=>margin-top:2px;       class="mt4"         class="mt5"
class="mt8"     class="mt10"          class="mt12"        class="mt15"
class="mt20"
同理 class="mb2"  //margin-bottom:2px 
     class="ml2"  //margin-left:2px
     class="mr2"  //margin-right:2px

元素位置左右中

class="text-left"     //text-align:left;
class="text-center"   //text-align:center;
class="text-right"    //text-align:right;

圆角设置

class="radius2"  <=>border-radius:2px;       class="radius3"  <=>border-radius:3px;
class="radius4"  <=>border-radius:4px;       class="radius5"  <=>border-radius:5px;
class="radius6"  <=>border-radius:6px;       class="radius8"  <=>border-radius:8px;
class="radius10"  <=>border-radius:10px;     class="radius20"  <=>border-radius:20px;
class="radius50"  <=>border-radius:50%;

按钮

class="btn-big"   //大按钮，根据需求改变不同的背景色即可
class="btn-rule"  //活动规则，根据需求改变不同的背景色即可

无数据提示

class="no-data"  //无数据时，显示的提示信息样子

文件链接

全局设置

1,重置样式

* {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
    -webkit-appearance: none;
    box-sizing: border-box
}

2, body设置了默认的字号为14号，微软雅黑字体，以及文字颜色#414141.

html {
    -webkit-tap-highlight-color: transparent;
    font-size: 62.5%
}

body {
    max-width: 640px;
    margin: 0 auto;
    color: #414141;
    font-family: Arial,'Microsoft Yahei';
    font-size: 1.4rem;
    line-height: 1.5em;
}

3, 所有元素的大小、宽度、间距等皆使用10px为基准 rem为单位设置例如：

.demo{ font-size:1.2rem;   //相当于字号font-size:12px;}
.demo{ margin:0.4rem 1rem;   //相当于设置外间距margin:4px 10px;}