0911 迷你UI框架设计php中文网移动首页 20190911 2000-2200 - 第一阶段 CSS前端开发

Community Learn Tools Library Leisure

English

Home > List of blog posts > 0911 迷你UI框架设计php中文网移动首页 20190911 2000-2200

Blogger Information

Blog 28

fans 0

comment 0

visits 19694

Special Recommendation

More>

Related recommendations

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>

运行实例 »

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

Correction status：qualified

Teacher's comments：bee是蜜蜂的意思吧, 你的小框架写得不错

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

0912 前端整站仿制,19年中秋节作业. 20190912 2000-2200

2019-09-16 17:23:34