UI框架的封装的理解
1, UI框架的封装是对网站整体代码的集中调用.是对传统直接写css代码的一个提升.主要是根据个人习惯及网站特点,将使用频率比较高的代码单独定义一个类. 形式上像是 样式集, 通过css内联方式,直接在html结构中调用,减少css代码的重复率,同时调用相同的样式也可以形成整体的页面效果.
2, 在UI框架的封装过程中, 通过 在高度上 倍率设定, 宽度 100%设定 的样式, 配合媒体查询功能, 可以对应不同的浏览器窗口引用对应的基础样式参数, 形成使用同一个css文件, 配合不同参数, 表现不同的页面效果.
3, UI框架的封装可以将比较复杂的css代码设计,简化为一个类名称,但需要个人习惯记忆. 前期会更复杂,但形成个人风格后效率更高.
php中文网移动页面的 简单的bee_ui 框架 设计
bee_ui.css 内容
.bee_320_768 {
min-width: 320px;
max-width: 768px;
}
.bee_flex {
display: flex;
}
.bee_flex_1 {
flex: 1;
}
.bee_flex_55 {
flex: 0.55;
}
.bee_flex_45 {
flex: 0.45;
}
.bee_flex_30 {
flex: 0.30;
}
.bee_flex_70 {
flex: 0.70;
}
.bee_fixed {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
.bee_br50 {
border-radius: 50%;
}
.bee_w100 {
width: 100%;
margin: 0 auto;
}
.bee_h100 {
height: 100%;
}
.bee_h30 {
height: 30px;
}
.bee_h60 {
height: 60px;
}
.bee_h140 {
height: 140px;
}
.bee_h90 {
height: 90px;
}
.bee_bbox {
box-sizing: border-box;
}
.bee_p5 {
padding: 5px;
}
.bee_mt5 {
margin-top: 5px;
}
.bee_mt45 {
margin-top: 45px;
}
.bee_ml5 {
margin-left: 5px;
}
.bee_mr5 {
margin-right: 5px;
}
.bee_m5 {
margin: 5px;
}
.bee_textc {
text-align: center;
}
.bee_bw {
background: white;
}
.bee_fs {
font-size: 0px;
}
.bee_6rem {
font-size: 0.6rem;
}
.bee_flex_cen {
justify-content: center;
}
.bee_flex_bet {
justify-content: space-between;
}
.bee_text_hid {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bee_br30 {
font-size: 0.6rem;
color: antiquewhite;
background: #333;
border-radius: 30%;
padding: 0 7px;
margin-right: 5px;
}
.bee_flex_col {
flex-flow: column;
}
.bee_min_w {
min-width: 0;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
基本样式 9010_ui.css 内容
ul,
li,
p,
a,
body {
/* 清除默认格式 */
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
}
body {
background: #edeff0;
/* 设计定位属性 为相对定位,为子元素定位做准备 */
position: relative;
/* 指定垂直方向溢出行为,默认值,显示 流动 */
overflow-y: initial;
/* 水平不流动 */
/*指定水平方向溢出行为,不显示溢出内容*/
overflow-x: hidden;
/*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/
-webkit-tap-highlight-color: transparent;
font-size: 16px;
/* 整体宽度设计 */
min-width: 320px;
max-width: 768px;
width: 100%;
margin: 0 auto;
}
img {
border: 0;
}
a {
cursor: hand;
color: gray;
}
h3 {
margin: 10px;
color: gray;
font-size: 0.9rem;
}
.header {
background: #333;
top: 0;
}
.footer {
background: #aaa;
bottom: 0;
}
span {
font-size: 0.8rem;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
html代码及注释
<!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"> <link rel="stylesheet" href="./static/css/bee_ui.css"> <link rel="stylesheet" href="./static/css/0910_ui.css"> <title>Document</title> </head> <body> <!-- 顶部设计 --> <!-- 顶部整体宽度设计及居中 flex设计 绝对定位设计 背景色设计在header --> <div class="bee_320_768 bee_w100 bee_flex bee_fixed header "> <!-- 头像图片高度 外边距及圆角设计 --> <a href=""><img class="bee_h30 bee_m5 bee_br50 " src="../../icon/tx.png" alt=""></a> <!-- 中间图标占居全部空间 文本居中 --> <div class="bee_flex_1 bee_textc "> <!-- img logo高度 --> <a href=""><img class="bee_h30 bee_m5 " src="./static/img/logo.png" alt=""></a> </div> <!-- 菜单图片高度 外边距 --> <a href=""><img class="bee_h30 bee_m5 " src="../../icon/cd.png" alt=""></a> </div> <!-- banner flex设计 上外边距让顶部 --> <div class="banner bee_flex bee_mt45 "> <!-- banner高度设计 宽度100% --> <img class="bee_w100 bee_h140 " src="./static/img/banner.jpg" alt=""> </div> <!-- 导航区设计 --> <!-- 导航区宽度及居中 背景 文本居中 上外边距 --> <div class="nav bee_w100 bee_bw bee_textc bee_mt5"> <!-- 内部ul flex布局 内边距拉开位置 --> <ul class="bee_flex bee_p5"> <!-- flex内部个体空间平均分布 flex:1 --> <li class="bee_flex_1 "> <!-- 图标img高度设计 --> <a href=""><img class="bee_h30" src="static/img/html.png" alt=""><br><span>HTML/CSS</span></a> </li> <li class="bee_flex_1"> <a href=""><img class="bee_h30" src="static/img/JavaScript.png" alt=""><br><span> JavaScript</span></a> </li> <li class="bee_flex_1"> <a href=""><img class="bee_h30" src="static/img/code.png" alt=""><br><span> 服务端</span></a> </li> <li class="bee_flex_1"> <a href=""><img class="bee_h30" src="static/img/sql.png" alt=""><br><span> 数据库</span></a> </li> </ul> <!-- 同上一个ul --> <ul class="bee_flex bee_p5"> <li class="bee_flex_1"> <a href=""><img class="bee_h30" src="static/img/app.png" alt=""><br><span> 移动端</span></a> </li> <li class="bee_flex_1"> <a href=""><img class="bee_h30" src="static/img/manual.png" alt=""><br><span> 手册</span></a> </li> <li class="bee_flex_1"> <a href=""><img class="bee_h30" src="static/img/tool2.png" alt=""><br><span> 工具</span></a> </li> <li class="bee_flex_1"> <a href=""><img class="bee_h30" src="static/img/live.png" alt=""><br><span> 直播</span></a> </li> </ul> </div> <!-- 内容区设计 --> <!-- 内容区整体宽度及居中 --> <div class="courses bee_w100 "> <h3>推荐课程</h3> <!-- 课程一区 内部ul flex布局--> <ul class="bee_flex"> <!-- flex内部个体空间平均分布 flex:1 与右边图片拉开位置--> <li class="bee_flex_1 bee_mr5"> <!-- 图片高度设计 宽度100% --> <a href=""><img class="bee_h90 bee_w100" src="static/img/tjkc1.jpg" alt=""></a> </li> <!-- flex内部个体空间平均分布 flex:1 与左边图片拉开位置--> <li class="bee_flex_1 bee_ml5"> <!-- 图片高度设计 宽度100% --> <a href=""><img class="bee_h90 bee_w100" src="static/img/tjkc2.jpg" alt=""></a> </li> </ul> <!-- 课程二区 flex布局 背景 内外边距设计 --> <div class="bee_flex bee_bw bee_mt5 bee_p5"> <!-- flex内部个体空间平均分布 图片 flex:0.45 与右边文字拉开距离,a标签内部间距设为0,不影响图片高度,图片高度90 宽度100%--> <a class="bee_flex_45 bee_fs bee_mr5 " href=""><img class="bee_h90 bee_w100" src="static/img/tjkc3.jpg" alt=""></a> <!-- flex内部个体空间平均分布 文字 flex:0.55 外边距 位置排版,内部文字 flex 竖向布局--> <div class="bee_flex_55 bee_m5 bee_flex bee_flex_col "> <a href=""><span>CI框架30分钟极速入门</span></a> <!-- 内部两个区域内拉上下 拉开位置 --> <div class="bee_mt5 "> <!-- 文字效果大小设计 中级背景 及 播放次数0.6rem大小 --> <span class="bee_br30">中级</span><span class="bee_6rem">49748次播放</span> </div> </div> </div> <!-- 同上一层设计 --> <div class="bee_flex bee_bw bee_mt5 bee_p5 "> <a class="bee_fs bee_mr5 bee_flex_45" href=" "><img class="bee_h90 bee_w100" src="static/img/tjkc4.jpg " alt=" "></a> <div class="bee_flex_55 bee_m5 bee_flex bee_flex_col "> <a href=" "><span>2018前端入门_HTML5</span></a> <div class="bee_mt5 "> <span class="bee_br30 ">初级</span><span class="bee_6rem ">210066次播放</span> </div> </div> </div> <h3>最新更新 </h3> <!-- 最新课程设计 --> <!-- 整体同上设计 --> <div class="bee_flex bee_bw bee_mt5 bee_p5 "> <a class="bee_fs bee_mr5 bee_flex_45" href=" "><img class="bee_h90 bee_w100 " src="static/img/la.jpg " alt=" "></a> <!-- 右侧文字区设计 增加 内部竖向平均flex设计 及最小宽度为0设计,配合内部长篇文字区的隐藏设计--> <div class="bee_flex_55 bee_m5 bee_flex bee_flex_col bee_flex_bet bee_min_w"> <a href=" "><span>Laravel 5.8 中文文档手册</span></a> <!-- 长篇文字隐藏设计 flex竖向设计与横向排版的文字隐藏不同, 横向排版文字隐藏直接在父级设计 隐藏属性, 竖向排版在子级设计隐藏,父级最小宽度为0--> <span class="bee_6rem bee_text_hid "> 《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16 缓存驱动规范等等。</span> <!-- 播放次数及等级设计 --> <!-- flex布局 两端对齐 --> <div class="bee_flex bee_flex_bet bee_mt5 "> <span class="bee_br30 ">中级</span><span class="bee_6rem ">7744次播放</span> </div> </div> </div> <!-- 同上一层设计 --> <div class="bee_flex bee_bw bee_mt5 bee_p5 "> <a class="bee_fs bee_mr5 bee_flex_45 " href=" "><img class="bee_h90 bee_w100 " src="static/img/la.jpg " alt=" "></a> <div class="bee_m5 bee_flex bee_flex_col bee_flex_bet bee_min_w bee_flex_55"> <a href=" "><span>Laravel 5.8 中文文档手册</span></a> <span class="bee_6rem bee_text_hid "> 《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16 缓存驱动规范等等。</span> <div class="bee_flex bee_flex_bet bee_mt5 "> <span class="bee_br30 ">中级</span><span class="bee_6rem ">7744次播放</span> </div> </div> </div> <!-- 同上一层设计 --> <div class="bee_flex bee_bw bee_mt5 bee_p5 "> <a class="bee_fs bee_mr5 bee_flex_45" href=" "><img class="bee_h90 bee_w100" src="static/img/la.jpg " alt=" "></a> <div class="bee_m5 bee_flex bee_flex_col bee_flex_bet bee_min_w bee_flex_55"> <a href=" "><span>Laravel 5.8 中文文档手册</span></a> <span class="bee_6rem bee_text_hid "> 《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16 缓存驱动规范等等。</span> <div class="bee_flex bee_flex_bet bee_mt5 "> <span class="bee_br30 ">中级</span><span class="bee_6rem ">7744次播放</span> </div> </div> </div> <!-- 同上一层设计 --> <div class="bee_flex bee_bw bee_mt5 bee_p5 "> <a class="bee_fs bee_mr5 bee_flex_45" href=" "><img class="bee_h90 bee_w100" src="static/img/la.jpg " alt=" "></a> <div class="bee_m5 bee_flex bee_flex_col bee_flex_bet bee_min_w bee_flex_55"> <a href=" "><span>Laravel 5.8 中文文档手册</span></a> <span class="bee_6rem bee_text_hid "> 《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16 缓存驱动规范等等。</span> <div class="bee_flex bee_flex_bet bee_mt5 "> <span class="bee_br30 ">中级</span><span class="bee_6rem ">7744次播放</span> </div> </div> </div> <h3>最新文章 </h3> <!-- 整体同上设计 --> <!-- flex布局 --> <div class=" bee_flex bee_bw bee_mt5 bee_p5 "> <!-- 文字区占比 flex:0.7 --> <p class="bee_flex_70"> <a href=" "><span>PHP实现动态规划之***问题</span> <br> <span class=" bee_6rem "> 发布时间：2019-08-13</span></a> </p> <!-- 图片区占比 flex:0.3 图片高度设计 及宽度100%--> <a class=" bee_fs bee_flex_30" href=" "><img class=" bee_h60 bee_w100 " src=" static/img/php2.jpg " alt=" "></a> </div> <!-- 同上设计 --> <div class=" bee_flex bee_bw bee_mt5 bee_p5 "> <p class="bee_flex_70"> <a href=" "><span>PHP实现动态规划之***问题</span> <br> <span class=" bee_6rem "> 发布时间：2019-08-13</span></a> </p> <a class=" bee_fs bee_flex_30" href=" "><img class=" bee_h60 bee_w100 " src=" static/img/php2.jpg " alt=" "></a> </div> <!-- 同上设计 --> <div class=" bee_flex bee_bw bee_mt5 bee_p5 bee_flex_bet "> <p class="bee_flex_70"> <a href=" "><span>PHP实现动态规划之***问题</span> <br> <span class=" bee_6rem "> 发布时间：2019-08-13</span></a> </p> <a class=" bee_fs bee_flex_30" href=" "><img class=" bee_h60 bee_w100 " src=" static/img/php2.jpg " alt=" "></a> </div> <!-- 同上设计 --> <div class=" bee_flex bee_bw bee_mt5 bee_p5 bee_flex_bet "> <p class="bee_flex_70"> <a href=" "><span>PHP实现动态规划之***问题</span> <br> <span class="bee_6rem "> 发布时间：2019-08-13</span></a> </p> <a class="bee_fs bee_flex_30" href=" "><img class="bee_h60 bee_w100 " src=" static/img/php2.jpg " alt=" "></a> </div> <div> <!-- 更多文章flex居中设计 justify-content: center --> <a class="bee_flex bee_bw bee_mt5 bee_p5 bee_flex_cen " href=" "> <span>更多文章</span></a> </div> <h3>最新博文 </h3> <div> <p> <!-- 最新博文flex布局 两端对齐 --> <a class=" bee_flex bee_bw bee_mt5 bee_p5 bee_flex_bet " href=" "><span>PHP实现动态规划之***问题</span> <span class=" bee_6rem "> 2019-08-13</span></a> </p> </div> <!-- 同上设计 --> <div> <p> <a class=" bee_flex bee_bw bee_mt5 bee_p5 bee_flex_bet " href=" "><span>PHP实现动态规划之***问题</span> <span class=" bee_6rem "> 2019-08-13</span></a> </p> </div> <!-- 同上设计 --> <div> <p> <a class=" bee_flex bee_bw bee_mt5 bee_p5 bee_flex_bet " href=" "><span>PHP实现动态规划之***问题</span> <span class=" bee_6rem "> 2019-08-13</span></a> </p> </div> <!-- 同上设计 --> <div> <p> <a class=" bee_flex bee_bw bee_mt5 bee_p5 bee_flex_bet " href=" "><span>PHP实现动态规划之***问题</span> <span class=" bee_6rem "> 2019-08-13</span></a> </p> </div> <!-- 同上设计 --> <div> <p> <a class=" bee_flex bee_bw bee_mt5 bee_p5 bee_flex_bet " href=" "><span>PHP实现动态规划之***问题</span> <span class=" bee_6rem "> 2019-08-13</span></a> </p> </div> <div> <!-- 同上一个更多文章设计 --> <a class="bee_flex bee_bw bee_mt5 bee_p5 bee_flex_cen " href=" "> <span>更多文章</span></a> </div> </div> <!--底部--> <!-- 同顶部设计 --> <div class=" bee_320_768 bee_fixed bee_h30 bee_w100 footer "> <!-- 内部ulflex布局,文本居中 --> <ul class=" bee_flex bee_w100 bee_textc "> <!-- 图标flex:1平均分布 --> <li class=" bee_flex_1 "> <!-- 图标 锁定边线为设计基数 设计大小及内外边距 --> <a href=" "><img class=" bee_bbox bee_p5 bee_h30 " src=" static/img/avatar.png " alt=" "><br><span>主页</span></a> </li> <li class=" bee_flex_1 "> <a href=" "><img class=" bee_bbox bee_p5 bee_h30 " src=" static/img/settings.png " alt=" "><br><span>视频</span></a> </li> <li class=" bee_flex_1 "> <a href=" "><img class=" bee_bbox bee_p5 bee_h30 " src=" static/img/phone-call.png " alt=" "><br><span>社区</span></a> </li> <li class=" bee_flex_1 "> <a href=" "><img class=" bee_bbox bee_p5 bee_h30 " src=" static/img/download.png " alt=" "><br><span>我的</span></a> </li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例