利用flex布局实战仿PHP中文网手机端首页-PHP第九期线上班 - 作业

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > List of blog posts > 利用flex布局实战仿PHP中文网手机端首页-PHP第九期线上班

Blogger Information

Blog 13

fans 2

comment 0

visits 10833

Special Recommendation

More>

Related recommendations

HTML代码：

实例

<!DOCTYPE html>
<html lang="en">

<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="static/css/index-style.css">
    <script src="https://kit.fontawesome.com/35aa61648d.js" crossorigin="anonymous"></script>
    <title>PHP中文网手机版首页</title>
</head>

<body>
    <!-- 顶部固定区域 -->
    <header>
        <a href=""><i class="fa fa-user-circle-o"></i></a>
        <a href=""><img src="static/images/logo.png" alt="PHP中文网LOGO"></a>
        <a href=""><i class="fa fa-bars"></i></a>

    </header>

    <!-- bannaner区域 -->
    <div class="banner">
        <a href="" title="独孤九剑-WEB全栈开发系列课程"><img src="static/images/1.jpg" alt="独孤九剑-WEB全栈开发系列课程" srcset=""></a>
    </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 class="main">
            <article class="recommended">
                <h3>推荐课程</h3>
                <section>
                    <a href="http://"><img src="static/images/tianlongbabu.jpg" alt=""> </a>
                    <a href="http://"><img src="static/images/tianlongbabu.jpg" alt=""> </a>
                </section>
                <section>
                    <div>
                        <a href=""><img src="static/images/cl.jpg" alt=""></a>
                        <span>
                            <a href="">CI框架30分钟极速入门</a>
                            <span><i>初级</i>52983</span>
                        </span>
                    </div>

                    <div>
                        <a href=""><img src="static/images/cl.jpg" alt=""></a>
                        <span>
                            <a href="">CI框架30分钟极速入门</a>
                            <span><i>初级</i>52983</span>
                        </span>
                    </div>

                </section>


            </article>

            <article class="recommended">
                <h3>最近更新</h3>
                <section>
                    <div>
                        <a href=""><img src="static/images/cl.jpg" alt=""></a>
                        <span>
                            <a href="">CI框架30分钟极速入门</a>
                            <span><i>初级</i>52983</span>
                        </span>
                    </div>

                    <div>
                        <a href=""><img src="static/images/cl.jpg" alt=""></a>
                        <span>
                            <a href="">CI框架30分钟极速入门</a>
                            <span><i>初级</i>52983</span>
                        </span>
                    </div>

                    <div>
                        <a href=""><img src="static/images/cl.jpg" alt=""></a>
                        <span>
                            <a href="">CI框架30分钟极速入门</a>
                            <span><i>初级</i>52983</span>
                        </span>
                    </div>

                    <div>
                        <a href=""><img src="static/images/cl.jpg" alt=""></a>
                        <span>
                            <a href="">CI框架30分钟极速入门</a>
                            <span><i>初级</i>52983</span>
                        </span>
                    </div>


                    <div>
                        <a href=""><img src="static/images/cl.jpg" alt=""></a>
                        <span>
                            <a href="">CI框架30分钟极速入门</a>
                            <span><i>初级</i>52983</span>
                        </span>
                    </div>

                    <div>
                        <a href=""><img src="static/images/cl.jpg" alt=""></a>
                        <span>
                            <a href="">CI框架30分钟极速入门</a>
                            <span><i>初级</i>52983</span>
                        </span>
                    </div>


                </section>


            </article>


            <article class="recommended">
                <h3>最新文章</h3>
                <section>
                    <div>
                        <a href="""><img src=" static/images/cl.jpg" alt=""></a>
                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>
                        <a href="""><img src=" static/images/cl.jpg" alt=""></a>
                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>
                        <a href="""><img src=" static/images/cl.jpg" alt=""></a>
                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>
                        <a href="""><img src=" static/images/cl.jpg" alt=""></a>
                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>
                        <a href="""><img src=" static/images/cl.jpg" alt=""></a>
                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div id="more">
                        <span>
                            更多内容
                        </span>
                    </div>

                </section>


            </article>

            <article class="recommended">
                <h3>最新博文</h3>
                <section>
                    <div>

                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>

                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>

                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>

                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>

                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div id="more">
                        <span>
                            更多内容
                        </span>
                    </div>

                </section>


            </article>



            <article class="recommended">
                <h3>最新问答</h3>
                <section>
                    <div>

                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>

                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>

                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>

                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div>

                        <span class="order">
                            <a href="">重启阿里云ECS服务器实例</a>
                            <span>发布时间：2019-11-07</span>
                        </span>
                    </div>

                    <div id="more">
                        <span>
                            更多内容
                        </span>
                    </div>

                </section>


            </article>
        </main>


        <!-- 页脚部分 -->
        <footer>
            <a href=""> <i class="fa fa-home"></i>
                <span>首页</span></a>

            <a href=""> <i class="fa fa-video-camera"></i>
                <span>视频</span></a>

            <a href=""> <i class="fa fa-code"></i>
                <span>社区</span></a>

            <a href=""> <i class="fa fa-user"></i>
                <span>我的</span></a>
        </footer>
</body>
</html>

运行实例 »

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

CSS代码：

实例

* {
    margin: 0;
    padding: 0;
    /* outline: 1px dashed #ff742d; */
}
body {
    min-width: 320px;
    max-width: 768px;
    margin: 0 auto;
    background: #1f1f1f ;
    overflow: initial;
    position: relative;
    color: #aaa;
     overflow-x: hidden;
     -webkit-tap-highlight-color: transparent;

}

a {
    text-decoration: none;
    color: #aaa;
}

img {
    width: 100%;
}
ul, li {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}


header {
    width: 100%;
    height: 44px;
    background: #282828;
    border-bottom: 1px solid #363636;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 5px;
    position: fixed;
    top: 0;
    
}

header > a > img {
    width: 94px;
}

header > a > i {
    font-size: 24px;
}

.banner {
    display: flex;
    
}

nav {
    background: #282828;
    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-flow: column nowrap;

}
.main > .recommended {
    padding: 5px;
}
.main > .recommended >h3  {
    margin: 0 0 10px 5px;

}

.main > .recommended > section:first-of-type {
    display: flex;
    flex-flow: row nowrap;
}
.main > .recommended > section:first-of-type >a {
    margin: 5px;
}

.main > .recommended > section:first-of-type >a >img {
    height: 90px;
}

.main > .recommended > section:last-of-type {
    display: flex;
    flex-flow: column nowrap;
}

.main > .recommended > section:last-of-type > div {
    display: flex;
    margin: 10px 5px;
    background: #282828;
    padding: 10px;

}
.main > .recommended > section:last-of-type > div > a {
    flex: 1;
}
.main > .recommended > section:last-of-type > div > a >img {
    height: 74px;
}


.main > .recommended > section:last-of-type > div > span {
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    margin-left: 10px;
}
.main > .recommended > section:last-of-type > div > span > a {
    margin-bottom: 20px;
    font-size: 1rem;
} 

.main > .recommended > section:last-of-type > div > span i {
    font-style: normal;
    background-color: #909090;
    color: white;
    border-radius: 4px;
    padding: 0 5px;
    margin-right: 5px;
    font-size: smaller;
}

/* 改变图片顺序 */
.order {
    order: -1;
}

/* 改变图片大小 */
.img-size {
    width: 100px;
}
.flex {
    flex: none;
}
#more >span {
    display: flex;
    align-items: center;
    color: #aaa
}



footer {
    height: 50px;
    width: 100%;
    background: #282828;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    border-top: #363636;


}
footer > a {
    height: 50px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    flex: 1;
    padding: 5px;
    border-right: 1px solid #363636;
    box-sizing: border-box;

}
footer > a:last-of-type {
    border-right: none;
}

footer > a:hover {
    background: #3E3E3E;
}

footer > a > i {
    margin-bottom: 5px;
}

运行实例 »

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

手写代码：

总结

1.布局手机网页布局的最大宽度建议在768px，

2.在布局导航菜单过程中可以使用flex-flow: row wrap将弹性元素设置在水平排列且换行，同时还可以使用flex-flow: column nowrap;属性来将弹性元素进行上下排列。

3.想让导航菜单弹性元素在垂直轴上居中对齐，应该使用align-items: center属性来对齐

4.为了方便样式表的维护，我们通过定义一个专用于页面公共样式的样式表文件，通过导入的方式应用它@import “style.css”;

5.本次布局遇到一个布局问题没能自己解决，自己通过举一反三方式，让<a>元素想让弹性元素在一行排列且每次换行在弹性容器中的起始位置进行从左到右的方式排列，这一问题经过多个属性的测试之后未能得到解决。

6.在布局页面头部和页脚也遇到了问题，就是当父元素做了固定定位后，子元素的宽度变小，经过测试给父元素的宽度设置width:100%可以得到解决，同时在公共样式中尽量不要使用分组选择器给元素设置相同的定位，那样会影响自己布局工作。

7.对于flex的属性的知识有待加强，在为弹性元素设置flex: 1;之后自己一时还不知道如何利用其他的flex属性来覆盖它的样式。

Correction status：qualified

Teacher's comments：你给我们的网站做一个暗黑夜间版本, 不错的

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

准备开发环境与编辑器的安装及使用-前端第九期线上班

2019-10-29 13:33:03

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

HTML代码：

实例

实例

手写代码：

总结