弹性盒子模仿PHP中文网手机端首页-2019年9月10日

先上CSS代码 init.css

/* 清除标签一些默认样式 */

body {
    background-color: #edeff0;
    padding: 0;
    min-width: 320px;
    max-width: 768px;
    margin: 0 auto;
    overflow-y: initial;
    overflow-x: hidden;
}

a {
    color: #000;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
    box-sizing: border-box;
}

CSS代码 style1.css

        .top {
            background-color: #333;
            min-width: 328px;
            max-width: 768px;
            width: 100%;
            height: 42px;
            position: fixed;
            top: 0;
            left: 50%;
            display: flex;
            transform: translateX(-50%);
        }
        
        .top :nth-child(1) {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin: auto 5px;
            border: 1px solid #ddd
        }
        
        .top .logo {
            flex: 1;
            text-align: center;
        }
        
        .top .logo img {
            width: 94px;
            height: 42px;
            border: 0;
        }
        
        .top :nth-child(3) {
            width: 26px;
            height: 23px;
            margin: auto 8px;
        }
        
        .banner {
            display: flex;
            padding: 0;
            margin-top: 42px;
        }
        
        .banner img {
            width: 100%;
            height: 160px;
        }
        
        .nav {
            background-color: #fff;
            width: 100%;
            height: 170px;
        }
        
        .nav ul {
            display: flex;
            padding-top: 7px;
        }
        
        .nav ul li {
            text-align: center;
            flex: 1;
        }
        
        .nav ul li a {
            color: rgb(116, 114, 114);
            font-weight: bold;
        }
        
        .nav ul li a img {
            width: 50px;
            height: 50px;
        }
        
        h3 {
            color: rgb(116, 114, 114);
            padding: 0;
            margin-bottom: 10px;
        }
        
        .courses ul {
            display: flex;
            width: 100%;
            height: 95px;
            justify-content: space-around;
        }
        
        .courses ul li {
            flex: 1;
            margin: 5px;
        }
        
        .courses ul img {
            width: 100%;
            height: 95px;
        }
        
        .courses div {
            display: flex;
            box-sizing: border-box;
            margin-top: 20px;
            width: 100%;
            height: 99px;
            background: #fff;
            padding: 10px;
        }
        
        .courses div a img {
            width: 100%;
            height: 80px;
        }
        
        .courses div a {
            flex: 0.45;
        }
        
        .courses div p {
            flex: 0.55;
            margin: 0;
            margin-left: 15px;
        }
        
        .courses div p a {
            color: rgb(116, 114, 114);
            font-size: 1.1em
        }
        
        .courses div p span {
            line-height: 30px;
        }
        
        .courses div p span:nth-of-type(1) {
            color: #fff;
            background: #595757;
            border-radius: 8px;
            font-size: 10px;
            padding: 2px;
            text-align: center;
        }
        
        .courses div p span:nth-of-type(2) {
            color: #888;
            font-size: 8px;
        }
        
        .c2 {
            font-style: normal;
            font-size: 5px;
            font-weight: lighter;
            width: 100%;
            height: 30px;
            line-height: 30px;
            color: #888;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        
        .c4 {
            margin-left: 70%;
        }
        
        .bottom {
            background-color: #eee;
            min-width: 328px;
            max-width: 768px;
            width: 100%;
            height: 50px;
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            border-top: 1px solid #bbb;
        }
        
        .bottom ul {
            display: flex;
        }
        
        .bottom ul li {
            flex: 1;
            text-align: center;
            line-height: 15px;
            padding-top: 8px;
        }
        
        .bottom ul li a {
            color: #333;
            font-size: 11px;
        }
        
        .bottom ul li img {
            width: 20px;
            height: 20px;
        }
        
        .courses2 ul {
            width: 100%;
        }
        
        .courses2 ul li {
            display: flex;
            width: 100%;
            height: 85px;
            background: #fff;
            margin-bottom: 10px;
        }
        
        .courses2 ul li p {
            flex: 0.72;
            margin-top: 0;
            padding: 10px;
        }
        
        .courses2 ul li img {
            margin: auto 10px;
            flex: 0.28;
            height: 65px;
        }
        
        .courses2 ul li p a {
            color: rgb(116, 114, 114);
            font-size: 15px;
        }
        
        .courses2 ul li p samp {
            color: rgb(116, 114, 114);
            line-height: 50px;
            font-size: 10px;
        }
        
        .courses2end,
        .courses3end {
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background: #fff;
            color: rgb(116, 114, 114);
            font-size: 15px;
        }
        
        .courses3 ul li {
            width: 100%;
            height: 48px;
            background: #fff;
            line-height: 48px;
            margin-bottom: 8px;
            display: flex;
        }
        
        .courses3 ul li a {
            color: rgb(116, 114, 114);
            font-size: 15px;
            padding-left: 8px;
            flex: 0.9;
        }
        
        .courses3 ul li samp {
            color: rgb(116, 114, 114);
            font-size: 10px;
            flex: 0.1;
        }
        
        .end {
            margin: 60px;
        }

html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/init.css">
    <link rel="stylesheet" href="css/style1.css">
</head>

<body>
    <div>
        <img src="images/us.jpg">
        <div>
            <img src="images/logo.png">
        </div>
        <img src="images/user-nav.jpg">
    </div>
    <!-- 轮播图 -->
    <div>
        <img src="images/banner.jpg">
    </div>
    <!-- 导航 -->
    <div>
        <ul>
            <li>
                <a href=""><img src="images/html.png"><br><span>HTML/CSS</span></a>
            </li>
            <li>
                <a href=""><img src="images/JavaScript.png"><br><span>JavaScript</span></a>
            </li>
            <li>
                <a href=""><img src="images/code.png"><br><span>服务端</span></a>
            </li>
            <li>
                <a href=""><img src="images/sql.png"><br><span>数据库</span></a>
            </li>
        </ul>
        <ul>
            <li>
                <a href=""><img src="images/app.png"><br><span>移动端</span></a>
            </li>
            <li>
                <a href=""><img src="images/manual.png"><br><span>手册</span></a>
            </li>
            <li>
                <a href=""><img src="images/tool2.png"><br><span>工具</span></a>
            </li>
            <li>
                <a href=""><img src="images/live.png"><br><span>直播</span></a>
            </li>
        </ul>
    </div>
    <h3>课程推荐</h3>
    <div>
        <ul>
            <li>
                <a href=""><img src="images/tjkc1.jpg"></a>
            </li>
            <li>
                <a href=""><img src="images/tjkc1.jpg"></a>
            </li>
        </ul>
        <div>
            <a href=""><img src="images/tjkc3.jpg""></a>
            <p>
                <a href="">CI框架30分钟极速入门</a><br>
                <span>中级</span><span>49792次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="images/tjkc4.jpg""></a>
            <p>
                <a href="">2018前端入门_HTML5</a><br>
                <span>初级</span><span>210355次播放</span>
            </p>
        </div>
        <h3>最新更新</h3>
        <div>
            <a href=""><img src="images/1.jpg""></a>
            <p>
                <a href="">Laravel 5.8 中文文档手册</a><br>
                <em>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheat</em><br>
                <span>中级</span><span>49792次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="images/2.jpg""></a>
            <p>
                <a href="">JavaScript极速入门</a><br>
                <em>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编</em><br>
                <span>初级</span><span>49792次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="images/3.jpg""></a>
            <p>
                <a href="">第七期_直播体验课</a><br>
                <em>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广</em><br>
                <span>初级</span><span>49792次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="images/4.jpg""></a>
            <p>
                <a href="">CSS3 极速入门</a><br>
                <em>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程</em><br>
                <span>初级</span><span>49792次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="images/5.jpg""></a>
            <p>
                <a href="">HTML5 极速入门</a><br>
                <em>在本套课程中，你将学习如何使用 HTML 来创建站点，完成静态网页布</em><br>
                <span>初级</span><span>49792次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="images/6.jpg""></a>
            <p>
                <a href="">nodejs开发基础教程</a><br>
                <em>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。</em><br>
                <span>初级</span><span>49792次播放</span>
            </p>
        </div>
    </div>
    <h3>最新文章</h3>
    <div>
        <ul>
            <li>
                <p><a href="">HTML表单元素</a><br><samp>发布时间:2019-09-11</samp></p> <img src="images/11.jpg"></li>
            <li>
                <p><a href="">细说Spring——AOP详解（AOP概览）</a><br><samp>发布时间:2019-09-11</samp></p> <img src="images/12.jpg"></li>
            <li>
                <p><a href="">php值得学吗</a><br><samp>发布时间:2019-09-11</samp></p> <img src="images/13.jpg"></li>
            <li>
                <p><a href="">php中if和switch的区别</a><br><samp>发布时间:2019-09-11</samp></p> <img src="images/14.jpg"></li>
            <li>
                <p><a href="">php中strtotime什么意思</a><br><samp>发布时间:2019-09-11</samp></p> <img src="images/15.jpg"></li>
        </ul>
        <div>更多内容</div>
    </div>
    <h3>最新博文</h3>
    <div>
        <ul>
            <li><a href="">mysql查询时间戳和日期的转换</a><samp>2019-09-07</samp></li>
            <li><a href="">mysql查询时间戳和日期的转换</a><samp>2019-09-07</samp></li>
            <li><a href="">mysql查询时间戳和日期的转换</a><samp>2019-09-07</samp></li>
            <li><a href="">mysql查询时间戳和日期的转换</a><samp>2019-09-07</samp></li>
            <li><a href="">mysql查询时间戳和日期的转换</a><samp>2019-09-07</samp></li>
            <li><a href="">mysql查询时间戳和日期的转换</a><samp>2019-09-07</samp></li>
        </ul>
        <div>更多内容</div>
    </div>
    <h3>最新问答</h3>
    <div>
        <ul>
            <li><a href="">修改改成save</a><samp>2019-09-07</samp></li>
            <li><a href="">修改改成save</a><samp>2019-09-07</samp></li>
            <li><a href="">修改改成save</a><samp>2019-09-07</samp></li>
        </ul>
        <div>更多内容</div>
    </div>
    <div></div>
    <div>
        <ul>
            <li>
                <a href=""><img src="font-icon/zhuye.png"><br>首页</a>
            </li>
            <li>
                <a href=""><img src="font-icon/video.png"><br>视频</a>
            </li>
            <li>
                <a href=""><img src="font-icon/luntan.png"><br>社区</a>
            </li>
            <li>
                <a href=""><img src="font-icon/geren.png"><br>我的</a>
            </li>
        </ul>
    </div>

</body>


</html>

练手实战相关图片

没有在课堂源码上修改，打开php中文网手机版 ，看着尝试从头做，可能还有些瑕疵，但是经过这次实战整体对弹性盒子和布局有加深了了解，准备在中秋假期，模仿一些其他站点作为二次实战练习，谢谢老师！