项目通用样式

虽然说是一个项目的通用样式，但是该有的还是有了，有需要再进行补齐！！！

  1 // 项目自己的基本样式
  2 
  3 // 盒子的宽度从边框开始计算
  4 *{
  5   box-sizing: border-box;
  6 }
  7 
  8 // html基本样式
  9 html{
 10   height: 100%;
 11   font-size: 14px;
 12 }
 13 
 14 // body样式
 15 body{
 16   height: 100%;
 17   color: #333;
 18   min-width: 1240px;
 19   font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif
 20 }
 21 
 22 // 各元素的边框
 23 ul,
 24 h1,
 25 h3,
 26 h4,
 27 p,
 28 dl,
 29 dd{
 30   padding: 0;
 31   margin: 0;
 32 }
 33 
 34 // a标签的初始样式
 35 a{
 36   text-decoration: none;
 37   color: #333;
 38   // 设置元素的整个轮廓样式
 39   outline: none;
 40 }
 41 
 42 // 设置i标签样式
 43 i{
 44   // 字体样式显示为正常
 45   font-style: normal;
 46 }
 47 
 48 // input的type等于各值的样式
 49 input[type="text"],
 50 input[type="search"],
 51 input[type="password"],
 52 input[type="checkbox"]{
 53   padding: 0;
 54   outline: none;
 55   border: none;
 56   // 用来设计拥有平台原生UI样式的自定义的组件
 57   -webkit-appearance: none;
 58   // input元素中字体的颜色
 59   &::placeholder{
 60     color: #ccc;
 61   }
 62 }
 63 
 64 // img初始样式
 65 img{
 66   max-width: 100%;
 67   max-height: 100%;
 68   // 设置元素垂直对齐方式，把此元素放在父元素的中部
 69   vertical-align: middle;
 70 }
 71 
 72 // ul的初始样式
 73 ul{
 74   list-style: none;
 75 }
 76 
 77 // index中app的样式
 78 #app{
 79   background: #f5f5f5;
 80 
 81   // 控制用户能否选中文本，none表示元素及其子元素的文本不可选中
 82   user-select: none;
 83 }
 84 
 85 // container样式的初始样式
 86 .container{
 87   width: 1240px;
 88   margin: 0 auto;
 89   position: relative;
 90 }
 91 
 92 // ellipsls 换行的初始样式
 93 .ellipsls{
 94   white-space: nowrap;
 95   text-overflow: ellipsis;
 96   overflow: hidden;
 97 }
 98 
 99 // 换2行的基本样式
100 .ellipsls-2{
101   // 在中文文本间，可任意断行
102   word-break: break-all;
103   text-overflow: ellipsis;
104   display: -webkit-box;
105   overflow: hidden;
106 }
107 
108 // 左浮动
109 .fl{
110   float: left;
111 }
112 
113 // 右浮动
114 .fr{
115   float: right;
116 }
117 
118 // 清除浮动
119 // 浮动三件套 content: '';display: block; clear: both
120 .clearfix:after{
121   content: '.';
122   display: block;
123   // 设置元素显示或者隐藏而不改变文档布局
124   visibility: hidden;
125   height: 0;
126   line-height: 0;
127   clear: both;
128 }

 

posted @ 2021-11-21 20:03  xinyanwa  阅读(76)  评论(0)  编辑  收藏  举报