0910 仿php中文网移动端首页 20190910 2000-2200

flex 布局, 仿php中文网首页,

总结:

1:注意相同属性标签,可以引用同一个 类属性, class中间用空格分开

2,注意固定定位的宽度与页面宽度的最大值的计算基数. 

在非100%宽度的情况下,固定定位最大宽度大于页面最大宽度,所以固定定位的最大宽度要单独设定

3 新增加的 flex布局应用:

最新文章及最新博文  延用了之前的0.45/0.55的flex布局应用

最新文章的播放次数 考虑到文字效果的设计, 应用flex布局更为复杂. 采用了 右浮动效果, 

相同类的引用 注意不同属性的单独设置,, 相同类的flex继承,  下图中.courses .bw p 继承了之前的 0.55flex布局 需要重新设定为1

最新博文的两端对齐

更多文章的 居中效果

项目截图:

实例

/* 标题统一设计 */

h3 {
    text-align: left;
    margin-left: 10px;
    color: gray;
    font-size: 1em;
}


/* 课程居中 两边留白 */

.courses {
    width: 98%;
    margin: 0 auto;
}


/* ul flex布局 */

.courses ul {
    display: flex;
}


/* ul 内li flex居中 */

.courses ul li {
    flex: 1;
    box-sizing: border-box;
}


/* 图片中间分开 */

.courses ul li:first-of-type {
    margin-right: 10px;
}


/* 图片在大小,要设计高度,宽度100% */

.courses ul li img {
    width: 100%;
    height: 140px;
}


/* 课程部分大小设计及flex布局 */

.courses .kc {
    margin: 5px auto;
    text-align: left;
    background: white;
    display: flex;
}


/* 课程图片占比设计 */

.courses .kc>a {
    flex: 0.45;
    padding: 7px;
    height: 90px;
}


/* 课程图片大小 注意与父级的高度关系*/

.courses .kc img {
    width: 100%;
    height: 90px;
}


/* 课程文字部分效果 */

.courses .kc p {
    flex: 0.55;
    height: 90px;
    line-height: 180%;
    /* 多余文字省略号显示 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 多余文字两边间距 */
    margin: 7px;
}


/* 课程标题 选取第一个span进行设计 */

.courses .kc p a span:first-of-type {
    font-size: 1rem;
    margin-left: 5px;
}


/* 最后一行,播放次数及日期 多余文字大小设计, 单独设计类 .zx */

.courses .zx {
    font-size: 0.7rem;
    padding: 0 5px;
}


/* 课程级别文字效果从后选取第二个span设计 */

.courses .kc p>span:nth-last-of-type(2) {
    color: antiquewhite;
    background: #333;
    border-radius: 30%;
    padding: 0 7px;
    font-size: 0.8rem;
    margin-left: 5px;
}


/* 播放次数 从前选取第三个span设计 */

.courses .kc p>span:nth-of-type(3) {
    float: right;
}


/* 最新文章设计, 引用kc的flex布局 重新分布左7右3,注意内部图片高度设计*/

.courses .xx {
    height: 75px;
}

.courses .xx p {
    flex: 0.70;
    height: 60px;
}

.courses .xx a {
    flex: 0.30;
    height: 60px;
}

.courses .xx img {
    height: 60px;
}


/* 博文内部a标签引用 kc的flex的布局, 重新布局为两端对齐 ,高度设计 */

.courses .bw {
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
}


/* 更多文章内部a标签引用kc的flex布局,布局为居中,高度设计 */

.courses .gd {
    justify-content: center;
    height: 40px;
    line-height: 40px;
    margin-bottom: 25px;
}

实例

    <div class="courses">
        <h3>推荐课程</h3>
        <ul>
            <li>
                <a href=""><img src="static/img/tjkc1.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/img/tjkc2.jpg" alt=""></a>
            </li>
        </ul>
        <div class="kc">
            <a href=""><img src="static/img/tjkc3.jpg" alt=""></a>
            <p>
                <a href=""><span>CI框架30分钟极速入门</span></a>
                <br>
                <span>中级</span><span class="zx">49748次播放</span>
            </p>
        </div>
        <div class="kc">
            <a href=""><img src="static/img/tjkc4.jpg" alt=""></a>
            <p>
                <a href=""><span>2018前端入门_HTML5</a>
                <br>
                <span>初级</span><span class="zx">210066次播放</span>
            </p>
        </div>
        <h3>最新更新 </h3>
        <div class="kc">
            <a href=""><img src="static/img/la.jpg" alt=""></a>
            <p>
                <a href=""><span>Laravel 5.8 中文文档手册</span></a>
                <br>
                <span class="zx"> 《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>
                <br>
                <span>中级</span><span class="zx">7744次播放</span>
            </p>
        </div>
        <div class="kc">
            <a href=""><img src="static/img/la.jpg" alt=""></a>
            <p>
                <a href=""><span>Laravel 5.8 中文文档手册</span></a>
                <br>
                <span class="zx"> 《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>
                <br>
                <span>中级</span><span class="zx">7744次播放</span>
            </p>
        </div>
        <div class="kc">
            <a href=""><img src="static/img/la.jpg" alt=""></a>
            <p>
                <a href=""><span>Laravel 5.8 中文文档手册</span></a>
                <br>
                <span class="zx"> 《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>
                <br>
                <span>中级</span><span class="zx">7744次播放</span>
            </p>
        </div>
        <div class="kc">
            <a href=""><img src="static/img/la.jpg" alt=""></a>
            <p>
                <a href=""><span>Laravel 5.8 中文文档手册</span></a>
                <br>
                <span class="zx"> 《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>
                <br>
                <span>中级</span><span class="zx">7744次播放</span>
            </p>
        </div>
        <h3>最新文章 </h3>
        <div class="kc xx">
            <p>
                <a href=""><span>PHP实现动态规划之***问题</span>
                <br>
                <span class="zx"> 发布时间：2019-08-13</span></a>
            </p>
            <a href=""><img src="static/img/php2.jpg" alt=""></a>
        </div>
        <div class="kc xx">
            <p>
                <a href=""><span>PHP实现动态规划之***问题</span>
                <br>
                <span class="zx"> 发布时间：2019-08-13</span></a>
            </p>
            <a href=""><img src="static/img/php2.jpg" alt=""></a>
        </div>
        <div class="kc xx">
            <p>
                <a href=""><span>PHP实现动态规划之***问题</span>
                <br>
                <span class="zx"> 发布时间：2019-08-13</span></a>
            </p>
            <a href=""><img src="static/img/php2.jpg" alt=""></a>
        </div>
        <div class="kc xx">
            <p>
                <a href=""><span>PHP实现动态规划之***问题</span>
                <br>
                <span  class="zx"> 发布时间：2019-08-13</span></a>
            </p>
            <a href=""><img src="static/img/php2.jpg" alt=""></a>
        </div>
        <div>
            <a class="kc gd" href=""><span>更多文章</span></a>
        </div>
        <h3>最新博文 </h3>
        <div>
            <p>
                <a class="kc bw" href=""><span>PHP实现动态规划之***问题</span>
                <span class="zx"> 2019-08-13</span></a>
            </p>
        </div>
        <div>
            <p>
                <a class="kc bw" href=""><span>PHP实现动态规划之***问题</span>
                <span class="zx"> 2019-08-13</span></a>
            </p>
        </div>
        <div>
            <p>
                <a class="kc bw" href=""><span>PHP实现动态规划之***问题</span>
             <span class="zx"> 2019-08-13</span></a>
            </p>
        </div>
        <div>
            <p>
                <a class="kc bw" href=""><span>PHP实现动态规划之***问题</span>
                <span class="zx"> 2019-08-13</span></a>
            </p>
        </div>
        <div>
            <p>
                <a class="kc bw" href=""><span>PHP实现动态规划之***问题</span>
                <span class="zx"> 2019-08-13</span></a>
            </p>
        </div>
        <div>
            <a class="kc gd" href=""><span>更多文章</span></a>
        </div>
    </div>