学习前端的第六天

快速写好移动端静态页面的所需工具

1.首先你要有一个优秀的写代码的工具，工具很简单，比如vs code\webstrom\DW
2.本人也是使用vs code来编写代码，这个软件首先下插件很方便，功能强大，能够很快的上手.

如果你使用的就是vs code的话，跟随着我，你写静态页面的速度绝对会大幅度提升
1.你需要先下载一些插件：


以上的插件都十分使用，能使你的代码高效，特别是最后一个插件

当然拥有上面的的还需要一个辅助神奇，名为公共样式

<style>
/* 本人专用公共样式 */
/* 宽度 */
.w100{
    width: 100%;
}
.h100{
    height: 100%;
}
/* 背景颜色 */
.bg-f4{
    background-color: #f4f4f4;
}
.bg-fff{
    background-color: #fff;
}
/* 字体颜色 */
.f4{
    color: #f4f4f4;
}
.fff{
    color: #fff;
}
.base{
    color: #f03d37;
}
/* 文本居中 */
.tac{
    text-align: center;
}
/* 相对定位 */
.ps-r{
    position: relative;    
}
/* 绝对定位 */
.ps-a{
    position: absolute;
}
/* 固定定位 */
.ps-f{
    position: fixed;
}
/* 隐藏 */
.ds-n{
    display: none;
}
/* 字体 */
.f10{font-size: 10px;}
.f12{font-size: 12px;}
.f14{font-size: 14px;}
.f16{font-size: 16px;}
.f18{font-size: 18px;}
.f20{font-size: 20px;}
.f22{font-size: 22px;}
.f24{font-size: 24px;}
.f26{font-size: 26px;}
.f28{font-size: 28px;}
.f30{font-size: 30px;}
.f32{font-size: 32px;}
.f34{font-size: 34px;}
.f36{font-size: 36px;}
/* 内边距 */
.pt-5{padding-top: 5px;}
.pt-10{padding-top: 10px;}
.pt-15{padding-top: 15px;}
.pt-20{padding-top: 20px;}
.pt-25{padding-top: 25px;}
.pt-30{padding-top: 30px;}
.pb-5{padding-bottom: 5px;}
.pb-10{padding-bottom: 10px;}
.pb-15{padding-bottom: 15px;}
.pb-20{padding-bottom: 20px;}
.pb-25{padding-bottom: 25px;}
.pb-30{padding-bottom: 30px;}
.pl-5{padding-left: 5px;}
.pl-10{padding-left: 10px;}
.pl-15{padding-left: 15px;}
.pl-20{padding-left: 20px;}
.pl-25{padding-left: 25px;}
.pl-30{padding-left: 30px;}
.pr-5{padding-right: 5px;}
.pr-10{padding-right: 10px;}
.pr-15{padding-right: 15px;}
.pr-20{padding-right: 20px;}
.pr-25{padding-right: 25px;}
.pr-30{padding-right: 30px;}
/* 外边距 */
.mt-5{margin-top: 5px;}
.mt-10{margin-top: 10px;}
.mt-15{margin-top: 15px;}
.mt-20{margin-top: 20px;}
.mt-25{margin-top: 25px;}
.mt-30{margin-top: 30px;}
.mb-5{margin-bottom: 5px;}
.mb-10{margin-bottom: 10px;}
.mb-15{margin-bottom: 15px;}
.mb-20{margin-bottom: 20px;}
.mb-25{margin-bottom: 25px;}
.mb-30{margin-bottom: 30px;}
.ml-5{margin-left: 5px;}
.ml-10{margin-left: 10px;}
.ml-15{margin-left: 15px;}
.ml-20{margin-left: 20px;}
.ml-25{margin-left: 25px;}
.ml-30{margin-left: 30px;}
.mr-5{margin-right: 5px;}
.mr-10{margin-right: 10px;}
.mr-15{margin-right: 15px;}
.mr-20{margin-right: 20px;}
.mr-25{margin-right: 25px;}
.mr-30{margin-right: 30px;}
/* 弹性盒子 */
.flex{display: flex;}
.jc-c{justify-content: center;}
.jc-sb{justify-content: space-between;}
.jc-sa{justify-content: space-around;}
.aic{align-items: center;}
/* 盒子反向 */
.fdc{
    display: flex;
    flex-direction: column;
}
/* 剩余空间分配 */
.fg1{flex-grow: 1;}




style>

上面是常用的css样式名，它可以大大减少你其他的css文件大小。所以大家赶紧试试吧。
一句话送给你，勤快才是成功的基础，你多写代码，你写代码的速度也会提升，所以加油吧！！！