仿php中文网移动端首页,未完成的部分:最新更新, 最新文章完成-9月10日 - HTML前端学习

实例

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/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">
    <link rel="stylesheet" href="C:\phpstudy_pro\WWW\html\code\phpcn\static\css\init.css">
    <link rel="stylesheet" href="C:\phpstudy_pro\WWW\html\code\phpcn\static\css\style.css">
    <title>仿PHP中文网</title>
</head>

<body>
<!--布局原因：宽度自适应，高度是固定-->
<!--固定定位：顶部-->
<div class="top">
    <img src="phpcn\img\5d668d03da14c294.jpg" alt="">
    <div class="logo">
        <img src="phpcn\img\logo.png" alt="">
    </div>
    <img src="phpcn\img\20190914220420.png" alt="">
</div>
<!--banner轮播图，这里用图片暂时代替-->
<div class="banner">
    <img src="phpcn\img\1.jpg" alt="">
</div>
<div class="nav">
    <ul>
        <li><a href=""><img src="phpcn\img\html.png" alt=""><br>HTML/CSS</a></li>
        <li><a href=""><img src="phpcn\img\javascript.png" alt=""><br>JavaScipt</a></li>
        <li><a href=""><img src="phpcn\img\code.png" alt=""><br>服务端</a></li>
        <li><a href=""><img src="phpcn\img\sql.png" alt=""><br>数据库</a></li>
    </ul>
    <ul>
        <li><a href=""><img src="phpcn\img\app.png" alt=""><br>移动端</a></li>
        <li><a href=""><img src="phpcn\img\manual.png" alt=""><br>手册</a></li>
        <li><a href=""><img src="phpcn\img\tool2.png" alt=""><br>工具</a></li>
        <li><a href=""><img src="phpcn\img\live.png" alt=""><br>直播</a></li>
    </ul>
</div>
<!--课程区-->
<h3>推荐课程</h3>
<div class="courses">
    <ul>
        <li>
            <a href=""><img src="phpcn/img/5d242759adb88970.jpg" alt=""></a>
        </li>
        <li>
            <a href=""><img src="phpcn/img/5d242759adb88970.jpg" alt=""></a>
        </li>
    </ul>
    <div>
        <a href=""><img src="phpcn/img/5d2941e265889366.jpg" alt=""></a>
    <p>
        <a href="">CI框架30分钟快速入门</a>
        <br>
        <span>中级</span><span>49748次播放</span>
    </p>
    </div>
    <div>
        <a href=""><img src="phpcn/img/5aa23f0ded921649.jpg" alt=""></a>
        <p>
            <a href="">2018前端入门_HTML5</a>
            <br>
            <span>初级</span><span>211506次播放</span>
        </p>
    </div>
</div>

<h3>最新更新</h3>
<div class="courses2">
    <div>
        <a href=""><img src="phpcn/img/11.jpg" alt=""></a>
        <p>
            <a href="">Laravel 5.8 中文文档手册</a>
            <br>
            <span>中级</span><span>7726次播放</span>
        </p>
    </div>
    <div>
    <a href=""><img src="phpcn/img/22.jpg" alt=""></a>
    <p>
        <a href="">JavaScript极速入门</a>
        <br>
        <span>初级</span><span>7273次播放</span>
    </p>
    </div>
    <div>
        <a href=""><img src="phpcn/img/33.jpg" alt=""></a>
        <p>
            <a href="">第七期_直播体验课</a>
            <br>
            <span>初级</span><span>6757次播放</span>
        </p>
    </div>
    <div>
        <a href=""><img src="phpcn/img/44.jpg" alt=""></a>
        <p>
            <a href="">CSS3 极速入门</a>
            <br>
            <span>初级</span><span>6786次播放</span>
        </p>
    </div>
    <div>
        <a href=""><img src="phpcn/img/55.jpg" alt=""></a>
        <p>
            <a href="">HTML5 极速入门</a>
            <br>
            <span>初级</span><span>5786次播放</span>
        </p>
    </div>
</div>

<h3>最新文章</h3>
<div class="courses3">
    <div>
        <p>
            <a href="">PHP之十六个魔术方法详解（总结）</a>
            <br>
            <span>发布时间：2019-07-29</span>
        </p>
        <a href=""><img src="phpcn/img/66.jpg" alt=""></a>
    </div>
    <div>
        <p>
            <a href="">PHP生成折线图和饼图等</a>
            <br>
            <span>发布时间：2019-08-02</span>
        </p>
        <a href=""><img src="phpcn/img/77.png" alt=""></a>
    </div>
    <div>
        <p>
            <a href="">PHP实现动态规划之***问题</a>
            <br>
            <span>发布时间：2019-08-13</span>
        </p>
        <a href=""><img src="phpcn/img/88.jpg" alt=""></a>
    </div>
    <div>
        <p>
            <a href="">ThinkPHP6源码：从Http类的实例化看依赖注入是如何实现的</a>
            <br>
            <span>发布时间：2019-08-16</span>
        </p>
        <a href=""><img src="phpcn/img/99.jpg" alt=""></a>
    </div>
    <div>
        <p>
            <a href="">PHP7中php.ini、php-fpm和www.conf 配置</a>
            <br>
            <span>发布时间：2019-08-23</span>
        </p>
        <a href=""><img src="phpcn/img/1010.png" alt=""></a>
    </div>
</div>

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

<!--底部-->
<div class="footer">
    <ul>
        <li><a href=""><img src="phpcn/img/icon/home.png" alt=""><br><span>主页</span></a></li>
        <li><a href=""><img src="phpcn/img/icon/sou***png" alt=""><br><span>查找</span></a></li>
        <li><a href=""><img src="phpcn/img/icon/gouwuche.png" alt=""><br><span>社区</span></a></li>
        <li><a href=""><img src="phpcn/img/icon/me.png" alt=""><br><span>我的</span></a></li>
    </ul>
</div>


</body>

</html>

运行实例 »

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

实例

.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;
}
.top img:first-of-type{
    border-radius:50%;
    margin-left:5px;
}
.top .logo {
text-align: center;
    flex:1;
}
.top .logo img{
    margin:0;
    width:94px;
    height:40px;
}
.banner{
    display:flex;
}
.banner img{
    width:100%;
    height:260px;
    margin-top:25px;
}
/*导航区*/
.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{
    height:326px;
    color:gray;
}
.courses ul{
    margin:0;
    padding:0;
    /*消除圆点*/
    list-style: none;
    /*flex布局*/
    display:flex;
}
.courses ul li{
    padding:3px;
}
.courses ul img{
    width:100%;
    height:90px;
}

.courses div{

    background-color:white;
    padding:10px;

    /*flex布局*/
    display:flex;
    justify-content: flex-start;
}
.courses div img{
    width:100%;
    height:100px;
}
.courses div a{
    text-decoration: none;
    color:gray;
    flex:0.45;
}
.courses div p{
    flex:0.55;
    margin-left:15px;
}
.courses div p span{
    font-size:0.8rem;
    background-color:black;
    color:white;
    border-radius:30%;
    padding:0 2px;
}
.courses div p span:last-of-type{
    font-size:0.7rem;
}

/*课程区2*/
h3{
    margin:0;
    padding-top:30px;
}
.courses2 div{
    background-color:white;
    padding:10px;

    /*flex布局*/
    display:flex;
    justify-content: flex-start;
}
.courses2 div img{
    width:100%;
    height:100px;
}
.courses2 div a{
    text-decoration: none;
    color:gray;
    flex:0.45;
}
.courses2 div p{
    flex:0.55;
    margin-left:15px;
}
.courses2 div p span:first-of-type{
    font-size:0.8rem;
    background-color:black;
    color:white;
    border-radius:30%;
    padding:0 2px;
}
.courses2 div p span:last-of-type{
    font-size:0.7rem;
}


/*课程区3*/

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

    /*flex布局*/
    display:flex;
    justify-content: flex-start;
}
.courses3 div img{
    width:100%;
    height:100px;
}
.courses3 div a{
    text-decoration: none;
    font-size:20px;
    color:#1b181b;
    flex:0.45;
}
.courses3 div p{
    flex:0.55;
    margin-right:15px;
}
.courses3 div p span:first-of-type{
    font-size:0.8rem;
    color:gray;
    border-radius:30%;
    padding:0 2px;
}

/*课程区4*/
.courses4 ul{
    margin:0;
    padding:0;
    list-style: none;

}
.courses4 ul li{
    font-size:20px;
    margin:20px auto;
    padding:15px;
    background-color:white;
}
.courses4 ul li a{
    font:bold 20px/30px arial,sans-serif;
    color:#1b1918;
    text-decoration: none;
    /*消除下划线*/
}
.courses4 ul li span{
    margin-left:40%;
    padding-left:40%;
}

/*底部样式*/
.footer{
    position:fixed;
    bottom:0;

    background-color:lightgrey;
    width:100%;
    height:50px;

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

    left:50%;

    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.footer ul{
    display:flex;
    margin:6px;
    padding:0;
    list-style-type:none;
    text-align:center;
}
.footer ul li img{
    width:25px;
    height:25px;
}
.footer ul li a{
    color:gray;
    text-decoration: none;
}
.footer ul li{
    flex:1;
}

运行实例 »

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

Correction status：qualified

Teacher's comments：写到凌晨1:45, 你不成功谁成功? 写得不错