仿PHP中文网移动端案例

仿PHP中文网移动端案例

演示地址:http://www.fantianlong.com/php11/0410/m.php.cn/

1.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/icon-font.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            width: 100vw;
            height: 100vh;
            font-size: 14px;
        }
        body {
            background-color: rgb(238, 239, 240);
        }
        .container {
            display: flex;
            flex-flow: column nowrap;
        }
        a {
            text-decoration: none;
        }
        header {
            width: 100vw;
            height: 42px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            position: fixed;
            background-color: rgb(47, 53, 60);
        }
        .avatar img {
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 50%;
        }
        .logo img {
            height: 3.2rem;
        }
        .banner img {
            margin-top: 40px;
            width: 100vw;
        }
        nav {
            height: 210px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            padding: 10px 0;
            box-sizing: border-box;
            font-size: 1.2rem;
        }
        nav a {
            color: #888;
            font-weight: bold;
        }
        nav>div {
            width: 25%;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            margin-bottom: 30px;
        }
        nav img {
            width: 4rem;
            height: 4rem;
            margin-bottom: 5px;
        }
        .recommend-course {
            display: flex;
            flex-flow: column nowrap;
        }
        h2 {
            margin-bottom: 20px;
        }
        .recommend-course>.top {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
        }
        .recommend-course>.top img {
            width: 48vw;
            height: 90px;
        }
        .bottom>.item {
            display: flex;
            margin: 10px;
            padding: 10px;
            background-color: #ffffff;
        }
        .item img {
            width: 48vw;
            height: 80px;
            margin-right: 10px;
        }
        .item p {
            color: #888;
        }
        .item p:nth-of-type(1) {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }
        .course-info {
            display: flex;
            flex-flow: column nowrap;
        }
        .course-info>p:nth-of-type(1) {
            width: 220px;
        }
        .course-info>p:nth-of-type(2) {
            width: 250px;
        }
        .course-info span {
            width: 2rem;
            height: 2rem;
            border-radius: 13px;
            padding: 5px;
            box-sizing: border-box;
            background-color: rgb(89, 87, 87);
            color: #ffffff;
        }
        footer {
            display: flex;
            flex-flow: row nowrap;
            text-align: center;
            height: 40px;
            border-top: 1px solid #cccccc;
            background-color: rgb(236, 236, 236);
        }
        footer>p {
            display: flex;
            flex-flow: column nowrap;
            width: 25vw;
        }
        footer>p>a {
            color: #888888;
        }
    </style>
    <title>php中文网-教程_手册_视频-免费php在线学习平台</title>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header>
            <div class="avatar">
                <a href=""><img src="images/avatar.jpg" alt="avatar"></a>
            </div>
            <div class="logo">
                <a href=""><img src="images/logo.png" alt="logo"></a>
            </div>
            <div class="menu">
                <a href=""><i class="iconfont" style="color: #ccc;">&#xe602;</i></a>
            </div>
        </header>
        <!-- banner -->
        <div class="banner">
            <a href=""><img src="images/banner.png" alt="banner"></a>
        </div>
        <!-- 导航 -->
        <nav>
            <div>
                <img src="images/html.png" alt="html/css">
                <a href="">HTML/CSS</a>
            </div>
            <div>
                <img src="images/javascript.png" alt="JavaScript">
                <a href="">JavaScript</a>
            </div>
            <div>
                <img src="images/server.png" alt="server">
                <a href="">服务端</a>
            </div>
            <div>
                <img src="images/sql.png" alt="sql">
                <a href="">数据库</a>
            </div>
            <div>
                <img src="images/app.png" alt="app">
                <a href="">移动端</a>
            </div>
            <div>
                <img src="images/manual.png" alt="manual">
                <a href="">手册</a>
            </div>
            <div>
                <img src="images/tool.png" alt="tool">
                <a href="">工具</a>
            </div>
            <div>
                <img src="images/live.png" alt="live">
                <a href="">直播</a>
            </div>
        </nav>
        <!-- 推荐课程 -->
        <div class="recommend-course">
            <h2>推荐课程</h2>
            <div class="top">
                <a href=""><img src="images/tlbb.jpg" alt="tlbb"></a>
                <a href=""><img src="images/tlbb.jpg" alt="tlbb"></a>
            </div>
            <div class="bottom">
                <div class="item">
                    <a href=""><img src="images/ci.jpg" alt="ci"></a>
                    <div class="course-info">
                        <p>CI框架30分钟极速入门</p>
                        <p><span>中级</span>61289次播放</p>
                    </div>
                </div>
                <div class="item">
                    <a href=""><img src="images/ci.jpg" alt="ci"></a>
                    <div class="course-info">
                        <p>CI框架30分钟极速入门</p>
                        <p><span>中级</span>61289次播放</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 最近更新 -->
        <div class="recommend-course">
            <h2>最近更新</h2>
            <div class="bottom">
                <div class="item">
                    <a href=""><img src="images/ci.jpg" alt="ci"></a>
                    <div class="course-info">
                        <p>Thinkphp6.0正式版视频教程</p>
                        <p>Thinkphp6.0从2019年10月24日正式发</p>
                        <p><span>中级</span>61289次播放</p>
                    </div>
                </div>
                <div class="item">
                    <a href=""><img src="images/ci.jpg" alt="ci"></a>
                    <div class="course-info">
                        <p>CI框架30分钟极速入门</p>
                        <p><span>中级</span>61289次播放</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <footer>
            <p>
                <a href="">首页</a>
                <i class="iconfont">&#xe601;</i>
            </p>
            <p>
                <a href="">视频</a>
                <i class="iconfont">&#xe63d;</i>
            </p>
            <p>
                <a href="">社区</a>
                <i class="iconfont">&#xe60e;</i>
            </p>
            <p>
                <a href="">我的</a>
                <i class="iconfont">&#xe621;</i>
            </p>
        </footer>
    </div>
</body>
</html>

2.效果图

3.总结

flex布局还不是很熟练,之前一直搞PC端固定布局的
还需加强练习,在学习后端的时候也不能放松前端布局的练习
基础知识虽然掌握,但是实战还是有些问题

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：你的页面布局问题很大, 比例不对, 并且少了不少内容, 写作业不要偷懒,如果这是你们公司UI给你的设计图, 你没有完全还原的话, 是会被开除了, 除非你是老板, 下次细心点, 作业没有催你也没有限定时间, 不着急

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

HTML基本结构、属性和一些基本编程必备概念

2020-04-03 14:43:58