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

参考老师讲解后进行作业完善

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;
}

HTML代码

CSS代码

样式重置

样式代码

效果如下

写完一个完整的首页后，前面一些模糊的问题好像有点清晰了，明白它的作用是什么。

相关文章