仿php中文网移动端首页 - 前端开发环境配置与基础

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

<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>
    <style>
        body {
            min-width: 320px;
            max-width: 768px;
            margin: 0 auto;
            background: #edeff0;
            background-color: rgb(236, 236, 236);
            overflow-y: initial;
            position: relative;
            /*不要出现水平滚动条*/
            overflow-x: hidden;
            /*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/
            -webkit-tap-highlight-color: transparent;
            height: 2000px;
        }
        
        .top {
            position: fixed;
            top: 0;
            left: 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;
            border-radius: 50%;
        }
        
        .top img:first-of-type {
            border-radius: 50%;
            margin-left: 5px;
        }
        
        .top .logo {
            text-align: center;
            flex: 1;
        }
        
        .top .logo img {
            width: 94px;
            height: 44px;
            margin: 0;
        }
        
        .banner {
            display: flex;
            margin-top: 42px;
        }
        
        .banner img {
            width: 100%;
            height: 160px;
        }
        /*nav*/
        
        .nav {
            height: 170px;
            background-color: white;
            box-sizing: border-box;
        }
        
        .nav ul {
            margin: 0;
            padding: 8px;
        }
        
        .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-decoration: none;
            text-align: center;
            color: gray;
        }
        
        .nav ul {
            display: flex;
        }
        
        .nav ul li {
            flex: 1;
        }
        /* 最新课程 */
        
        h3 {
            margin: 0;
            padding: 15px 0 5px 5px;
            color: gray;
        }
        
        .courses {
            /* margin-bottom: 5px; */
            /* height: 416px; */
            color: gray;
            margin-bottom: 5px;
        }
        
        .courses ul {
            margin: 10px 0;
            padding: 0;
            list-style: none;
            display: flex;
        }
        
        .courses ul li {
            padding: 5px;
        }
        
        .courses ul li img {
            width: 100%;
            height: 90px;
            padding-top: 5px;
        }
        
        .courses .courses-box {
            background-color: white;
            padding: 10px;
            margin-top: 5px;
            height: 90px;
            display: flex;
            justify-content: flex-start;
        }
        
        .courses .courses-box img {
            width: 100%;
            height: 90px;
        }
        
        .courses .courses-box a {
            text-decoration: none;
            color: gray;
            flex: 0.45;
        }
        
        .courses .courses-box p {
            flex: 0.55;
            margin-left: 15px;
        }
        
        .courses .courses-box p span:first-of-type {
            font-size: 0.8rem;
            background-color: black;
            color: white;
            border-radius: 30%;
            padding: 0 2px;
        }
        
        .courses .courses-box p span:last-of-type {
            font-size: 0.7rem;
        }
        /* second */
        
        h4 {
            margin: 5px 0;
            padding: 0;
            color: gray;
        }
        
        .courses ul {
            background-color: white;
        }
        
        .courses .courses-list {
            flex: 0.45;
        }
        
        .courses .courses-list a,
        .courses .courses-pic a {
            text-decoration: none;
        }
        
        .courses .courses-list img {
            width: 100%;
            height: 90px;
        }
        .courses .courses-pic img {
            width: 100%;
        }
        
        .courses .courses-intro {
            flex: 0.55;
            margin: 0;
            padding: 0;
        }
        
        .courses .courses-intro .courses-intro-info {
            margin: 0;
            padding: 5px 0 0 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 350px;
        }
        
        .courses .courses-intro .level {
            font-size: 0.6rem;
            border-radius: 30%;
            background-color: black;
            text-align: center;
            color: white;
            padding: 0 5px;
        }
        
        .courses .courses-intro .count {
            font-size: 0.8rem;
            float: right;
            padding-right: 15px;
        }
        
        .courses .courses-pic {
            flex: 0.35;
        }
        
        .courses .courses-intro2 {
            flex: 0.65;
            margin: 0;
            padding: 0 5px;
        }
        
        .courses .courses-intro2 h4 {
            padding-top: 5px;
        }
        
        .courses .courses-intro2 .time {
            font-size: 0.8rem;
        }
        
        .more {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 35px;
            background-color: white;
            text-align: center;
        }
        
        .more a {
            text-decoration: none;
            line-height: 35px;
            color: gray;
        }
        
        .courses-blog .courses-blog-list {
            background-color: white;
            margin: 5px 0;
        }
        
        .courses-blog .courses-blog-list ul {
            margin: 0;
            padding: 0;
            height: 45px;
        }
        
        .courses-blog .courses-blog-list ul li {
            display: flex;
            margin: 0;
            padding: 0 5px;
        }
        
        .courses-blog .courses-blog-list ul li a {
            flex: 0.85;
            line-height: 45px;
            font-weight: bold;
            text-decoration: none;
            color: gray;
        }
        
        .courses-blog .courses-blog-list li span {
            flex: 0.15;
            line-height: 45px;
            font-size: 0.8rem;
            color: gray;
        }
        /* 底部信息 */
        
        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 57px;
            min-width: 320px;
            max-width: 768px;
            border-top: 1px solid #ccc;
            background-color: rgb(236, 236, 236);
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        
        .footer ul {
            display: flex;
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-align: center;
        }
        
        .footer ul li {
            flex: 1;
        }
        
        .footer ul li img {
            width: 20px;
            height: 20px;
            padding: 5px 0;
        }
        
        .footer ul li a {
            text-decoration: none;
            color: gray;
            padding-bottom: 5px;
        }
    </style>
</head>

<body>
    <div class="top">
        <img src="https://m.php.cn/static/images/user_avatar.jpg" alt="">
        <div class="logo"><img src="https://m.php.cn/static/images/logo.png" alt=""></div>
        <img src="https://m.php.cn/static/images/user_avatar.jpg" alt="">
    </div>
    <div class="banner">
        <img src="https://m.php.cn/static/images/ico/3.jpg" alt="">
    </div>
    <div class="nav">
        <ul>
            <li>
                <a href=""><img src="https://m.php.cn/static/images/ico/html.png" alt=""><br>HTML+CSS</a>
            </li>
            <li>
                <a href=""><img src="https://m.php.cn/static/images/ico/JavaScript.png" alt=""><br>JavaScript</a>
            </li>
            <li>
                <a href=""><img src="https://m.php.cn/static/images/ico/code.png" alt=""><br>服务端</a>
            </li>
            <li>
                <a href=""><img src="https://m.php.cn/static/images/ico/sql.png" alt=""><br>数据库</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href=""><img src="https://m.php.cn/static/images/ico/app.png" alt=""><br>移动端</a>
            </li>
            <li>
                <a href=""><img src="https://m.php.cn/static/images/ico/manual.png" alt=""><br>手册</a>
            </li>
            <li>
                <a href=""><img src="https://m.php.cn/static/images/ico/tool2.png" alt=""><br>工具</a>
            </li>
            <li>
                <a href=""><img src="https://m.php.cn/static/images/ico/live.png" alt=""><br>直播</a>
            </li>
        </ul>
    </div>
    <div class="courses">
        <h3>推荐课程</h3>
        <ul>
            <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/5d242759adb88970.jpg" alt=""></a>
            </li>
        </ul>
        <div class="courses-box">
            <a href=""><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></a>
            <p>
                <a href="">CI框架30分钟极速入门</a>
                <br>
                <span>中级</span><span>49900次播放</span>
            </p>
        </div>
        <div class="courses-box">
            <a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a>
            <p>
                <a href="">2018前端入门_HTML5</a>
                <br>
                <span>初级</span><span>211259次播放</span>
            </p>
        </div>
    </div>
    <div class="courses">
        <h3>最新更新</h3>
        <ul>
            <li class="courses-list">
                <a href=""><img src="https://img.php.cn/upload/course/000/000/020/5d521d6cbbeb7258.jpg" alt=""></a>
            </li>
            <div class="courses-intro">
                <h4>Laravel 5.8 中文文档手册</h4>
                <p class="courses-intro-info">《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16
                    缓存驱动规范等等。
                </p>
                <p>
                    <span class="level">中级</span><span class="count">7594次播放</span>
                </p>
            </div>
        </ul>
        <ul>
            <li class="courses-list">
                <a href=""><img src="https://img.php.cn/upload/course/000/000/014/5d2814b3a7a92573.jpg" alt=""></a>
            </li>
            <div class="courses-intro">
                <h4>JavaScript极速入门</h4>
                <p class="courses-intro-info">本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了，让你学习0压力，适合新手观看学习......</p>
                <p>
                    <span class="level">初级</span><span class="count">7196次播放</span>
                </p>
            </div>
        </ul>
        <ul>
            <li class="courses-list">
                <a href=""><img src="https://img.php.cn/upload/course/000/000/015/5d199b00c2b82390.jpg" alt=""></a>
            </li>
            <div class="courses-intro">
                <h4>第七期_直播体验课</h4>
                <p class="courses-intro-info">php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广大PHP开发爱好者，了解本期的课程，特安排了直播开放课，感兴趣的小伙伴不要错过哟！ 晚 20:00-22:00直播 ，报名qq：88526（猪哥）。七期线上班详情：http://www.php.cn/k.html</p>
                <p>
                    <span class="level">初级</span><span class="count">6713次播放</span>
                </p>
            </div>
        </ul>
    </div>
    <div class="courses">
        <h3>最新文章</h3>
        <ul>
            <div class="courses-intro2">
                <h4>PHP之十六个魔术方法详解（总结）</h4>
                <p>
                    <span class="time">发布时间：2019-07-29</span>
                </p>
            </div>
            <li class="courses-pic">
                <a href=""><img src="https://img.php.cn/upload/article/000/000/020/5d3e90052c589609.jpg" alt=""></a>
            </li>
        </ul>
        <ul>
            <div class="courses-intro2">
                <h4>PHP生成折线图和饼图等</h4>
                <p>
                    <span class="time">发布时间：2019-08-02</span>
                </p>
            </div>
            <li class="courses-pic">
                <a href=""><img src="https://img.php.cn/upload/article/000/000/020/5d43d29295b8b765.png" alt=""></a>
            </li>
        </ul>
        <ul>
            <div class="courses-intro2">
                <h4>PHP实现动态规划之***问题</h4>
                <p>
                    <span class="time">发布时间：2019-08-13</span>
                </p>
            </div>
            <li class="courses-pic">
                <a href=""><img src="https://img.php.cn/upload/article/000/000/020/5d52570469da8988.jpg" alt=""></a>
            </li>
        </ul>
        <div class="more"><a href="">更多内容</a></div>
    </div>

    <div class="courses-blog">
        <h3>最新博文</h3>
        <div class="courses-blog-list">
            <ul>
                <li><a href="">mysql查询时间戳和日期的转换</a><span>2019-09-09</span></li>
            </ul>
        </div>
        <div class="courses-blog-list">
            <ul>
                <li><a href="">小程序实现复制文本内容</a><span>2019-09-06</span></li>
            </ul>
        </div>
        <div class="courses-blog-list">
            <ul>
                <li><a href="">js获取url链接中的域名部分</a><span>2019-09-07</span></li>
            </ul>
        </div>
        <div class="courses-blog-list">
            <ul>
                <li><a href="">小程序实现头像图片裁剪</a><span>2019-09-03</span></li>
            </ul>
        </div>
        <div class="courses-blog-list">
            <ul>
                <li><a href="">《悦帮到家》小程序</a><span>2019-09-03</span></li>
            </ul>
        </div>
        <div class="more"><a href="">更多内容</a></div>
    </div>


    <div class="footer">
        <ul>
            <li>
                <a href="">
                    <img src="https://m.php.cn/static/images/zhuye.jpg" alt=><br><span>主页</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://m.php.cn/static/images/video.jpg" alt=""><br><span>视频</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://m.php.cn/static/images/luntan.jpg" alt=""><br><span>社区</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://m.php.cn/static/images/geren.jpg" alt=""><br><span>我的</span>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Correction status：qualified

Teacher's comments：这个仿站的关键部分和思路, 课堂上面都讲过了, 但是其它地方, 想要做出来, 也不容易的, 你写得OK