CCS3：PHP中文网移动版 - PHP11学习

Community Learn Tools Library Leisure
English
Home > List of blog posts > CCS3：PHP中文网移动版
Blogger Information
Blog 39
fans 0
comment 0
visits 30675
Special Recommendation
More>
Related recommendations
演示效果：

PHP中文网移动版

<!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="static/css/font-icon.css">
    <title>PHP中文网（手机高仿版）</title>
    <style>
        /* 初始化 */
        *{
            margin: 0;
            padding: 0;
        }
        html{
            width: 100vw;
            height: 100vh;
            font-size: 14px;
        }
        body{
            min-width: 360px;
            /* width: 360px; */
            background-color:#fff;
            display: flex;
            flex-flow: column nowrap;
        }
        a{
            /* 所有的链接文字取消下划线，字体为灰色 */
            text-decoration: none;
            color: #666;
        }
        .more{
            /* 所有的“更多内容”居中 */
            text-align: center;
            width: 700px;
        }
        /* 页眉 */
        span{
            color: #efefef;
        }
        body>header{
            background-color: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 700px;
            height: 40px;
            padding: 0 15px;
            position: fixed;
        }
        /* 横幅广告 */
       .slide{
           height: 330px;
       }
        .slide>img{
            width:730px;
        }
        /* 导航区 */
        nav{
            height: 200px;
            width: 700px;
             /* 变成多行容器 */
            display: flex;
            flex-flow: row wrap;
        }
        nav>div{
            /* 占宽度四分之一 */
            width: 175px;
            display: flex;
            flex-flow: column nowrap;
            text-align: center;
            align-items: center;
        }
        nav>div img{
            width: 60%;
        }
        /* 推荐课程 */
        h2{
            background-color:lightgray;
            height: 40px;
            width: 730px;
            padding-top: 10px;
        }
        .good-course{
            width: 700px;
            display: flex;
            flex-flow: row nowrap; 
            justify-content: flex-start;
            margin-right: 10px;
        }
        .good-course img{
            width: 350px;
            margin-right: 20px;
        }
        .good-course1{
            width: 1356px;
            display: flex;
            justify-content: flex-start;
        }
        .good-course1 img{
            width: 350px;
        }
        .good-course1>a{
            width: 400px;
        }
        /* 最新更新 */
        .update{
            width: 700px;
            display: flex;
            flex-flow: column nowrap;
        }
        .new{
            display: flex;
        }
        /* 图片统一尺寸 */
        .new img{
            width: 450px;
        }
        /* 最新文章 */
        .article{
            display: flex;
            flex-flow: column nowrap;
            width: 700px;
        }
        .paper{
            display: flex;
            justify-content: flex-end;
        }
        .article img{
            width: 450px;
        }
         /* 最新博文 */
        .bw{
            display: flex;
            justify-content: space-between;
            width: 700px;
        }
        .bw>a{
            margin: 10px;
            padding: 5px;
            border: 1px;
            box-shadow: lightgrey;
        }
        /* 最新问答 */
        .newanswer{
            display: flex;
            flex-flow: column;
            height: 350px;
        }
        .answer{
            display: flex;
            justify-content: space-between;
            width: 700px;
            height: 50px;
        }
        /* 页脚 */
        footer{
            display: flex;
            flex-flow: row nowrap;
            width: 700px;
            height: 50px;
            justify-content: space-around;
            /* 固定底部横条 */
            position: fixed;
            bottom: 0;
            color: #666;
            background-color: #efefef;
            border-top: 1px solid #ccc;
        }
        footer>div{
            display: flex;
            flex-flow: column wrap;
        }
        footer>div>span{
            width: 100px;
            /* height: 100px; */
            color: red;
        }
    </style>
</head>
<body>
    <!-- 页眉 -->
    <header>
        <a href="">微博 </a>
        <a href="">PHP中文网</a>
        <span class="iconfont"></span>
    </header>
    <!-- 横幅广告 -->
    <div class="slide">
        <img src="static/images/11.png" alt="">
    </div>
    <!-- 导航 -->
    <nav>
        <div>
            <a href=""><img src="static/images/html.png" alt=""></a>
            <a href="">HTML/CSS</a>
        </div>
        <div>
            <a href=""><img src="static/images/JavaScript.png" alt=""></a>
            <a href="">JavaScript</a>
        </div>
        <div>
            <a href=""><img src="static/images/code.png" alt=""></a>
            <a href="">服务端</a>
        </div>
        <div>
            <a href=""><img src="static/images/sql.png" alt=""></a>
            <a href="">数据库</a>
        </div>
        <div>
            <a href=""><img src="static/images/app.png" alt=""></a>
            <a href="">移动端</a>
        </div>
        <div>
            <a href=""><img src="static/images/manual.png" alt=""></a>
            <a href="">手册</a>
        </div>
        <div>
            <a href=""><img src="static/images/tool2.png" alt=""></a>
            <a href="">工具</a>
        </div>
        <div>
            <a href=""><img src="static/images/live.png" alt=""></a>
            <a href="">直播</a>
        </div>
    </nav>
    <!-- 推荐课程 -->
    <br>
    <h2>推荐课程</h2>
    <div class="good-course">
        <a href="" class="image1"><img src="static/images/3-1.jpg" alt=""></a>
        <a href="" class="image1"><img src="static/images/3-2.jpg" alt=""></a>
    </div>
    <div class="good-course1">
        <a href=""><img src="static/images/cou1.jpg" alt=""></a>
        <div>
            <a href=""><h3>CI框架30分钟极速入门</h3></a>
            <p>中级 61279次播放</p>
    </div>  
    </div>
         <div class="good-course1">
        <a href=""><img src="static/images/cou2.jpg" alt=""></a>
        <div>
            <a href=""><h3>2018前端入门_HTML5</h3></a>
            <p>初级 310441次播放</p>
        </div>
    </div>
    <!-- 最新更新 -->
    <h2>最新更新</h2>
    <div class="update">
        <div class="new">
            <a href=""><img src="static/images/n1.png" alt=""></a>
            <a href=""><h3>PHP快速操控Excel之PhpSpreadsheet</h3></a>
            <p>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet</p>    
        </div>
        <div class="new">
            <a href=""><img src="static/images/n2.png" alt=""></a>
            <a href=""><h3>Thinkphp6.0正式版视频教程 </h3></a>
            <p>Thinkphp6.0从2019年10月24日正式发布，相对测试版，有很多变动，目前TP6已经</p> 
        </div>
        <div class="new">
            <a href=""><img src="static/images/n3.png" alt=""></a>
            <a href=""><h3>2019python自学视频</h3></a>
            <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入</p>
        </div>
        <div class="new">
            <a href=""><img src="static/images/n4.png" alt=""></a>
            <a href=""><h3>PHP开发免费公益直播课</h3></a>
            <p>主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00 主题</p>
        </div>
        <div class="new">
            <a href=""><img src="static/images/n5.png" alt=""></a>
            <a href=""><h3>从零开始到WEB响应式布局</h3></a>
            <p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利</p>
        </div>
        <div class="new">
            <a href=""><img src="static/images/n6.png" alt=""></a>
            <a href=""><h3>PHP文件基础操作</h3></a>
            <p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家</p>
        </div>
    </div>
    <!-- 最新文章 -->
    <h2>最新文章</h2>
    <div class="article">
        <div class="paper">
            <a href=""><p>电脑开机出现windows错误恢复怎么办</p> 
               <p>发布时间：2020-04-12</p> </a>
            <a href=""><img src="static/images/p1.jpg" alt=""></a>
        </div>
        <div class="paper">
            <a href=""><p>win7系统与游戏不兼容怎么办</p> 
               <p>发布时间：2020-04-12</p> </a>
            <a href=""><img src="static/images/p2.jpg" alt=""></a>
        </div>
        <div class="paper">
            <a href=""><p>公众号长图怎么无缝排版</p> 
               <p>发布时间：2020-04-12</p> </a>
            <a href=""><img src="static/images/p3.jpg" alt=""></a>
        </div>
        <div class="paper">
            <a href=""><p>ps钢笔压力前面有感叹号怎么解决</p> 
               <p>发布时间：2020-04-12</p> </a>
            <a href=""><img src="static/images/p4.jpg" alt=""></a>
        </div>
        <div class="paper">
            <a href=""><p>能打开rar文件的应用是什么</p> 
               <p>发布时间：2020-04-12</p> </a>
            <a href=""><img src="static/images/p5.jpg" alt=""></a>
        </div>
    </div> 
    <a href="" class="more">更多内容</a>
    <!-- 最新博文 -->
    <h2>最新博文</h2>
    <div class="bw">
        <a href="">CSS3：弹性盒子flex布局</a>
        <a href="">2020-04-12</a>
    </div>
    <div class="bw">
        <a href="">Jquery+AJAX上传文件，无刷新上传并重命名文件</a>
        <a href="">2020-04-11</a>
    </div>
    <div class="bw">
        <a href="">thinkphp5.6源码阅读1</a>
        <a href="">2020-04-11</a>
    </div>
    <div class="bw">
        <a href="">Composer windows安装详细介绍</a>
        <a href="">2020-04-10</a>
    </div>
    <div class="bw">
        <a href="">AI智能电销机器人源码 源码解读（1）—基础</a>
        <a href="">2020-04-10</a>
    </div>
<a href="" class="more">更多内容</a>
    <!-- 最新问答 -->
    <h2>最新问答</h2>
    <div class="newanswer">
        <div class="answer">
            <a href="">不出现tp6.0页面</a>
            <a href="">2020-04-12</a>
        </div>
        <div class="answer">
            <a href="">数据库密码··</a>
            <a href="">2020-04-12</a>
        </div>
        <div class="answer">
            <a href="">制定的学习计划在哪能找到 咋找不到呢?</a>
            <a href="">2020-04-11</a>
        </div>
        <div class="answer">
            <a href="">数据库链接后怎么知道用哪个表啊</a>
            <a href="">2020-04-11</a>
        </div>
        <div class="answer">
            <a href="">这个同步的东西</a>
            <a href="">2020-04-11</a>
        </div>
        <div class="answer">
            <a href="" class="more">更多内容</a>
        </div>
    </div>  
    <!-- 页脚 -->
    <footer>
        <div>
            <span></span> 
            <a href="">首页</a>
        </div>
        <div>
            <span></span> 
            <a href="">视频</a>
        </div>
        <div>
            <span></span> 
            <a href="">社区</a>
        </div>
        <div>
            <span></span> 
            <a href="">我的</a>
        </div>
    </footer>
</body>
</html>
Correcting teacher：
天蓬老师

Correction status：qualified

Teacher's comments：每个人基础不同, 2天做出来也还好了, 关键是你动手去做了, 可能在做之前, 你觉得二小时就行, 真动手就知道, 没那么简单
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
lavarel基础1：数据库查询、增加、删除、更新（二）

2020-06-07 22:18:26