公共样式
通常我们在写css样式的时候,为了避免一些浏览器兼容性问题或者代码书写的便捷性,我们经常会定义一个公共样式base.css,但是一般公共样式有很多的个性化设计,所以建议大家,只选用一些平时自己常用的就行。
* -- 样式说明 --
* 最大优先实现法,全局能实现不用区域,区域能实现不用模板,
* 模板能实现不用界面,界面能实现不用标签
* g - 全局
* t - 区域
* m - 模板
* ui - 界面
* lb - 标签
* 特殊标签
* j - 脚本
* fix - 浮窗 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
margin: 0;
padding: 0;
}
body {
font: 14px "Helvetica Neue", Helvetica, "Microsoft YaHei", Arial, "sans-serif";
color: #333;
background-color: #f3f4f6;
}
a {
color: #333;
text-decoration: none;
}
a, a:hover {
transition: all .3s ease-out 0s;
}
a:hover, a:focus {
color: #509524;
text-decoration: none;
}
.g-font14 {
font-size: 14px;
}
.g-font16 {
font-size: 16px;
}
.fl{
float:left;
}
.g-fr{
float:right;
}
.g-hide {
display: none
}
.g-block{
display: block;
}
.g-inline{
display:inline;
}
.g-inline-bo{
display:inline-block;
}
//padding和fontsize同理
.g-mgt10{
margin-top:10px;
}
.g-mgr10{
margin-right:10px;
}
.g-mgb10{
margin-bottom:10px;
}
.g-mgl10{
margin-left:10px;
}
h1, h2, h3, h4, h5, h6, th {
font-size: 100%;
font-weight: normal;
}
.g-clearfix{
clear: both;
content: "";
display: block;
overflow: hidden
}
.g-overflow-hidden{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
border: none
}
页面布局
一个好的前端页面,布局一定是整体看上去统一规范的。我们开发的时候,要先把布局搭建好,在往里面填写内容,这个框架我们可以称它为一个组件,组件形式的开发可以大大地提高前端开发的效率,并且代码的可复用强,不仅是对开发人员,包括用户的体验都是棒棒的。
我们开发前应该先想好怎么去搭建一个整体的架构:
两列布局:
<div class="main">
<div class="col-left">
<div class="box"></div>
</div>
<div class="col-auto">
<div class="box"></div>
</div>
</div>
//在框架里,我们要注意,不要写死height值,要让它自适应
.main{
display: block;
width: 960px;
margin: 0 auto;
}
//如果是两列布局,我们可以设置左边的width固定,右边为自适应
.main .col-left {
width: 700px;
margin-right: 10px;
}
.col-left {
float: left;
}
.col-auto {
overflow: hidden;
_zoom: 1;
_float: left;
}
.box {
background-color: #fff;
}
.box {
border: 1px solid #c3d4e7;
zoom: 1;
overflow: auto;
}
单行布局:这里我们使用h5规范的section和article来搭建
<div class="section">
<article class="wrapper "></article>
</div>
//不唯一,只是写一些可能用上的样式作为参考
.main {
background: #6d6b69 url(https://cdn.aoscdn.com/img/about-us/main/bg.jpg?c645) center center/cover no-repeat;
height: calc(100% - 349px);
min-height: 452px;
position: relative;
//或者不固定高度
padding-top: 150px;
padding-bottom: 150px;
border-bottom: 1px solid #ebebeb;
overflow: hidden;
}
.wrapper {
width: 1200px;
margin: 0 auto;
max-width: 80%;
}