Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 弹性布局(Flex box) 仿PHP中文网手机站首页 - 大型CMS实战开发第九期
Blogger Information
Blog 25
fans 0
comment 0
visits 29659
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
弹性布局(Flex box) 仿PHP中文网手机站首页 - 大型CMS实战开发第九期
宿州市筋斗云信息科技-Vip
Original
760 people have browsed it

弹性布局(Flex box) 仿PHP中文网手机站首页！话不多说先上代码！

首页效果图！！

弹性布局仿PHP中文网手机站-首页.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性布局仿PHP中文网手机站-首页</title>
    <link rel="stylesheet" href="style/css/php_index.css">


</head>
<body>
<!--页头-->
<header>
    <div class="logo">
        <a href=""> <img src="https://m.php.cn/static/images/logo.png" alt=""> </a>
    </div>
    <div class="user">
        <a href=""> <img src="https://img.php.cn/upload/avatar/000/082/802/5a416508a2024918.jpg" alt="用户头像"> </a>
    </div>
    <div class="nav">
        <a href=""> <img src="https://m.php.cn/static/images/ico/sql.png" alt="导航"> </a>
    </div>
</header>

<!--Banner 图片-->
<div class="banner">
    <a href=""> <img src="https://m.php.cn/static/images/ico/3.jpg" alt="轮播"> </a>
</div>

<!-- 分类导航 -->
<nav>
    <ul>
        <li>
            <a href="#">

                <img src="https://m.php.cn/static/images/ico/html.png" alt="">
                <span>HTML/CSS</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/JavaScript.png" alt="">
                <span>JavaScript</span>
            </a>
        </li>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/code.png" alt="">
                <span>服务端</span>
            </a>
        </li>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/sql.png" alt="">
                <span>数据库</span>
            </a>
        </li>

    </ul>

    <ul>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/app.png" alt="">
                <span>移动端</span>
            </a>
        </li>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/manual.png" alt="">
                <span>手册</span>
            </a>
        </li>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/tool2.png" alt="">
                <span>工具</span>
            </a>
        </li>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/live.png" alt="">
                <span>直播</span>
            </a>
        </li>

    </ul>
</nav>


<!--主体-->
<main>
    <article class="recommend">
        <!-- 标题 -->
 <h3>推荐课程</h3>
        <ul class="row-box">
            <li>
                <a href="#">
                    <img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="">
                </a>

            </li>
        </ul>

        <ul class="col-box">
            <li>
                <a href="#">
                    <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt="">
                </a>

                <span>
                   <a href="#">CI框架30分钟极速入门</a>

                   <p class="info"><i>中级</i> 53016次播放</p>

               </span>

            </li>
            <li>
                <a href="#">
                    <img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
                </a>

                <span>
                   <a href="#">CI框架30分钟极速入门</a>

                    <p class="info"><i>初级</i> 53016次播放</p>

               </span>

            </li>
        </ul>

    </article>

    <!-- 最新更新 -->
 <article class="recommend ">
        <h3>最新更新</h3>

        <ul>
            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">2019python自学视频</a>
                    </p>
                    <p class="description">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
                    <p class="count">
                            <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>


            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/015/5da7e9b7895ed229.png" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">2019python自学视频</a>
                    </p>
                    <p class="description">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
                    <p class="count">
                        <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>

            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/014/5da6a50535529903.jpg" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">从零开始到WEB响应式布局</a>
                    </p>
                    <p class="description">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
                    <p class="count">
                        <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>

            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/015/5da51b8ff1224244.png" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">PHP文件基础操作</a>
                    </p>
                    <p class="description">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
                    <p class="count">
                        <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>

            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/014/5da16c1d7f658408.jpg" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">memcache基础课程</a>
                    </p>
                    <p class="description">本课程带你从零认识memcache，让你在一小时左右轻松掌握memcache在windows和linux上的安装，基本命令的使用以及与php集成、thinkphp5中使用memcache做为缓存系统等技术。</p>
                    <p class="count">
                        <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>

            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/014/5d9ec555ee63b448.png" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">微信小程序--企业微网站</a>
                    </p>
                    <p class="description">1，介绍小程序、开发者工具
 2，介绍小程序文档
 3，微官网项目
 4，首页、产品、产品详情、新闻、新闻详情、关于我们</p>
                    <p class="count">
                        <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>

        </ul>
    </article>

    <!--最新文章-->

 <article class="recommend article-list">
        <h3>最新文章</h3>

        <ul>
            <li>
                <div class="info">
                    <p class="title">
                        <a href="#">PHP中self与this关键字的区别</a>
                    </p>
                    <p class="description">
                       发布时间: 2019-11-08
 </p>

                </div>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/article/000/000/041/5dc53c0b4b667675.jpg" alt="">
                    </a>
                </div>

            </li>

            <li>
                <div class="info">
                    <p class="title">
                        <a href="#">php 安装zip模块</a>
                    </p>
                    <p class="description">
                        发布时间: 2019-11-08
 </p>

                </div>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/article/000/000/041/5dc53c0b4b667675.jpg" alt="">
                    </a>
                </div>

            </li>

            <li>
                <div class="info">
                    <p class="title">
                        <a href="#">PHP mysqli操作数据库</a>
                    </p>
                    <p class="description">
                        发布时间: 2019-11-08
 </p>

                </div>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/article/000/000/020/5dc3b18078e20124.jpg" alt="">
                    </a>
                </div>

            </li>

            <li>
                <div class="info">
                    <p class="title">
                        <a href="#">ThinkPHP 5.x 远程命令执行漏洞分析与复现</a>
                    </p>
                    <p class="description">
                        发布时间: 2019-11-08
 </p>

                </div>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/article/000/000/020/5d5b8e990ed2b787.jpg" alt="">
                    </a>
                </div>

            </li>

            <li>
                <div class="info">
                    <p class="title">
                        <a href="#">基于 ThinkPHP5.1 实现的海豚后台登录源码分析</a>
                    </p>
                    <p class="description">
                        发布时间: 2019-11-08
 </p>

                </div>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/article/000/000/020/5d81c849a1cda110.jpg" alt="">
                    </a>
                </div>

            </li>

            <div class="more">
                更多内容
 </div>
        </ul>

    </article>

    <!--最新文章-->

 <article class="recommend blog">
        <h3>最新博文</h3>

        <ul>
            <li>
                <span class="title">
                    <a href="#">移动端 、手机端、去掉横向滚动条 亲测生效！！！</a>
                </span>
                <span class="description">
                    2019-11-08
 </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">PHP学习第一天:软件安装篇</a>
                </span>
                <span class="description">
                    2019-11-08
 </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</a>
                </span>
                <span class="description">
                    2019-11-08
 </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">thinkphp5.0.24前置操作的大小写问题</a>
                </span>
                <span class="description">
                    2019-11-08
 </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">laravel-创建“控制器”和“模型”，使用模型方法获取数据库内容并输出--2019年11月1日</a>
                </span>
                <span class="description">
                    2019-11-08
 </span>
            </li>


            <div class="more">
                更多内容
 </div>
        </ul>

    </article>

    <!--最新文章-->

 <article class="recommend blog">
        <h3>最新问答</h3>

        <ul>
            <li>
                <span class="title">
                    <a href="#">移动端 、手机端、去掉横向滚动条 亲测生效！！！</a>
                </span>
                <span class="description">
                    2019-11-08
 </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">PHP学习第一天:软件安装篇</a>
                </span>
                <span class="description">
                    2019-11-08
 </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</a>
                </span>
                <span class="description">
                    2019-11-08
 </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">thinkphp5.0.24前置操作的大小写问题</a>
                </span>
                <span class="description">
                    2019-11-08
 </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">laravel-创建“控制器”和“模型”，使用模型方法获取数据库内容并输出--2019年11月1日</a>
                </span>
                <span class="description">
                    2019-11-08
 </span>
            </li>


            <div class="more" style="margin-bottom: 30px">
                更多内容
 </div>
        </ul>

    </article>

</main>

<!--页脚-->
<footer>
    <a href="" class="active">
        <span class="icon">&#xe6c5;</span>
        首页
 </a>

    <a href="">
        <span class="icon">&#xe67d;</span>
        视频
 </a>

    <a href="">
        <span class="icon">&#xe63f;</span>
        社区
 </a>

    <a href="">
        <span class="icon">&#xe6b1;</span>
        我的
 </a>
</footer>

</body>
</html>


CSS样式在这里

*{
    padding: 0;
    margin: 0;
    font-size: 1rem;
}

@font-face {
    font-family: 'iconfont';  /* project id 1476815 */
    src: url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.eot');
    src: url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.woff') format('woff'),
    url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.svg#iconfont') format('svg');
}

.icon{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

body {

    padding: 42px 0;
    /*宽度100%*/
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    /*设置背景色*/
    background: #F2F2F2;

    /*- 设置最小尺寸 -*/
    min-width: 320px;
    max-width: 768px;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
}

/*设置所有图片全部自适应父容器,响应式显示*/
img {
    width: 100%;
}

ul, li {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: gray;
    cursor: pointer;
}

header {
    /*固定在顶部*/
    position: fixed;
    top: 0;

    /*宽度100%*/
    width: 100%;
    /*高度42*/
    height: 42px;

    /*设置背景色*/
    background: #2E2D3C;

    /*- 设置最小尺寸 -*/
    min-width: 320px;
    max-width: 768px;

    /*设为弹性容器*/
    display: flex;

    justify-content: space-between;
    align-items: center;
}

header > .user {
    order: -1;
}

header > .user > a > img {
    width: 26px;
    height: 26px;
    border-radius: 100%;
    margin: 5px;
}

header > .nav > a > img{
    width: 26px;
    height: 26px;
    margin: 5px;
}

header > .logo > a > img {
    width: auto;
    height: 45px;
}


.banner {
    padding: 0;
    margin: 0;
}

.banner > a > img {
    width: 100%;
}

nav {
    background: #FFF;
    display: flex;

    flex-flow: column nowrap;
}

/*图片默认大小*/
nav img {
    width: 45px;
    height: 45px;
}

nav > ul {
    display: flex;
    /*每个菜单项水平且不换行*/
    flex-flow: row nowrap;
}

/*每一菜单项均分全部空间*/
nav ul li {
    flex: 1;

}

/*图片与文本应该做为一个组件,统一设置*/
nav ul li a {
    display: flex;
    /*图片, 链接文本垂直排列*/
    flex-flow: column wrap;
    /*交叉轴上居中显示*/
    align-items: center;
    /*外边距可以使菜单项之间不太拥挤*/
    margin: 10px;

}

/*菜单项文本与上面图标有一个间隙*/
nav ul li a span {

    margin-top: 5px;

    font-size: .8rem;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #F2F2F2;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 50px;
    min-width: 320px;
    max-width: 768px;

    border-top: 1px solid #d2d2d2;
}

footer > a{
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
    border-right: 1px dashed #FFFFFF;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    font-size: .9rem;
}

footer > .active {
    color: #FD482C;
}

footer > a > .icon {
    font-size: 1.2rem;
}

footer > a:last-child {
    border: none;
}

main {
    display: flex;
    flex-flow: column nowrap;
}

main > .recommend > h3 {
    margin-top: 30px;
    padding: 10px;
    color: #777;
}

main > .recommend >.row-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    background: #F2F2F2;
}

main > .recommend >.row-box > li > img {
    width: 100%;
}

main > .recommend >.row-box > li {
    padding: 10px;
    background: transparent;
}

main > .recommend >.row-box > li:first-of-type {
    padding-right: 5px;
}

main > .recommend >.row-box > li:last-of-type {
    padding-left: 5px;
}

main > .recommend > .col-box {
    display: flex;

    flex-flow: column nowrap;
    padding: 10px;
}

main > .recommend > .col-box > li {
    display: flex;

    flex-flow: row nowrap;
    background: #FFF;
    margin-bottom: 20px;
}

main > .recommend > .col-box > li > a {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
}

main > .recommend > .col-box > li > span {
    display: flex;
    flex: 1.2;
    flex-flow: column nowrap;

    padding: 10px;
    padding-left: 0;
    box-sizing: border-box;
}

.info {
    display: flex;
    flex-flow: row nowrap;
    margin-top: 10px;
    font-size: 0.8rem;
    color: #777;
}

.info i{
    flex-basis: 40px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background: #777;
    color: #fff9ec;
    font-size: 0.7rem;
    border-radius: 10px;
    margin-right: 5px;
}

main > .recommend > .col-box > li:last-of-type {
    margin-bottom: 0;
}

.recommend > ul {
    display: flex;
    flex-flow: column nowrap;
    padding: 10px;
    box-sizing: border-box;
}

.recommend > ul > li {
    display: flex;

    flex-flow: row nowrap;
    justify-content: space-between;
    background: #FFFFFF;
    margin-bottom: 15px;
    box-shadow: 1px 1px 10px #d2d2d2;
}

.recommend > ul > li > ***g-box {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
}

.recommend > ul > li > ***g-box > a > img {
    width: 100%;
    min-height: 83px;
}

.recommend > ul > li > .info {
    flex: 1.2;

    display: flex;
    flex-flow: column nowrap;
    padding-right: 10px;

}

.recommend > ul > li > .info > .title {
    height: 26px;
    overflow: hidden;
}

.recommend > ul > li > .info > .title > a {
    font-size: 1rem;
}

.recommend > ul > li > .info > .description {
    height: 18px;
    overflow: hidden;
    font-size: .7rem;
    margin-bottom: 10px;
}

.recommend > ul > li > .info > .count {
    display: flex;

    flex-flow: row nowrap;
    justify-content: space-between;
}

.recommend > ul > li > .info > .count >span {
    font-size: .9rem;
    color: #777;
}

.article-list {
    padding: 0;
   margin-top: -30px;
}


.article-list> ul > li > ***g-box {
    padding: 10px;
}

.article-list > ul > li > ***g-box > a > img {
    width: 100%;
    min-height: 60px;
}

.article-list> ul > li > .info {
    flex: 2.2;
    padding: 10px;
}

.article-list> ul > li > .info > .title {
    height: 24px;
}

.article-list> ul > li > .info > .title > a{
    color: #666;
    font-weight: bold;
}

.more {
    background: #FFFFFF;
    text-align: center;
    color: #777;
    padding: 10px 0;
    font-size: 1rem;
}

.blog > ul {
    padding: 10px;
}

.blog > ul > li {
    display: flex;

    flex-flow: row nowrap;
    padding: 10px 10px 20px 10px;
}
.blog > ul > li > .title {
    flex: 1;
    height: 24px;
    overflow: hidden;
}

.blog > ul > li > .title a{
    font-size: .9rem;
    font-weight: bold;
}

.blog > ul > li > .description {
    font-size: .8rem;
    color: #777;
}


实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性布局仿PHP中文网手机站-首页</title>
    <style>
*{
    padding: 0;
    margin: 0;
    font-size: 1rem;
}

@font-face {
    font-family: 'iconfont';  /* project id 1476815 */
    src: url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.eot');
    src: url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.woff') format('woff'),
    url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1476815_k8vrwc4sju9.svg#iconfont') format('svg');
}

.icon{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

body {

    padding: 42px 0;
    /*宽度100%*/
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    /*设置背景色*/
    background: #F2F2F2;

    /*- 设置最小尺寸 -*/
    min-width: 320px;
    max-width: 768px;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
}

/*设置所有图片全部自适应父容器,响应式显示*/
img {
    width: 100%;
}

ul, li {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: gray;
    cursor: pointer;
}

header {
    /*固定在顶部*/
    position: fixed;
    top: 0;

    /*宽度100%*/
    width: 100%;
    /*高度42*/
    height: 42px;

    /*设置背景色*/
    background: #2E2D3C;

    /*- 设置最小尺寸 -*/
    min-width: 320px;
    max-width: 768px;

    /*设为弹性容器*/
    display: flex;

    justify-content: space-between;
    align-items: center;
}

header > .user {
    order: -1;
}

header > .user > a > img {
    width: 26px;
    height: 26px;
    border-radius: 100%;
    margin: 5px;
}

header > .nav > a > img{
    width: 26px;
    height: 26px;
    margin: 5px;
}

header > .logo > a > img {
    width: auto;
    height: 45px;
}


.banner {
    padding: 0;
    margin: 0;
}

.banner > a > img {
    width: 100%;
}

nav {
    background: #FFF;
    display: flex;

    flex-flow: column nowrap;
}

/*图片默认大小*/
nav img {
    width: 45px;
    height: 45px;
}

nav > ul {
    display: flex;
    /*每个菜单项水平且不换行*/
    flex-flow: row nowrap;
}

/*每一菜单项均分全部空间*/
nav ul li {
    flex: 1;

}

/*图片与文本应该做为一个组件,统一设置*/
nav ul li a {
    display: flex;
    /*图片, 链接文本垂直排列*/
    flex-flow: column wrap;
    /*交叉轴上居中显示*/
    align-items: center;
    /*外边距可以使菜单项之间不太拥挤*/
    margin: 10px;

}

/*菜单项文本与上面图标有一个间隙*/
nav ul li a span {

    margin-top: 5px;

    font-size: .8rem;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #F2F2F2;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 50px;
    min-width: 320px;
    max-width: 768px;

    border-top: 1px solid #d2d2d2;
}

footer > a{
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
    border-right: 1px dashed #FFFFFF;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    font-size: .9rem;
}

footer > .active {
    color: #FD482C;
}

footer > a > .icon {
    font-size: 1.2rem;
}

footer > a:last-child {
    border: none;
}

main {
    display: flex;
    flex-flow: column nowrap;
}

main > .recommend > h3 {
    margin-top: 30px;
    padding: 10px;
    color: #777;
}

main > .recommend >.row-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    background: #F2F2F2;
}

main > .recommend >.row-box > li > img {
    width: 100%;
}

main > .recommend >.row-box > li {
    padding: 10px;
    background: transparent;
}

main > .recommend >.row-box > li:first-of-type {
    padding-right: 5px;
}

main > .recommend >.row-box > li:last-of-type {
    padding-left: 5px;
}

main > .recommend > .col-box {
    display: flex;

    flex-flow: column nowrap;
    padding: 10px;
}

main > .recommend > .col-box > li {
    display: flex;

    flex-flow: row nowrap;
    background: #FFF;
    margin-bottom: 20px;
}

main > .recommend > .col-box > li > a {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
}

main > .recommend > .col-box > li > span {
    display: flex;
    flex: 1.2;
    flex-flow: column nowrap;

    padding: 10px;
    padding-left: 0;
    box-sizing: border-box;
}

.info {
    display: flex;
    flex-flow: row nowrap;
    margin-top: 10px;
    font-size: 0.8rem;
    color: #777;
}

.info i{
    flex-basis: 40px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background: #777;
    color: #fff9ec;
    font-size: 0.7rem;
    border-radius: 10px;
    margin-right: 5px;
}

main > .recommend > .col-box > li:last-of-type {
    margin-bottom: 0;
}

.recommend > ul {
    display: flex;
    flex-flow: column nowrap;
    padding: 10px;
    box-sizing: border-box;
}

.recommend > ul > li {
    display: flex;

    flex-flow: row nowrap;
    justify-content: space-between;
    background: #FFFFFF;
    margin-bottom: 15px;
    box-shadow: 1px 1px 10px #d2d2d2;
}

.recommend > ul > li > .img-box {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
}

.recommend > ul > li > .img-box > a > img {
    width: 100%;
    min-height: 83px;
}

.recommend > ul > li > .info {
    flex: 1.2;

    display: flex;
    flex-flow: column nowrap;
    padding-right: 10px;

}

.recommend > ul > li > .info > .title {
    height: 24px;
    overflow: hidden;
}

.recommend > ul > li > .info > .title > a {
    font-size: 1rem;
}

.recommend > ul > li > .info > .description {
    height: 18px;
    overflow: hidden;
    font-size: .7rem;
    margin-bottom: 10px;
}

.recommend > ul > li > .info > .count {
    display: flex;

    flex-flow: row nowrap;
    justify-content: space-between;
}

.recommend > ul > li > .info > .count >span {
    font-size: .9rem;
    color: #777;
}

.article-list {
    padding: 0;
   margin-top: -30px;
}


.article-list> ul > li > .img-box {
    padding: 10px;
}

.article-list > ul > li > .img-box > a > img {
    width: 100%;
    min-height: 60px;
}

.article-list> ul > li > .info {
    flex: 2.2;
    padding: 10px;
}

.article-list> ul > li > .info > .title {
    height: 24px;
}

.article-list> ul > li > .info > .title > a{
    color: #666;
    font-weight: bold;
}

.more {
    background: #FFFFFF;
    text-align: center;
    color: #777;
    padding: 10px 0;
    font-size: 1rem;
}

.blog > ul {
    padding: 10px;
}

.blog > ul > li {
    display: flex;

    flex-flow: row nowrap;
    padding: 10px 10px 20px 10px;
}
.blog > ul > li > .title {
    flex: 1;
    height: 24px;
    overflow: hidden;
}

.blog > ul > li > .title a{
    font-size: .9rem;
    font-weight: bold;
}

.blog > ul > li > .description {
    font-size: .8rem;
    color: #777;
}

</style>


</head>
<body>
<!--页头-->
<header>
    <div class="logo">
        <a href=""> <img src="https://m.php.cn/static/images/logo.png" alt=""> </a>
    </div>
    <div class="user">
        <a href=""> <img src="https://img.php.cn/upload/avatar/000/082/802/5a416508a2024918.jpg" alt="用户头像"> </a>
    </div>
    <div class="nav">
        <a href=""> <img src="https://m.php.cn/static/images/ico/sql.png" alt="导航"> </a>
    </div>
</header>

<!--Banner 图片-->
<div class="banner">
    <a href=""> <img src="https://m.php.cn/static/images/ico/3.jpg" alt="轮播"> </a>
</div>

<!-- 分类导航 -->
<nav>
    <ul>
        <li>
            <a href="#">

                <img src="https://m.php.cn/static/images/ico/html.png" alt="">
                <span>HTML/CSS</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/JavaScript.png" alt="">
                <span>JavaScript</span>
            </a>
        </li>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/code.png" alt="">
                <span>服务端</span>
            </a>
        </li>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/sql.png" alt="">
                <span>数据库</span>
            </a>
        </li>

    </ul>

    <ul>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/app.png" alt="">
                <span>移动端</span>
            </a>
        </li>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/manual.png" alt="">
                <span>手册</span>
            </a>
        </li>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/tool2.png" alt="">
                <span>工具</span>
            </a>
        </li>

        <li>
            <a href="">
                <img src="https://m.php.cn/static/images/ico/live.png" alt="">
                <span>直播</span>
            </a>
        </li>

    </ul>
</nav>


<!--主体-->
<main>
    <article class="recommend">
        <!-- 标题 -->
        <h3>推荐课程</h3>
        <ul class="row-box">
            <li>
                <a href="#">
                    <img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="">
                </a>

            </li>
        </ul>

        <ul class="col-box">
            <li>
                <a href="#">
                    <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt="">
                </a>

                <span>
                   <a href="#">CI框架30分钟极速入门</a>

                   <p class="info"><i>中级</i> 53016次播放</p>

               </span>

            </li>
            <li>
                <a href="#">
                    <img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
                </a>

                <span>
                   <a href="#">CI框架30分钟极速入门</a>

                    <p class="info"><i>初级</i> 53016次播放</p>

               </span>

            </li>
        </ul>

    </article>

    <!-- 最新更新 -->
    <article class="recommend ">
        <h3>最新更新</h3>

        <ul>
            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">2019python自学视频</a>
                    </p>
                    <p class="description">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
                    <p class="count">
                            <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>


            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/015/5da7e9b7895ed229.png" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">2019python自学视频</a>
                    </p>
                    <p class="description">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
                    <p class="count">
                        <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>

            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/014/5da6a50535529903.jpg" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">从零开始到WEB响应式布局</a>
                    </p>
                    <p class="description">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
                    <p class="count">
                        <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>

            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/015/5da51b8ff1224244.png" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">PHP文件基础操作</a>
                    </p>
                    <p class="description">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
                    <p class="count">
                        <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>

            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/014/5da16c1d7f658408.jpg" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">memcache基础课程</a>
                    </p>
                    <p class="description">本课程带你从零认识memcache，让你在一小时左右轻松掌握memcache在windows和linux上的安装，基本命令的使用以及与php集成、thinkphp5中使用memcache做为缓存系统等技术。</p>
                    <p class="count">
                        <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>

            <li>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/course/000/000/014/5d9ec555ee63b448.png" alt="">
                    </a>
                </div>

                <div class="info">
                    <p class="title">
                        <a href="#">微信小程序--企业微网站</a>
                    </p>
                    <p class="description">1，介绍小程序、开发者工具
                        2，介绍小程序文档
                        3，微官网项目
                        4，首页、产品、产品详情、新闻、新闻详情、关于我们</p>
                    <p class="count">
                        <i>初级</i><span>1979次播放</span>
                    </p>
                </div>
            </li>

        </ul>
    </article>

    <!--最新文章-->

    <article class="recommend article-list">
        <h3>最新文章</h3>

        <ul>
            <li>
                <div class="info">
                    <p class="title">
                        <a href="#">PHP中self与this关键字的区别</a>
                    </p>
                    <p class="description">
                       发布时间: 2019-11-08
                    </p>

                </div>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/article/000/000/041/5dc53c0b4b667675.jpg" alt="">
                    </a>
                </div>

            </li>

            <li>
                <div class="info">
                    <p class="title">
                        <a href="#">php 安装zip模块</a>
                    </p>
                    <p class="description">
                        发布时间: 2019-11-08
                    </p>

                </div>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/article/000/000/041/5dc53c0b4b667675.jpg" alt="">
                    </a>
                </div>

            </li>

            <li>
                <div class="info">
                    <p class="title">
                        <a href="#">PHP mysqli操作数据库</a>
                    </p>
                    <p class="description">
                        发布时间: 2019-11-08
                    </p>

                </div>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/article/000/000/020/5dc3b18078e20124.jpg" alt="">
                    </a>
                </div>

            </li>

            <li>
                <div class="info">
                    <p class="title">
                        <a href="#">ThinkPHP 5.x 远程命令执行漏洞分析与复现</a>
                    </p>
                    <p class="description">
                        发布时间: 2019-11-08
                    </p>

                </div>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/article/000/000/020/5d5b8e990ed2b787.jpg" alt="">
                    </a>
                </div>

            </li>

            <li>
                <div class="info">
                    <p class="title">
                        <a href="#">基于 ThinkPHP5.1 实现的海豚后台登录源码分析</a>
                    </p>
                    <p class="description">
                        发布时间: 2019-11-08
                    </p>

                </div>
                <div class="img-box">
                    <a href="#">
                        <img src="https://img.php.cn/upload/article/000/000/020/5d81c849a1cda110.jpg" alt="">
                    </a>
                </div>

            </li>

            <div class="more">
                更多内容
            </div>
        </ul>

    </article>

    <!--最新文章-->

    <article class="recommend blog">
        <h3>最新博文</h3>

        <ul>
            <li>
                <span class="title">
                    <a href="#">移动端 、手机端、去掉横向滚动条 亲测生效！！！</a>
                </span>
                <span class="description">
                    2019-11-08
                </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">PHP学习第一天:软件安装篇</a>
                </span>
                <span class="description">
                    2019-11-08
                </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</a>
                </span>
                <span class="description">
                    2019-11-08
                </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">thinkphp5.0.24前置操作的大小写问题</a>
                </span>
                <span class="description">
                    2019-11-08
                </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">laravel-创建“控制器”和“模型”，使用模型方法获取数据库内容并输出--2019年11月1日</a>
                </span>
                <span class="description">
                    2019-11-08
                </span>
            </li>


            <div class="more">
                更多内容
            </div>
        </ul>

    </article>

    <!--最新文章-->

    <article class="recommend blog">
        <h3>最新问答</h3>

        <ul>
            <li>
                <span class="title">
                    <a href="#">移动端 、手机端、去掉横向滚动条 亲测生效！！！</a>
                </span>
                <span class="description">
                    2019-11-08
                </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">PHP学习第一天:软件安装篇</a>
                </span>
                <span class="description">
                    2019-11-08
                </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</a>
                </span>
                <span class="description">
                    2019-11-08
                </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">thinkphp5.0.24前置操作的大小写问题</a>
                </span>
                <span class="description">
                    2019-11-08
                </span>
            </li>

            <li>
                <span class="title">
                    <a href="#">laravel-创建“控制器”和“模型”，使用模型方法获取数据库内容并输出--2019年11月1日</a>
                </span>
                <span class="description">
                    2019-11-08
                </span>
            </li>


            <div class="more" style="margin-bottom: 30px">
                更多内容
            </div>
        </ul>

    </article>

</main>

<!--页脚-->
<footer>
    <a href="" class="active">
        <span class="icon"></span>
        首页
    </a>

    <a href="">
        <span class="icon"></span>
        视频
    </a>

    <a href="">
        <span class="icon"></span>
        社区
    </a>

    <a href="">
        <span class="icon"></span>
        我的
    </a>
</footer>

</body>
</html>

运行实例 »

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

总结：

把图片宽度设为100%时，同时设置高度会让图片变形！

列表链接的标题不想换行显示的时候，高度要固定死，不固定标题太长的时候会自动换行！



1.png


2.png


    




Correction status：qualified

Teacher's comments：做的不错, 效果全出来了, 代码也还规范
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