Common.CSS基础单元示范脚本

admin

Common.CSS是弘帝自主开发的框架研究，主要是摆脱第三方框架的庞大体系，让设计变得更简洁，代码量更少，功能更优于第三方框架，配合弘帝自主研发的框架编辑器，尽可能少的键盘码文实现网站前端开发设计。
目前主要基于Bootstrap研究，取其长补其短，这主要原因在于Bootstrap的使用群而做出的选择。弘帝不想抄袭，但我们倾听开发者的呼声，为他们减少不必要的学习障碍。未来，我们也将考虑其它多方前端框架设计，吸取其精华。
所有涉及第三方版权的插件，弘帝将一律自主研发，规避使用，虽然可能会有赚钱和广告的机会，但弘帝还是首选放弃，以避免为广大客户因版权原因而带来风险和经济损失。

common.css设计注意事项：
可根据实际情况小作修改，如大改，不要写入该css。
设计不要有颜色，留给skin.color.css来设计。

<!--图标支持-->
@import "../css/font-awesome.min.css";

<!--弘帝基础框架-->
*{ font-size:14px; font-family:Microsoft-YaHei,Arial;}
ul{padding-left: 0; list-style: none;}
.m-t-b-10{ margin-top: 10px; margin-bottom: 10px;}
.p-t-b-10{padding-top:10px; padding-bottom:10px;}
.p-t-b-20{padding-top:20px; padding-bottom:20px;}
.p-t-b-60{ padding-top: 60px; padding-bottom: 60px;}

<!--弘帝实例框架-->
#ArticleView ul,#ProductView ul{ display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center;}
#ArticleView ul li,#ProductView ul li{ float: left; width:25%; margin-bottom:1em;}
#ArticleView ul li .thumbs,#ProductView ul li .thumbs{ display: block; width: 100%; height:calc(100% - 2em);}
#ArticleView ul li .thumbs a,#ProductView ul li .thumbs a{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
#ArticleView ul li img,#ProductView ul li img{ padding: 0.25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; max-width: 100%; height: auto;}
#ArticleView ul li a,#ProductView ul li a{ display: block; line-height: 2em; text-align: center;}

.banner{height:600px;}

<!--手机自适合-->
@media (max-width: 576px) {
    .p-t-b-60{ padding-top: 30px; padding-bottom: 30px;}
    #ArticleView ul li { width:50%;}
    .banner{height:300px;}
}
@media (max-width: 768px) {
    .p-t-b-60{ padding-top: 40px; padding-bottom: 40px;}
    .banner{height:400px}
}
@media (max-width: 992px) {
    .p-t-b-60{ padding-top: 50px; padding-bottom: 50px;}
    #ArticleView ul li { width:33%;}
    .banner{height:500px;}
}

admin

*{ color: #333;}
a:hover{ color:#000;}

admin

弘帝提醒：适用就好，没必要选择最强大的库。
内部开发人员路径位置：E:\网页设计\CSS\图标库\

外部开发人员至以下网址下载。
Font Awesome3.0图标库
http://www.bootcss.com/p/font-awesome/

Font Awesome4.7.0图标库
http://fontawesome.dashgame.com/
https://9iphp.com/fa-icons

admin

.bg-dark{background:#343a40;}
.col-xs-n(n=1-12)：<576设备
.col-sm-n(n=1-12)：<768设备
.col-lg-n(n=1-12)：<992设备
.col-xl-n(n=1-12)：<1200设备
.d-??-block.d-none：在??设备中显示，其它设备中不显示

admin

m为margin，p为padding（这里省略）。
.w-25 {  width: 25% !important;}
.w-50 {  width: 50% !important;}
.w-75 {  width: 75% !important;}
.w-100 {  width: 100% !important;}
.h-25 {  height: 25% !important;}
.h-50 {  height: 50% !important;}
.h-75 {  height: 75% !important;}
.h-100 {  height: 100% !important;}
.mw-100 {  max-width: 100% !important;}
.mh-100 {  max-height: 100% !important;}
.m-0 {  margin: 0 !important;}
.mt-0,.my-0 {  margin-top: 0 !important;}
.mr-0,.mx-0 {  margin-right: 0 !important;}
.mb-0 ,.my-0{  margin-bottom: 0 !important;}
.ml-0,.mx-0 {  margin-left: 0 !important;}

.m-1 {  margin: 0.25rem !important;}
.mt-1,.my-1 {  margin-top: 0.25rem !important;}
.mr-1,.mx-1 {  margin-right: 0.25rem !important;}
.mb-1,.my-1 {  margin-bottom: 0.25rem !important;}
.ml-1,.mx-1 {  margin-left: 0.25rem !important;}
.m-2 {  margin: 0.5rem !important;}
.mt-2,.my-2 {  margin-top: 0.5rem !important;}
.mr-2,.mx-2 {  margin-right: 0.5rem !important;}
.mb-2,.my-2 {  margin-bottom: 0.5rem !important;}
.ml-2,.mx-2 {  margin-left: 0.5rem !important;}
.m-3 {  margin: 1rem !important;}
.mt-3,.my-3 {  margin-top: 1rem !important;}
.mr-3,.mx-3 {  margin-right: 1rem !important;}
.mb-3,.my-3 {  margin-bottom: 1rem !important;}
.ml-3,.mx-3 {  margin-left: 1rem !important;}
.m-4 {  margin: 1.5rem !important;}
.mt-4,.my-4 {  margin-top: 1.5rem !important;}
.mr-4,.mx-4 {  margin-right: 1.5rem !important;}
.mb-4,.my-4 {  margin-bottom: 1.5rem !important;}
.ml-4,.mx-4 {  margin-left: 1.5rem !important;}
.m-5 {  margin: 3rem !important;}
.mt-5,.my-5 {  margin-top: 3rem !important;}
.mr-5,.mx-5 {  margin-right: 3rem !important;}
.mb-5,.my-5 {  margin-bottom: 3rem !important;}
.ml-5,.mx-5 {  margin-left: 3rem !important;}

xy轴的利用
mx-0{x轴左右:margin-left:0;margin-right:0}
my-0{y轴左右:margin-top:0;margin-bottom:0}

手机等设备尽量用rem,em

关于文中的!important的重要提示：如何和何时使用CSS的!important