A我今天学到了什么
1 命名规范
命名规范
image.png
2 几种常用的命名方式
<body>
<div class="top"></div>
<div class="topContent"></div>
<div class="top-content"></div>
<div class="top_content"></div>
</body>
3 伪元素设置边框
<style>
.center{margin-left: auto;margin-right: auto}
.row:after{content: "";display: table;clear: both}
.box{
width: 700px;
height: 300px;
border: 1px solid #666;
}
.box>div{
width: 25%;
height: 100%;
float: left;
position: relative;
}
.box>div:after{
content: "";
display: block;
width: 100%;
height: 100%;
border-right: 1px solid #666;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 100px;
}
</style>
</head>
<body>
<div class="box center row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
4 建立自己的公共样式
4.1 base 存放底层的样式,不会改变
* {margin: 0;padding: 0}
ul {list-style: none }
table {border-collapse: collapse;}
body {
font-size: 14px;
font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
}
body, a {color: #333;}
a {cursor: pointer;text-decoration: none;}
.center {margin-left: auto; margin-right: auto;}
.row:after {
content: "";
display: table;
clear: both;
}
.col-1 {width: 8.33333333%;}
.col-2 {width: 16.66666667%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33333333%;}
.col-5 {width: 41.66666667%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33333333%;}
.col-8 {width: 66.66666667%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33333333%;}
.col-11 {width: 91.66666667%;}
.col-12 {width: 100%;}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
float: left;height:100%;
}
.float-l{float: left}
.float-r{float: right}
.rel{position:relative;}
.abs{position: absolute}
.false-l:after{
content:"";
display: table;
height:100%;
width:100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
border-right:1px solid #eee;
pointer-events: none;
}
4.2 common 存放公共的样式,有些改变,一般用于存放公司的样式
例如特定的网页色调,文字大小等.....
4.3 page1 当前网页的样式
当前网页的样式
网友评论