php编程界面设计,自己编写简单的框架，并用来制作一个UI页面-2019年9月11日

编写一个简单的框架，应用到一个实际的页面中

本次课程中学习了前端的封装方式，也从phpcn UI中学习了重置和预制属性的基本内容；

封装的原理很简单，可是想自己搞出一个合理有效的封装框架，实在太不容易了，形成不了系统。

所以本次作业中，我尝试的方法是实现代码的复用，首先实现的是水平垂直居中、绝对定位和flexbox的基本设置。

在仿写用户手册中仅用到绝对定位和单行内联元素垂直居中：

代码部分实例

// 绝对定位:使该元素相对于父容器(relative)或者body实现绝对定位

@mixin ele-fixed-lt($left: 0, $top: 0, $ele-width: auto, $ele-height: auto) {

position: absolute;

width: $ele-width;

height: $ele-height;

left: $left;

top: $top;

// z-index: 999;

}

@mixin ele-fixed-rb($right: 0, $bottom: 0, $ele-width: auto, $ele-height: auto) {

position: absolute;

width: $ele-width;

height: $ele-height;

right: $right;

bottom: $bottom$bottom;

}

@mixin ele-flexbox($box-width: auto, $box-height: auto, $direction: row, $wrap: nowrap) {

display: flex;

width: $box-width;

height: $box-height;

flex-direction: $direction;

flex-wrap: $wrap;

}

// 绝对居中:使一个元素相对于父容器或者body实现水平垂直居中

// xy-center-box：不用此类名，则元素针对body绝对居中；

// xy-center-box和xy-center-ele所指元素都需要有具体宽度和高度；

@mixin xy-center-ele($ele-width: 100px, $ele-height: 100px) {

position: absolute;

width: $ele-width;

height: $ele-height;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

// z-index: 999;

}

@mixin xy-center-box($box-width: auto, $box-height: 300px) {

position: relative;

width: $box-width;

height: $box-height;

}

// 以下是练习内容

// .xy-center-box {

//     @include xy-center-box();

//     border: 1px solid #000;

//     background-color: lightcyan;

//     .xy-center-ele {

//         @include xy-center-ele();

//         background-color: lightcoral;

//     }

// }

//============================================================

// 绝对居中:父容器利用flex来实现其内部子元素水平垂直居中

@mixin xy-center-flexbox($box-width: auto, $box-height: auto) {

display: flex;

width: $box-width;

height: $box-height;

justify-content: center;

align-items: center;

}

// .xy-center-flexbox {

//     @include xy-center-flexbox();

//     border: 1px solid #000;

//     background-color: lightcyan;

//     .xy-center-ele {

//         width: 100px;

//         height: 100px;

//         background-color: lightcoral;

//     }

// }

//===============================================

// 绝对居中:使用table来实现水平垂直居中

// xy-center-table：父元素；

// xy-center-table-ele；子元素

@mixin xy-center-table-ele() {

display: table-cell;

text-align: center;

vertical-align: middle;

}

@mixin xy-center-table($box-width: auto, $box-height: auto) {

display: table;

width: $box-width;

height: $box-height;

}

// .xy-center-table {

//     @include xy-center-table();

//     border: 1px solid #222;

//     .xy-center-table-ele {

//         @include xy-center-table-ele();

//         padding-right: 20px;

//     }

// }

//===========================================================

// 水平居中:多元素实现水平居中

@mixin x-center-eles($ele-width:auto, $ele-height:auto) {

display: inline-block;

// display: inline;

/*hack IE*/

// zoom: 1;

/*hack IE*/

margin: 0;

padding: 0;

width: $ele-width;

line-height: $ele-height;

}

@mixin x-center-box($box-width: auto, $box-height: auto) {

text-align: center;

width: $box-width;

height: $box-height;

}

.x-center-box {

@include x-center-box();

border: 1px solid #222;

.x-center-eles {

@include x-center-eles(100px, 60px);

&:hover {

color: red;

border-bottom: 2px solid red;

}

}

}

运行实例 »

点击 "运行实例" 按钮查看在线实例