《Flex实战PHP中文网手机端首页布局》2019-12-27作业笔记 - 第十期线上培训作业

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 《Flex实战PHP中文网手机端首页布局》2019-12-27作业笔记

博主信息

博文 26

粉丝 1

访问量 25602

专题推荐

更多>

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP中文网移动端首页</title>
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/font/iconfont.css">
</head>
<body>
    <!-- 顶部 -->
    <header>
        <img src="static/images/user_avatar.jpg" alt="">
        <img src="static/images/logo.png" alt="">
        <img src="static/images/user-nav.jpg" alt="">
    </header>
    <!-- 轮播图 -->
    <div class="banner">
        <img src="static/images/3.jpg" alt="">
    </div>
    <!-- 导航区 -->
    <nav>
        <ul>
            <li>
                <a href="#">
                    <img src="static/images/html.png" alt="">
                    <span>HTML/CSS</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="static/images/JavaScript.png" alt="">
                    <span>JavaScript</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="static/images/code.png" alt="">
                    <span>服务端</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="static/images/sql.png" alt="">
                    <span>数据库</span>
                </a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="#">
                    <img src="static/images/app.png" alt="">
                    <span>移动端</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="static/images/manual.png" alt="">
                    <span>手册</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="static/images/tool2.png" alt="">
                    <span>工具</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="static/images/live.png" alt="">
                    <span>直播</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- 推荐课程 -->
    <main>
        <article class="recommend">
            <h3>推荐课程</h3>
            <section>
                <a href="#"><img src="static/images/01.jpg" alt=""></a>
                <a href="#"><img src="static/images/02.jpg" alt=""></a>
            </section>
            <section>
                <div>
                    <a href="#"><img src="static/images/tjkc3.jpg" alt=""></a>
                    <span>
                        <a href="#">CI框架30分钟极速入门</a>
                        <span><i>中级</i>57521次播放</span>
                    </span>
                </div>
                <div>
                    <a href="#"><img src="static/images/tjkc4.jpg" alt=""></a>
                    <span>
                        <a href="#">2018前端入门_HTML5</a>
                        <span><i>初级</i>271038次播放</span>
                    </span>
                </div>
            </section>
        </article>
        <article class="recommend_new">
            <h3>最新更新</h3>
            <section>
                <div>
                    <a href="#"><img src="static/images/1.png" alt=""></a>
                    <span>
                        <a href="#">PHP快速操控Excel之PhpSpreadsheet</a>
                        <p>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpr...</p>
                        <span><i>中级</i>5492次播放</span>
                    </span>
                </div>
            </section>
            <section>
                <div>
                    <a href="#"><img src="static/images/2.png" alt=""></a>
                    <span>
                        <a href="#">Thinkphp6.0正式版视频教程</a>
                        <p>Thinkphp6.0从2019年10月24日正式发布，相对测试版，有很多变动，目...</p>
                        <span><i>中级</i>15926次播放</span>
                    </span>
                </div>
            </section>
            <section>
                <div>
                    <a href="#"><img src="static/images/03.jpg" alt=""></a>
                    <span>
                        <a href="#">2019python自学视频</a>
                        <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带...</p>
                        <span><i>初级</i>18359次播放</span>
                    </span>
                </div>
            </section>
            <section>
                <div>
                    <a href="#"><img src="static/images/4.png" alt=""></a>
                    <span>
                        <a href="#">PHP开发免费公益直播课</a>
                        <p>主讲：php中文网-朱老师( Peter Zhu)时间：2019.10.17 晚 20:00-22:00...</p>
                        <span><i>初级</i>4595次播放</span>
                    </span>
                </div>
            </section>
            <section>
                <div>
                    <a href="#"><img src="static/images/5.jpg" alt=""></a>
                    <span>
                        <a href="#">从零开始到WEB响应式布局</a>
                        <p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解...</p>
                        <span><i>初级</i>19562次播放</span>
                    </span>
                </div>
            </section>
            <section>
                <div>
                    <a href="#"><img src="static/images/6.png" alt=""></a>
                    <span>
                        <a href="#">PHP文件基础操作</a>
                        <p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带...</p>
                        <span><i>中级</i>6267次播放</span>
                    </span>
                </div>
            </section>
        </article>
        <article class="recommend_new01">
            <h3>最新文章</h3>
            <section>
                <div>
                    <span>
                        <a href="#">workerman实现简单弹幕的方法</a>
                        <span>发布时间：2020-02-03</span>
                    </span>
                    <a href="#"><img src="static/images/work.jpg" alt=""></a>     
                </div>
                <div>
                    <span>
                        <a href="#">开发模式与产品模式下的PHP报错处理详解</a>
                        <span>发布时间：2020-02-03</span>
                    </span>
                    <a href="#"><img src="static/images/php.jpg" alt=""></a>     
                </div>
                <div>
                    <span>
                        <a href="#">怎么查看linux文件</a>
                        <span>发布时间：2020-02-03</span>
                    </span>
                    <a href="#"><img src="static/images/linux.jpg" alt=""></a>     
                </div>
                <div>
                    <span>
                        <a href="#">vscode怎么选择浏览器</a>
                        <span>发布时间：2020-02-03</span>
                    </span>
                    <a href="#"><img src="static/images/vsvode1.jpg" alt=""></a>     
                </div>
                <div>
                    <span>
                        <a href="#">vscode中的git是干啥的</a>
                        <span>发布时间：2020-02-03</span>
                    </span>
                    <a href="#"><img src="static/images/vsvode2.jpg" alt=""></a>     
                </div>
                <div>
                    <span>
                        <a href="#" style="text-align: center;margin-bottom: 10px;">更多内容</a>
                    </span>  
                </div>
            </section>
        </article>
        <article class="recommend_new02">
            <h3>最新博文</h3>
            <section>
                <div>
                    <span>
                        <a href="#">wordpress自动发送文章</a>
                        <span>2020-01-21</span>
                    </span>   
                </div>
                <div>
                    <span>
                        <a href="#" style="margin-bottom: 10px;margin: 0 auto;padding-bottom: 10px;">更多内容</a>
                    </span>  
                </div>
            </section>
        </article>
        <article class="recommend_new03">
            <h3>最新最新问答</h3>
            <section>
                <div>
                    <span>
                        <a href="#">老师，视频里是不是有些代码有一些问题？</a>
                        <span>2020-02-03</span>
                    </span>   
                </div>
                <div>
                    <span>
                        <a href="#">数据库无法启动</a>
                        <span>2020-02-03</span>
                    </span>   
                </div>
                <div>
                    <span>
                        <a href="#">SQL链接出现1130</a>
                        <span>2020-02-03</span>
                    </span>   
                </div>
                <div>
                    <span>
                        <a href="#">谷歌访问助手问题</a>
                        <span>2020-02-02</span>
                    </span>   
                </div>
                <div>
                    <span>
                        <a href="#">new操作符的作用什么？</a>
                        <span>2020-02-02</span>
                    </span>   
                </div>
                <div>
                    <span>
                        <a href="#" style="margin-bottom: 10px;margin: 0 auto;padding-bottom: 10px;">更多内容</a>
                    </span>  
                </div>
            </section>
        </article>
    </main>
    <!-- 底部菜单 -->
    <footer>
        <ul>
            <li>
                <a href="#" style="color: red;">
                    <i class="iconfont icon-shouyeshouye" style="font-size: 18px;"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-yunhang" style="font-size: 18px;"></i>
                    <span>视频</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-ruanjiankaifabao" style="font-size: 18px;"></i>
                    <span>社区</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-huiyuan2" style="font-size: 18px;"></i>
                    <span>我的</span>
                </a>
            </li>
        </ul>
    </footer>
</body>
</html>

CSS代码

样式重置

/* 初始化 */
body,footer {
    /* 最小宽度设置 */
    min-width: 320px;
    /* 最大宽度设置 */
    max-width: 768px;
    /* 外边距上下清零，左右自动 */
    margin: 0 auto;
    /* 背景颜色 */
    background-color: #edeff0;
    /* Y轴初始化，默认值不显示滚动条 */
    overflow-y: initial;
    /* 相对定位 */
    position: relative;
    /* 字体颜色 */
    color: gray;
    /* 水平x轴隐藏滚动条 */
    overflow-x: hidden;
    /* 兼容苹果设备高亮设置 */
    -webkit-tap-highlight-color: transparent;
}
/* 设置所有图片全部自适应父容器 */
img {
    width: 100%;
}
ul,li {
    /* 外边距清零 */
    margin: 0;
    /* 内边距清零 */
    padding: 0;
} 
li {
    /* li前面的小黑点去掉 */
    list-style: none;
}
a {
    /* 文字下划线去掉 */
    text-decoration: none;
    /* 文字颜色 */
    color: gray;
}

样式代码

@import "reset.css";
/* 头部样式 */
header {
    /* 固定定位 */
    position: fixed;
    top: 0;
    width: 100%;
    min-width: 320px;
    max-width: 768px;
    height: 42px;
    background-color: #444444;
    color: #ffffff;
    /* 转为flex */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
header > img:first-of-type,
header > img:last-of-type {
    width: 26px;
    height: 26px;
    margin: 5px;
}
header > img:first-of-type {
    border-radius: 50%;
}
header > img {
    width: 94px;
}
/* 轮播图 */
.banner {
    display: flex;
    height: 200px;
}
/* 导航区 */
nav {
    /* 背景色 */
    background-color: #fff;
    /* 转为弹性布局 */
    display: flex;
    /* 主轴垂直方向，禁止换行 */
    flex-flow: column nowrap;
}
nav img {
    width: 45px;
    height: 49px;
}
nav > ul {
    display: flex;
    /* 主轴横向排练，禁止换行 */
    flex-flow: row nowrap;
}
nav ul li {
    flex: 1;
}
/* 图片文本作为一个整体，统一设置 */
nav ul li a {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    margin: 10px;
}
nav ul li a span {
    margin-top: 5px;
}
/* 推荐课程 */
main {
    display: flex;
    flex-direction: column;
}
main > .recommend > section:first-of-type {
    display: flex;
}
main > .recommend > section:first-of-type > a {
    margin: 5px;
    flex: 1;
}
main > .recommend > section:first-of-type > a > img {
    height: 90px;
}
/* 垂直排列的推荐课程 */
main > .recommend > section:last-of-type {
    display: flex;
    flex-direction: column;
}
main > .recommend > section:last-of-type > div {
    background-color: #fff;
    margin: 5px;
    display: flex;
}
main > .recommend > section:last-of-type > div img {
    width: 350px;
    height: 80px;
    margin: 10px;
}
main > .recommend > section:last-of-type > div > span {
    flex: 1;
    display: flex;
    /* 垂直排列 */
    flex-direction: column;
    margin-top: 10px;
    padding-left: 10px;
}
main > .recommend > section:last-of-type > div > span i {
    /* 设置不斜体 */
    font-style: normal;
    background-color: #333333;
    color: white;
    border-radius: 6px;
    padding: 0 5px;
    font-size: smaller;
    line-height: 20px;
}
main > .recommend > section:last-of-type > div > span > span {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
body {
    height: 2810px;
}
footer {
    /* 固定定位 */
    position: fixed;
    bottom: 0;
    width: 100%;
    min-width: 320px;
    max-width: 768px;
    height: 42px;
    border-top: 1px solid #ccc;
    display: flex;
    flex-flow: column nowrap;
}
footer > ul {
    display: flex;
    /* 主轴横向排练，禁止换行 */
    flex-flow: row nowrap;
}
footer ul li {
    flex: 1;
}
footer ul li a {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    margin-top: 5px;
}
footer ul li a span {
    font-size: 15px;
}
footer ul li a:hover {
    color: red;
}
/* 垂直排列的最新更新 */
main > .recommend_new > section {
    display: flex;
    flex-direction: column;
}
main > .recommend_new > section > div {
    background-color: #fff;
    margin:10px;
    display: flex;
}
main > .recommend_new > section > div img {
    width: 350px;
    height: 80px;
    margin: 10px;
}
main > .recommend_new > section > div > span {
    flex: 1;
    display: flex;
    /* 垂直排列 */
    flex-direction: column;
    margin-top: 15px;
    padding-left: 10px;
}
main > .recommend_new > section > div > span p {
    font-size: 11px;
}
main > .recommend_new > section > div > span i {
    /* 设置不斜体 */
    font-style: normal;
    background-color: #333333;
    color: white;
    border-radius: 6px;
    padding: 0 5px;
    font-size: smaller;
    line-height: 20px;
}
main > .recommend_new > section > div > span > span {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
/* 垂直排列的最新文章 */
main > .recommend_new01 > section {
    display: flex;
    flex-direction: column;
}
main > .recommend_new01 > section > div {
    background-color: #fff;
    margin: 5px;
    display: flex;
}
main > .recommend_new01 > section > div img {
    width: 275px;
    height: 65px;
    margin: 8px;
}
main > .recommend_new01 > section > div > span {
    flex: 1;
    display: flex;
    /* 垂直排列 */
    flex-direction: column;
    margin-top: 15px;
    padding-left: 10px;
}
main > .recommend_new01 > section > div > span > a {
    font-weight: bold;
}
main > .recommend_new01 > section > div > span > span {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin-top: 10px;
}
/* 垂直排列的最新博文 */
main > .recommend_new02 > section {
    display: flex;
    flex-direction: column;
}
main > .recommend_new02 > section > div {
    background-color: #fff;
    margin: 5px;
    display: flex;
}
main > .recommend_new02 > section > div > span {
    flex: 1;
    display: flex;
    /* 垂直排列 */
    justify-content: space-between;
    margin-top: 15px;
    padding-left: 10px;
}
main > .recommend_new02 > section > div > span > a {
    font-weight: bold;
}
main > .recommend_new02 > section > div > span > span {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin: 10px;
}
/* 垂直排列的最新问答 */
main > .recommend_new03 > section {
    display: flex;
    flex-direction: column;
}
main > .recommend_new03 > section > div {
    background-color: #fff;
    margin: 5px;
    display: flex;
}
main > .recommend_new03 > section > div > span {
    flex: 1;
    display: flex;
    /* 垂直排列 */
    justify-content: space-between;
    margin-top: 15px;
    padding-left: 10px;
}
main > .recommend_new03 > section > div > span > a {
    font-weight: bold;
}
main > .recommend_new03 > section > div > span > span {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin: 10px;
}