登录  /  注册
首页 > 博客列表 > 弹性布局(Flex box) 仿PHP中文网手机站首页 - 大型CMS实战开发第九期
博主信息
博文 25
粉丝 0
评论 0
访问量 28965
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
弹性布局(Flex box) 仿PHP中文网手机站首页 - 大型CMS实战开发第九期
宿州市筋斗云信息科技-Vip
原创
738人浏览过

弹性布局(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


    




批改状态：合格

老师批语：做的不错, 效果全出来了, 代码也还规范
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录