我们在日常开发中，一般的过程是写了html代码之后，再给里面的元素加上css样式，这个开发如果是个人的话，是没有什么问题的。但是如果是一个团队去做一个项目，就需要一定的规范，如果不同的人写的样式不一样，就会导致开发出来的网站字体大小和边框结构都会不一样，对于项目的开发和维护都是不好的。
因此，我们是有必要给自己团队设计一个UI框架的。提前将经常要用到的一些css样式，写到css样式表里面，并且给他加上固定的类名。这样在开发过程中，我们直接给元素加上类名就可以完成他的样式，这样开发是更加规范的。
在做这个作业的时候，因为我之前并没有接触过这样的UI框架，虽然原理是懂的，但是要设计自己的一个UI框架，却感觉无从下手，因为自己的开发经验非常欠缺。所以我觉得这个UI框架是需要长期的经验积累和团队的配合，才能知道到底哪些代码是经常被复用的。
所以这个作业我做的非常粗糙，大概就是做了一些最基本的样式，然后做了一个手册的首页出来，具体的内容没时间去完善，因为我想把更多的时间放到后面模仿站上面去。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>szekitUI用户手册</title> <link rel="stylesheet" href="static/css/style.css"> </head> <body class="szekit-ftsize"> <!-- 头部 --> <div class="szekit-bgcgrey szekit-p10"> <span class="szekit-ftorange szekit-ftbold szekit-h1">szekit UI</span> <span class="szekit-h1 szekit-ftlightgrey">用户参考手册</span> </div> <div class="szekit-flex"> <!-- 左边 --> <div class="szekit-left szekit-pt30"> <ul class="szekit-ul"> <li> 前端基础 </li> <ul> <li> <a class="szekit-a" href="./welcome.html" target="content">框架安装</a></li> <li> <a class="szekit-a" href="" target="content">页面结构</a></li> <li> <a class="szekit-a" href="" target="content">常用标签</a></li> <li> <a class="szekit-a" href="" target="content">CSS选择器</a></li> </ul> </ul> </div> <!-- 主体 --> <div class="szekit-right"> <iframe class="szekit-w100 szekit-h800" src="./welcome.html" frameborder="0" name="content"></iframe> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
这个是字体库的一些样式
实例
.szekit-ftsize {
font-size: 14px
}
.szekit-h2 {
font-size: 2rem;
color: lightblue;
font-weight: bold;
}
.szekit-a {
text-decoration: none;
color: black;
}
.szekit-ftorange {
color: orange;
}
.szekit-ftlightgrey {
color: lightgrey;
}
.szekit-h1 {
font-size: 1.5rem;
}
.szekit-ftbold {
font-weight: bold;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
这个是layout的一些样式
实例
.szekit-bgcgrey {
background-color: grey;
}
.szekit-bgclightgrey {
background-color: lightgrey;
}
.szekit-ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.szekit-p10 {
padding: 10px;
}
.szekit-right {
flex: 1;
}
.szekit-left {
width: 200px;
}
.szekit-flex {
display: flex;
}
.szekit-pt10 {
padding-top: 10px;
}
.szekit-pt20 {
padding-top: 20px;
}
.szekit-pt30 {
padding-top: 30px;
}
.szekit-w100 {
width: 100%;
}
.szekit-h800 {
min-height: 800px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
自己设计了才知道这个ui库要想设计的全面实用的话，需要很多精力，命名的规范，还有常用的css样式，而且要做到尽量一个类名的简化，尽量不能参太多样式在里面。
