Flex实战之实现PHP中文网移动端首页 - 九期线上班 - 作业

Community Learn Tools Library Leisure

English

Home > List of blog posts > Flex实战之实现PHP中文网移动端首页 - 九期线上班

Blogger Information

Blog 38

fans 1

comment 0

visits 28741

Special Recommendation

More>

Related recommendations

1. PHP中文网移动端首页

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP中文网手机版首页</title>
    <link rel="stylesheet" href="static/css/init.css">
    <link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<!--布局原则 宽度自适应，高度固定-->
<!--顶部设置为固定定位-->
<header>
    <img src="static/images/user-pic.jpeg" alt="">
    <img src="static/images/logo.png" alt="">
    <img src="static/images/user-nav.jpg" alt="">
</header>
<!--轮播图用图片代替-->
<div class="banner">
    <img src="static/images/banner.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/tjkc1.jpg" alt=""></a>
            <a href=""><img src="static/images/tjkc2.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>49738次播放</span>
                </span>
            </div>
            <div>
                <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
                <span>
                    <a href="">2018前端入门基础</a>
                    <span><i>初级</i>209952次播放</span>
                </span>
            </div>
        </section>
    </article>
<!--    最新更新-->
    <article>
        <h3>最新更新</h3>
        <section class="update">
            <div>
                <a href=""><img src="static/images/zxgx1.jpg" alt=""></a>
                <div>
                    <a href="">2019python自学视频</a>
                    <p>本课程适合想从零开始学习 python 编程语言的开发人员。由浅入深的带你进入p...</p>
                    <span><i>初级</i>2280次播放</span>
                </div>
            </div>
            <div>
                <a href=""><img src="static/images/zxgx2.png" alt=""></a>
                <div>
                    <a href="">PHP开发免费公益直播课</a>
                    <p>主讲：PHP中文网-朱老师（Peter Zhu）时间：2019.10.17 晚 20:00-22:00 主题：...</p>
                    <span><i>初级</i>1766次播放</span>
                </div>
            </div>
            <div>
                <a href=""><img src="static/images/zxgx3.jpg" alt=""></a>
                <div>
                    <a href="">从零开始到WEB响应式布局</a>
                    <p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利...</p>
                    <span><i>初级</i>3255次播放</span>
                </div>
            </div>
            <div>
                <a href=""><img src="static/images/zxgx4.png" alt=""></a>
                <div>
                    <a href="">PHP文件基础操作</a>
                    <p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家...</p>
                    <span><i>中级</i>1719次播放</span>
                </div>
            </div>
            <div>
                <a href=""><img src="static/images/zxgx5.jpg" alt=""></a>
                <div>
                    <a href="">memcache基础课程</a>
                    <p>本课程带你从零认识memcache，让你在一小时左右轻松掌握memcache在wind...</p>
                    <span><i>初级</i>829次播放</span>
                </div>
            </div>
            <div>
                <a href=""><img src="static/images/zxgx6.png" alt=""></a>
                <div>
                    <a href="">微信小程序--企业微网站</a>
                    <p>1，介绍小程序、开发者工具 2，介绍小程序文档 3，微官网项目 4，首页、产品...</p>
                    <span><i>初级</i>3747次播放</span>
                </div>
            </div>
        </section>
    </article>
<!--    最新文章-->
    <article>
        <h3>最新文章</h3>
        <section class="essay">
            <a href="">
                <span>
                    <h4>PHP如何去除数组中的空值？（图文+视频）</h4>
                    <span>发布时间：2018-10-09</span>
                </span>
                <img src="static/images/zxwz1.png" alt="">
            </a>
            <a href="">
                <span>
                    <h4>PHP冒泡排序算法是怎么实现的？（图文+视频）</h4>
                    <span>发布时间：2018-10-08</span>
                </span>
                <img src="static/images/zxwz2.png" alt="">
            </a>
            <a href="">
                <span>
                    <h4>ThinkPHP5.1框架怎么通过Composer下载安装？（图文+视频）</h4>
                    <span>发布时间：2018-09-20</span>
                </span>
                <img src="static/images/zxwz3.png" alt="">
            </a>
            <a href="">
                <span>
                    <h4>PHP怎么验证邮箱格式是否正确？（图文+视频）</h4>
                    <span>发布时间：2018-09-26</span>
                </span>
                <img src="static/images/zxwz4.png" alt="">
            </a>
            <a href="">
                <span>
                    <h4>PHPStorm怎么配置xdebug工具并使用？（图文+视频）</h4>
                    <span>发布时间：2018-09-14</span>
                </span>
                <img src="static/images/zxwz5.png" alt="">
            </a>
            <a href="">
                <span>更多内容</span>
            </a>
        </section>
    </article>
<!--    最新博文-->
    <article>
        <h3>最新博文</h3>
        <section class="blog">
            <a href="">
                <h2>移动端、手机端、去掉横向滚动条 亲测生效!!!</h2>
                <span>2019-11-08</span>
            </a>
            <a href="">
                <h2>PHP学习第一天：软件安装篇</h2>
                <span>2019-11-08</span>
            </a>
            <a href="">
                <h2>Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</h2>
                <span>2019-11-08</span>
            </a>
            <a href="">
                <h2>thinkphp5.0.24前置操作的大小写问题</h2>
                <span>2019-11-07</span>
            </a>
            <a href="">
                <h2>laravel-创建“控制器”和“模型”，使用模型方法获取数据库内容并输出--2019...</h2>
                <span>2019-11-04</span>
            </a>
            <a href="">
                <span>更多内容</span>
            </a>
        </section>
    </article>
<!--    最新问答-->
    <article>
        <h3>最新问答</h3>
        <section class="blog">
            <a href="">
                <h2>在金沙网站玩AG视讯赢了不给有什么解决方法？</h2>
                <span>2019-11-09</span>
            </a>
            <a href="">
                <h2>在威尼斯网站玩AG视讯赢了不给怎么办？</h2>
                <span>2019-11-09</span>
            </a>
            <a href="">
                <h2>初来乍到，有什么不懂的地方还请大家多多指教。</h2>
                <span>2019-11-09</span>
            </a>
            <a href="">
                <h2>出现这个怎么解决呀</h2>
                <span>2019-11-09</span>
            </a>
            <a href="">
                <h2>登录密码 什么情况？？？</h2>
                <span>2019-11-09</span>
            </a>
            <a href="">
                <span>更多内容</span>
            </a>
        </section>
    </article>
</main>
<!--实现底部,底部与头部类似,也是固定定位实现-->
<footer>
    <a href=""><img src="static/font-icon/zhuye.png" alt="">
        <span>主页</span>
    </a>
    <a href="">
        <img src="static/font-icon/video.png" alt="">
        <span>视频</span>
    </a>
    <a href="">
        <img src="static/font-icon/luntan.png" alt="">
        <span>社区</span>
    </a>
    <a href="">
        <img src="static/font-icon/geren.png" alt="">
        <span>我的</span>
    </a>
</footer>
</body>
</html>

css代码 init.css

body, footer {
    min-width: 320px;
    max-width: 768px;
    margin: 0 auto;
    background: #edeff0;
    overflow-y: initial;
    position: relative;
    color: gray;
    /*不要出现水平滚动条*/
    overflow-x: hidden;
    /*设置点击链接跳转时出现高亮，设置为透明：ios/ipad*/
    -webkit-tap-highlight-color: transparent;
}
/*设置所有图片全部自适应父容器，响应式显示*/
img {
    width: 100%;
}
ul, li {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: gray;
}

css代码 style.css

/*顶部设置*/
header {
    /*设置为固定定位*/
    position: fixed;
    top: 0;
    /*固定定位元素必须设置宽度和高度*/
    width: 100%;
    height: 42px;
    background: #444444;
    color: white;
    /*设置最小尺寸*/
    min-width: 320px;
    /*最大尺寸*/
    max-width: 768px;
    display: flex;
    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%;
}
/*设置中间logo样式*/
header > img {
    width: 94px;
}
/*轮播图设置*/
.banner {
    display: flex;
    height: 200px;
}
/*导航区设置*/
nav {
    /*设置背景颜色为白色*/
    background-color: white;
    /*转为flex容器*/
    display: flex;
    /*主轴为垂直方向，且不换行*/
    flex-flow: column nowrap;
}
/*设置图片大小*/
nav img {
    /*设置图片宽度*/
    width: 45px;
    /*设置图片高度*/
    height: 49px;
}
/*每一行导航都应该是一个弹性容器以方便布局*/
nav > ul {
    /*转为flex容器*/
    display: flex;
    /*每个菜单项水平且不换行（默认值）*/
    flex-flow: row nowrap;
}
/*每一菜单项均分全部空间*/
nav ul li {
    flex: 1;
}
/*图片与文本应该做为一个组件,统一设置*/
nav ul li a {
    /*转为flex容器*/
    display: flex;
    /*图片, 链接文本垂直排列*/
    flex-flow: column nowrap;
    /*交叉轴上居中显示*/
    align-items: center;
    /*外边距可以使菜单项之间不太拥挤*/
    margin: 10px;
}
/*使菜单项文本与上面图标有一个间隙*/
nav ul li a span {
    margin-top: 5px;
}
/*主体内容区*/
/*推荐课程区*/
main {
    width: 748px;
    margin: 20px  auto 50px;
    display: flex;
    flex-flow: column nowrap;
    color: #888888;
}
.recommend > section:first-of-type {
    display: flex;
    justify-content: space-between;
}
.recommend > section:first-of-type > a > img {
    width: 366px;
    height: 90px;
}
.recommend > section:last-of-type {
    display: flex;
    flex-flow: column nowrap;
    margin-top: 20px;
}
.recommend > section:last-of-type > div,
.update > div {
    box-sizing: border-box;
    height: 98px;
    margin: 0 0 20px;
    padding: 9px 0 9px 10px;
    background: #ffffff;
    display: flex;
}
.recommend > section:last-of-type > div > a > img,
.update > div > a > img {
    width: 295.2px;
    height: 80px;
}
.recommend > section:last-of-type > div > span {
    display: flex;
    flex-flow: column nowrap;
    margin-left: 10px;
}
.recommend > section:last-of-type > div > span > a {
    font-size: 16.5px;
    color: #888888;
}
.recommend > section:last-of-type > div > span > span {
    margin: 11px 0 0;
    font-size: 11px;
}
.recommend > section:last-of-type > div > span > span > i,
.update > div > div > span > i {
    font-style: normal;
    background-color: #595757;
    color: white;
    padding: 3px;
    font-size: 10px;
    border-radius: 8px;
    margin-right: 2px;
}
.update > div > div {
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    margin-left: 10px;
}
.update > div > div > a {
    color: #888888;
    font-size: 16.5px;
}
.update > div > div > p {
    font-size: 11px;
}
.update > div > div > span {
    font-size: 11px;
}
.update > div > div > span {
    display: flex;
    justify-content: space-between;
}
.essay a {
    box-sizing: border-box;
    height: 84px;
    margin: 0 0 10px;
    padding: 10px 10px 8px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
}
.essay a > img {
    width: 218.4px;
    height: 65px;
}
.essay > a > span > h4 {
    font-size: 14px;
    color: #888888;
    margin: 0 0 10px;
}
.essay > a > span > span {
    font-size: 12px;
    color: #888888;
}
.essay > a:last-of-type,
.blog > a:last-of-type {
    height: 29.6px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.essay > a:last-of-type > span,
.blog > a:last-of-type > span {
    font-size: 14px;
    color: #888888;
}
.blog > a {
    box-sizing: border-box;
    height: 48.2px;
    margin: 0 0 10px;
    padding: 10px 10px 8px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
}
.blog > a > h2 {
    font-size: 14px;
    color: #888888;
    margin: 0 0 10px;
}
.blog > a > span {
    font-size: 12px;
    color: #888888;
}
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    background-color: #eeeeee;
    display: flex;
    align-items: center;
    border-top: 1px solid #CCCCCC;
}
footer > a {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-top: 2px;
}
footer > a > img {
    width: 16px;
    height: 16.8px;
}

2. 手抄代码

3. 总结

通过对PHP中文网移动端首页的实现，更加了解了flex，也了解了设计移动端页面的基本思路。

Correction status：qualified

Teacher's comments：flex用于轴线一维布局, 理论上讲, 任何页面都可以写, 不论是PC还是移动

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

PHP开发环境配置（phpStudy，phpStorm和Chrome插件的安装及设置）- ***九期线上班

2019-10-29 01:53:38