模仿php中文网移动端首页-2019年9月10日 - HTML+CSS

今天开始我们用前面学的各种布局技巧，模仿php中文网移动端的首页做一个网页出来。过程不容易，最终呈现的效果还是可以的，下面先上代码。

实例

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

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./static/css/style1.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>php中文网首页</title>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="left">
            <a href=""><img src="./static/images/ironman.png" alt=""></a>
        </div>
        <div class="logo">
            <a href=""><img src="./static/images/logo.png" alt=""></a>
        </div>
        <div class="right"><img src="./static/images/right.png" alt=""></div>
    </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>
    <div class="courseslist">
        <a href=""><img src="./static/images/tjkc3.jpg" alt=""></a>
        <p>
            <a href="">CI框架30分钟极速入门</a>
            <br>
            <span>中级</span><span>49877次播放</span>
        </p>
    </div>
    <div class="courseslist">
        <a href=""><img src="./static/images/tjkc4.jpg" alt=""></a>
        <p>
            <a href="">2018前端入门_HTML5</a>
            <br>
            <span>中级</span><span>210875次播放</span>
        </p>
    </div>
    <h3>最新更新</h3>
    <div class="courseslist2">
        <a href=""><img src="./static/images/tjkc5.jpg" alt=""></a>
        <p>
            <a href="">Laravel 5.8 中文文档手册</a>
            <br>
            <span>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/c...</span>
            <br>
            <span>中级</span><span>210875次播放</span>
        </p>
    </div>
    <div class="courseslist2">
        <a href=""><img src="./static/images/tjkc6.jpg" alt=""></a>
        <p>
            <a href="">JavaScript极速入门</a>
            <br>
            <span>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、</span>
            <br>
            <span>初级</span><span>210875次播放</span>
        </p>
    </div>
    <div class="courseslist2">
        <a href=""><img src="./static/images/tjkc7.jpg" alt=""></a>
        <p>
            <a href="">第七期_直播体验课</a>
            <br>
            <span>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~</span>
            <br>
            <span>初级</span><span>210875次播放</span>
        </p>
    </div>
    <div class="courseslist2">
        <a href=""><img src="./static/images/tjkc8.jpg" alt=""></a>
        <p>
            <a href="">CSS3 极速入门</a>
            <br>
            <span>html和css是组成WEB前端开发最核心的部分，所以结合之前的</span>
            <br>
            <span>初级</span><span>210875次播放</span>
        </p>
    </div>
    <div class="courseslist2">
        <a href=""><img src="./static/images/tjkc9.jpg" alt=""></a>
        <p>
            <a href="">HTML5 极速入门</a>
            <br>
            <span>在本套课程中，你将学习如何使用 HTML 来创建站点，完成静态网页布局</span>
            <br>
            <span>初级</span><span>210875次播放</span>
        </p>
    </div>
    <div class="courseslist2">
        <a href=""><img src="./static/images/tjkc10.jpg" alt=""></a>
        <p>
            <a href="">nodejs开发基础教程</a>
            <br>
            <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js对</span>
            <br>
            <span>初级</span><span>210875次播放</span>
        </p>
    </div>
    <h3>最新文章</h3>
    <div class="news">
        <p>
            <a href="">
                <span>PHP之十六个魔术方法详解（总结）</span>
                <br>
                <span>发布时间：2019-07-29</span>
            </a>

        </p>
        <a href=""><img src="./static/images/new1.jpg" alt=""></a>
    </div>
    <div class="news">
        <p>
            <a href="">
                <span>PHP生成折线图和饼图等</span>
                <br>
                <span>发布时间：2019-08-02</span>
            </a>

        </p>
        <a href=""><img src="./static/images/new2.png" alt=""></a>
    </div>
    <div class="news">
        <p>
            <a href="">
                <span>PHP实现动态规划之***问题</span>
                <br>
                <span>发布时间：2019-08-13</span>
            </a>

        </p>
        <a href=""><img src="./static/images/new3.jpg" alt=""></a>
    </div>
    <div class="news">
        <p>
            <a href="">
                <span>ThinkPHP6源码：从Http类的实例化看依赖注入是如何实现的</span>
                <br>
                <span>发布时间：2019-08-16</span>
            </a>

        </p>
        <a href=""><img src="./static/images/new4.jpg" alt=""></a>
    </div>
    <div class="news">
        <p>
            <a href="">
                <span>PHP7中php.ini、php-fpm和www.conf 配置</span>
                <br>
                <span>发布时间：2019-08-23</span>
            </a>

        </p>
        <a href=""><img src="./static/images/new5.png" alt=""></a>
    </div>
    <div class="more">
        <a href="">更多内容</a>
    </div>
    <h3>最新博文</h3>
    <div class="article">
        <a href="">
            <span>mysql查询时间戳和日期的转换</span><span>2019-09-07</span>
        </a>
    </div>
    <div class="article">
        <a href="">
            <span>小程序实现复制文本内容</span><span>2019-09-06</span>
        </a>
    </div>
    <div class="article">
        <a href="">
            <span>js获取url链接中的域名部分</span><span>2019-09-07</span>
        </a>
    </div>
    <div class="article">
        <a href="">
            <span>小程序实现头像图片裁剪</span><span>2019-09-03</span>
        </a>
    </div>
    <div class="article">
        <a href="">
            <span>《悦帮到家》小程序</span><span>2019-09-03</span>
        </a>
    </div>
    <div class="more">
        <a href="">更多内容</a>
    </div>
    <h3>最新问答</h3>
    <div class="article">
        <a href="">
            <span>语法错误，意外'：'</span><span>2019-09-12</span>
        </a>
    </div>
    <div class="article">
        <a href="">
            <span>栏目链接不对吧？？？</span><span>2019-09-12</span>
        </a>
    </div>
    <div class="article">
        <a href="">
            <span>用的编辑软件是啥</span><span>2019-09-12</span>
        </a>
    </div>
    <div class="article">
        <a href="">
            <span>没有弹框</span><span>2019-09-12</span>
        </a>
    </div>
    <div class="article">
        <a href="">
            <span>管理员账户密码都不修改</span><span>2019-09-12</span>
        </a>
    </div>
    <div class="more-last">
        <a href="">更多内容</a>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <ul>
            <li>
                <a href=""><img src="./static/images/zhuye.png" alt=""><br><span>首页</span></a>
            </li>
            <li>
                <a href=""><img src="./static/images/video.png" alt=""><br><span>视频</span></a>
            </li>
            <li>
                <a href=""><img src="./static/images/luntan.png" alt=""><br><span>论坛</span></a>
            </li>
            <li>
                <a href=""><img src="./static/images/geren.png" alt=""><br><span>我的</span></a>
            </li>
        </ul>
    </div>
</body>

</html>

运行实例 »

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

实例

body {
    font-size: 14px;
    min-width: 320px;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    background-color: #edeff0;
    overflow-y: initial;
    position: relative;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

.header {
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    min-width: 320px;
    max-width: 720px;
    background-color: #444;
    transform: translateX(-50%);
}

.header {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header .left img {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    padding-left: 5px;
}

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

.header .logo img {
    width: 94px;
    height: 45px;
}

.header .right img {
    width: 32px;
    height: 32px;
    padding-right: 5px;
}

.banner img {
    width: 100%;
    margin-top: 55px;
}

.nav {
    height: 170px;
    background-color: white;
    box-sizing: border-box;
    margin-top: -4px;
}

.nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    text-align: center;
    justify-content: space-around;
    padding: 6px;
}

.nav ul li {
    height: 75px;
    flex: 1;
}

.nav ul li a {
    text-decoration: none;
    color: #888;
    font-weight: 555;
}

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


/* 课程区 */

h3 {
    color: grey;
}

.courses ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.courses ul li {
    list-style-type: none;
    flex: 1;
}

.courses ul li:first-child {
    margin-right: 10px;
}

.courses ul li img {
    width: 100%;
}

.courseslist {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    height: 90px;
    display: flex;
}

.courseslist>a {
    flex: .4;
}

.courseslist a img {
    width: 100%;
    height: 90px;
}

.courseslist>p {
    flex: 0.6;
    margin-left: 15px;
    color: grey;
}

.courseslist p a {
    text-decoration: none;
    color: grey;
}

.courseslist p span:first-of-type {
    font-size: 0.8rem;
    background-color: black;
    color: white;
    padding: 0 2px;
    border-radius: 30%;
}

.courseslist p span:last-of-type {
    font-size: 0.8rem;
}

.courseslist p span {
    color: grey;
    font-size: 60%;
}

.courseslist2 {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    height: 90px;
    display: flex;
}

.courseslist2>a {
    flex: .4;
}

.courseslist2 a img {
    width: 100%;
    height: 90px;
}

.courseslist2>p {
    flex: 0.6;
    margin-left: 15px;
    color: grey;
    line-height: 23px;
}

.courseslist2 p a {
    text-decoration: none;
    color: grey;
}

.courseslist2 p span:nth-of-type(2) {
    font-size: 0.8rem;
    background-color: black;
    color: white;
    padding: 0 2px;
    border-radius: 30%;
}

.courseslist2 p span:last-of-type {
    font-size: 0.8rem;
    position: absolute;
    right: 7%;
}

.courseslist2 p span {
    color: grey;
    font-size: 60%;
}

.news {
    background-color: white;
    padding: 10px;
    margin-top: 10px;
    height: 90px;
    display: flex;
}

.news p {
    flex: 0.7;
}

.news a {
    flex: .3;
    text-decoration: none;
    color: grey;
}

.news a span:first-of-type {
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.news a img {
    width: 100%;
    height: 90px;
}

.more {
    background-color: white;
    padding: 10px;
    margin: 10px 0;
}

.article {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
}

.article a {
    display: flex;
    text-decoration: none;
    color: grey;
    justify-content: space-between;
}

.article a span:first-of-type {
    font-size: 14px;
    font-weight: bold;
}

.more a {
    display: block;
    text-decoration: none;
    color: grey;
    text-align: center;
}

.more-last {
    background-color: white;
    padding: 10px;
    margin: 10px 0;
    margin-bottom: 90px;
}

.more-last a {
    display: block;
    text-decoration: none;
    color: grey;
    text-align: center;
}

.footer {
    border-top: 1px solid #999;
    padding: 10px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    min-width: 320px;
    max-width: 720px;
    background-color: #eee;
}

.footer ul {
    padding: 0;
    margin: 0;
    display: flex;
}

.footer ul li {
    list-style-type: none;
    text-align: center;
    flex: 1;
}

.footer ul li a {
    display: block;
    text-decoration: none;
    color: #888;
}

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

运行实例 »

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

导航栏以前我们是用左浮动去做的，现在会了flex布局之后，要做一个导航栏非常简单，我们只需要将ul变成一个flex盒子，里面的子元素就会自动横向排列了。因为头部和底部是一直固定在窗口上面和下面的，所以是用fixed固定定位去做，把头部底部固定在窗口。

banner图因为还没学习js，所以做不到轮播的效果，就放了一张图片上去。但是因为头部是用固定定位，已经脱离了文档流，所以banner图会有一部分会被头部覆盖掉，我是给banner图加上一个margin-top，把他顶下来。

导航栏也是用ul标签来做的，这里有个小技巧，因为导航栏有两行，我们就用两个ul，这样我们不用考虑两行的问题，只要解决掉一行就可以了。也是用flex自动填充空间的特性，很简单就能够把导航栏做出来了。

下面的课程列表样式挺像的有很多样式是可以复用的，通过flex，浮动或者是绝对定位都可以把效果实现出来。不过目前我写的代码自适应的地方很少，有很多地方的宽度啊，高度啊是用px写死了，如果设备的宽高发生变化，现在看的很正常的画面有可能会变形。这个是之后要去思考和提升的地方。我观察php中文网，是根据宽度自适应显示多少字进去，但是我这边字体只能是自己去删减，但是如果屏幕宽度再缩小的话，还是会变形，不知道这个是后端通过什么去实现的。

通过这个仿前端的实战训练，我对电脑端和移动端的页面设计基本上都能开发了，之后就是不断去仿页面，去熟练自己的代码。

Correction status：qualified

Teacher's comments：学编程的正确方法就是: 先完成, 再求优.. 无论如何功能先实现, 哪怕你的办法很low,也没关系 , 完了再慢慢优化, 就像是做饭炒菜是一样的, 先做好做熟, 否则, 摆放的再漂亮, 生的不能吃有何用呢?对不对