Flex布局学习实践--php中文网首页实现--2019年09月10日20时00分 - 前端

利用 flex布局对 php中文网移动端进行***完善。以下是主要代码。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/init.css">
    <link rel="stylesheet" href="static/css/style.css">
    <title>php中文网手机端-首页</title>
</head>

<body>
    <!--布局原则: 宽宽自适应, 高度是固定-->
    <!--固定定位: 顶部-->
    <div class="top">
        <img src="static/images/user-pic.jpeg" alt="">
        <div class="logo">
            <img src="static/images/logo.png" alt="">
        </div>
        <img src="static/images/user-nav.jpg" alt="">
    </div>

    <!--banner轮播图,这里用图片暂时代替-->
    <div class="banner">
        <img src="static/images/banner.jpg" alt="">
    </div>

    <!--导航区-->
    <div class="nav">
        <ul>
            <li><a href=""><img src="static/images/html.png" alt=""><br>HTML/CSS</a></li>
            <li><a href=""><img src="static/images/JavaScript.png" alt=""><br>JavaScript</a></li>
            <li><a href=""><img src="static/images/code.png" alt=""><br>服务端</a></li>
            <li><a href=""><img src="static/images/sql.png" alt=""><br>数据库</a></li>
        </ul>
        <ul>
            <li><a href=""><img src="static/images/app.png" alt=""><br>移动端</a></li>
            <li><a href=""><img src="static/images/manual.png" alt=""><br>手册</a></li>
            <li><a href=""><img src="static/images/tool2.png" alt=""><br>工具</a></li>
            <li><a href=""><img src="static/images/live.png" alt=""><br>直播</a></li>
        </ul>
    </div>

    <!--课程区-->
    <h3>推荐课程</h3>
    <div class="courses">
        <ul>
            <li>
                <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
            </li>
        </ul>

        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">CI框架30分钟极速入门</a>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
            <p>
                <a href="">2018前端入门_HTML5</a>
                <br>
                <span>初级</span><span>210066次播放</span>
            </p>
        </div>
    </div>

    <!--最新更新-->
    <h3>最新更新</h3>
    <ul class="last-list">
        <li>
            <a href=""><img src="static/images/last01.jpg" alt=""></a>
            <div class="right-part">
                <a href="">Vue.js急速入门</a>
                <p>
                    欢迎朋友们加入Vue.js基础学习的行列，Vue是一套用于构建用户界面的
                </p>
                <p class="sub-info">
                    <span>中级</span><span>49748次播放</span>
                </p>
            </div>
        </li>
        <li>
            <a href=""><img src="static/images/last02.jpg" alt=""></a>
            <div class="right-part">
                <a href="">Laravel 5.8 中文文档手册</a>
                <p>
                    《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58
                </p>
                <p class="sub-info">
                    <span>中级</span><span>49748次播放</span>
                </p>
            </div>
        </li>
        <li>
            <a href=""><img src="static/images/last03.jpg" alt=""></a>
            <div class="right-part">
                <a href="">JavaScript极速入门</a>
                <p>
                    本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编
                </p>
                <p class="sub-info">
                    <span>中级</span><span>49748次播放</span>
                </p>
            </div>
        </li>
        <li>
            <a href=""><img src="static/images/last04.jpg" alt=""></a>
            <div class="right-part">
                <a href="">第七期_直播体验课</a>
                <p>
                    php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广
                </p>
                <p class="sub-info">
                    <span>中级</span><span>49748次播放</span>
                </p>
            </div>
        </li>
    </ul>

    <!-- 最新文章 -->
    <h3>最新文章</h3>
    <ul class="article-list">
        <li>
            <a href="javascript:;">
                <div>
                    <p>PHP脚本主要用于那些领域</p>
                    <span>发布时间：2019-09-27</span>
                </div>
                <img src="./static/images/article1.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <div>
                    <p>PHP检查数组下标是否存在</p>
                    <span>发布时间：2019-09-27</span>
                </div>
                <img src="./static/images/article2.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <div>
                    <p>php检测字符串是否包含字符串</p>
                    <span>发布时间：2019-09-27</span>
                </div>
                <img src="./static/images/article3.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <div>
                    <p>php检测变量是否存在</p>
                    <span>发布时间：2019-09-27</span>
                </div>
                <img src="./static/images/article2.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <div>
                    <p>php检测网站是否正常打开</p>
                    <span>发布时间：2019-09-27</span>
                </div>
                <img src="./static/images/article1.jpg" alt="">
            </a>
        </li>
    </ul>
    <a href="javascript:;" class="more">更多内容</a>

    <!-- 最新博文 -->
    <h3>最新博文</h3>
    <ul class="blog-list">
        <li>
            <a href="javascript:;">
                <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p>
                <span>2019-07-27</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p>
                <span>2019-07-27</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p>
                <span>2019-07-27</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p>
                <span>2019-07-27</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p>
                <span>2019-07-27</span>
            </a>
        </li>
    </ul>

    <!-- 最新问答 -->
    <h3>最新问答</h3>
    <ul class="blog-list">
        <li>
            <a href="javascript:;">
                <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p>
                <span>2019-07-27</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p>
                <span>2019-07-27</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p>
                <span>2019-07-27</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p>
                <span>2019-07-27</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p>
                <span>2019-07-27</span>
            </a>
        </li>
    </ul>
    <!--底部-->
    <div class="footer">
        <ul>
            <li><a href=""><img src="static/font-icon/zhuye.png" alt=""><br><span>主页</span></a></li>
            <li><a href=""><img src="static/font-icon/video.png" alt=""><br><span>视频</span></a></li>
            <li><a href=""><img src="static/font-icon/luntan.png" alt=""><br><span>社区</span></a></li>
            <li><a href=""><img src="static/font-icon/geren.png" alt=""><br><span>我的</span></a></li>
        </ul>
    </div>
</body>

</html>

运行实例 »

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

实例

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    color: #888;
}

h3 {
    margin: 18px 0 8px;
}
.top {
    position: fixed;
    top: 0;

    width: 100%;
    height: 42px;
    background-color: #444444;

    min-width: 320px;
    max-width: 768px;

    left: 50%;

    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.top {
    display: flex;
}

.top img:first-of-type,
.top img:last-of-type {
    width: 25px;
    height: 25px;
    margin-top: 8px;
}

.top img:first-of-type {
    border-radius: 50%;
    margin-left: 5px;
}

.top .logo {
    text-align: center;
    flex: 1;
}

.top .logo img {
    width: 94px;
    height: 42px;
    margin: 0;
}

/*轮播图*/
.banner {
    display: flex;
    margin-top: 42px;
}

.banner img {
    width: 100%;
    height: 150px;
}

/*导航区*/
.nav {
    height: 170px;
    background-color: white;
    box-sizing: border-box;
}

.nav ul {
    margin: 0;
    padding: 6px;
}

.nav ul li {
    list-style-type: none;
    text-align: center;
    height: 75px;
}

.nav ul li img {
    width: 45px;
    height: 45px;
}

.nav ul li a {
    text-align: center;
    color: gray;
    text-decoration: none;
}

.nav ul {
    display: flex;
}

.nav ul li {
    flex: 1;
}

/*推荐课程区*/
h3 {
    color: gray;
}

.courses {
    color: gray;
}

.courses ul {
    margin: 0;
    padding: 0;

    list-style: none;

    /*flex布局*/
    display: flex;
}

.courses ul li {
    padding: 5px;
}

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

.courses div {
    background-color: white;
    padding: 10px;

    margin-top: 10px;
    height: 90px;

    /*flex布局*/
    display: flex;
    justify-content: flex-start;
}

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

.courses div a {
    text-decoration: none;
    color: gray;
    flex: 0.45;
}

.courses div p {
    flex: .55;
    margin-left: 15px;
}

.courses div p span:first-of-type {
    margin: 0 5px 0 0;
    font-size: 0.8rem;
    background-color: #595757;
    color: white;
    border-radius: 30%;
    padding: 0 2px;
}

.courses div p span:last-of-type {
    font-size: 0.7rem;
}

.last-list {
    margin: 0;
    padding: 0;
}

.last-list li {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    height: 90px;
    display: flex;
    justify-content: flex-start;
}

.last-list li>a {
    text-decoration: none;
    color: gray;
    flex: 0.45;
}
.last-list li>a img {
    width: 100%;
    height: 90px;
}

.last-list .right-part {
    flex: .55;
    margin-left: 15px;
    color: #888;
    overflow: hidden;
}

.last-list .right-part a{
    color: #888;
}
.last-list .right-part>p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
    margin: 16px 0;
}

.last-list .right-part .sub-info {
    display: flex;
    justify-content: space-between;
}

.last-list .right-part .sub-info span:first-of-type {
    margin: 0 5px 0 0;
    font-size: 0.8rem;
    background-color: #595757;
    color: white;
    border-radius: 30%;
    padding: 0 2px;
}

/* 最新文章 */
.article-list li {
    margin-bottom: 10px;
}

.article-list li>a {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 10px 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}

.article-list li>a>div {
    flex: 0.6;
    height: 65px;
}    
.article-list li>a>div p {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.article-list li>a>div span {
    font-size: 12px;

}
.article-list li>a>img {
    flex: 0.4;
    height: 65px;
}

.more {
    display: block;
    width: 100%;
    margin: 0 auto;
    line-height: 10px;
    text-align: center;
    background: #fff;
    padding: 10px 0;
    font-size: 13px;
}

.blog-list>li {
    margin-bottom: 10px;
}
.blog-list>li>a {
    border-bottom: 1px solid #eee;
    padding: 10px 10px 14px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    background: #fff;
    display: flex;
    justify-content: space-between;
}
.blog-list>li>a>p {
    font-weight: bold;
    font-size: 13px;
}

.blog-list>li>a>span {
    font-size: 12px;
}
/*底部样式*/
body {
    height: 2000px;
}

.footer {
    position: fixed;
    bottom: 0;

    width: 100%;
    height: 42px;

    min-width: 320px;
    max-width: 768px;

    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 5px 0;
    background-color: #fff;
}

.footer ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

.footer ul li img {
    width: 20px;
    height: 20px;
}

.footer ul li a {
    color: gray;
    text-decoration: none;
}

.footer ul li {
    flex: 1;
}

运行实例 »

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

Correction status：qualified

Teacher's comments：做了看上去还不错, 有自己的想法, 做了些改动