search

博客列表 >前端-第九课-php中文网手机站模仿案例-九期线上班

前端-第九课-php中文网手机站模仿案例-九期线上班

王玉龙℡¹³⁵⁵²⁰⁶²¹³⁹
王玉龙℡¹³⁵⁵²⁰⁶²¹³⁹原创
2019年11月10日 22:22:24858浏览

总结：

    此次案例主要练习了弹性布局中最常用的语法，总结如下：

1、转换弹性盒子使用：display:flex 

2、转为弹性容器后需要设置主轴排列方向及是否换行，用felx-flow:row水平方向/column垂直方向 空格 wrap换行/nowrap不换行；

3、设置对齐方式/空间分配方案，此次li用到flex:1自动填充剩余空间。

4、最后还a链接还用到align-items:center，使图标和标题垂直对齐，垂直时：align-items用于单行，align-content:用于多行。

5、导航难点每一层都需要转成弹性容器，在盒子套盒子比较繁琐，个人经验：盒子套盒子情况下，元素转成盒子后就需要设置排列方向及是否换换行。也就是display:flex,和flex-flow是缺一不可的。

实例.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php中文网</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            /*outline: 1px solid grey;*/
        }
        a{
            text-decoration: none;
            color: gray;
        }
        li{
            list-style: none;
        }
        .banner > img{
            width: 100%;
            height: 200px;
        }
        body,header,footer{
            display: flex;
            box-sizing: border-box;
            min-width: 320px;
            max-width: 768px;
            margin: 0 auto;
        }
        body{
            flex-flow: column nowrap;
            background: #edeff0;
        }
        header{
            width: 100%;
            height: 42px;
            background: #1a1a1a;
            flex-flow: row nowrap;
            position: fixed;
            justify-content: space-between;
            z-index: 999;
        }
        header > a{
            display: flex;
            box-sizing: border-box;
        }
        header > a:first-of-type > img,header > a:last-of-type > img{
            width: 26px;
            height: 26px;
            margin: 5px 0;
        }
        header > a:first-of-type > img {
            border-radius: 50%;
        }
        header > img {
            width: 94px;
        }
        nav {
            display: flex;/*导航转为弹性容器*/
            flex-flow:column nowrap;/*垂直排列 不换行*/
            background: white;/*底色白色*/
        }
        nav > ul {
            display: flex;/*导航第一排转为弹性盒子*/
        }
        nav > ul > li {
            flex: 1;
        }
        nav ul li a{
            display: flex;/*图标转为弹性容器*/
            flex-flow: column wrap;/*垂直排列换行*/
            align-items: center;/*整体水平居中*/
            margin: 10px;/*外边距*/
            box-sizing: border-box;/*不改变容器大小*/
        }
        nav ul li a img{
            width: 45px;/*图标宽度*/
            height: 45px;/*图标高度*/
        }
        nav ul li a span{
            margin-top: 5px;/*标题的上边距*/
        }
        main{
            display: flex;
            flex-flow: column nowrap;
        }
        main h3{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top:15px;
            color:lightslategray ;
        }
        main article{
            display: flex;
            flex-flow: column nowrap;
            margin-top: 5px;
            margin-bottom: 70px;
        }
        main > article > .section1{
            display: flex;
        }
        main > article > .section1 a {
            flex: 1;
            margin: 5px;
        }
        main > article > .section1 a img{
            width: 100%;
            height: 90px;
        }
        main > article > .section2，
        main > article > .section3{
            display: flex;
            flex-flow: column nowrap;
        }
        main > article >.section2 img {
            width: 100%;
            height: 80px;
        }
        main > article > .section2 > div{
            display: flex;
            flex-flow: row nowrap;
            margin-top: 5px;
            background: white;
            padding: 10px;
        }
        main > article > .section2 > div > a{
            width: 40%;
        }
        main > article > .section2 > div >span{
            display: flex;
            flex-flow: column nowrap;
            margin:0 10px;
            color:darkgrey;
            width: 58%;
        }
        main > article > .section2 > div > span > span{
            margin-top: 10px;
            font-size: 0.7rem;
        }
        main > article > .section2 > div > span > a{
            font-size: 1.2rem;
        }
        main > article > .section2 > div > span > span> i {
            background: #1a1a1a;
            color: #edeff0;
            border-radius: 30%;
            font-size: 0.8rem;
        }
        main > article >.section3 img {
            width: 100%;
            height: 80px;
        }
        main > article > .section3 > div > a{
            width: 40%;
        }
        main > article > .section3 > div > span {
            display: flex;
            flex-flow: column nowrap;
            margin:0 10px;
            justify-content: space-between;
            width: 58%;
        }
        main > article > .section3 > div > span > a:first-of-type{
            font-size: 1.2rem;
        }
        main > article > .section3 > div > span > a:nth-of-type(2){
            width: 380px;
            font-size: 0.7rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        main > article > .section3 > div > span > span{
            display: flex;
            justify-content: space-between;
            font-size: 0.7rem;
            color: #999999;
        }
        main > article > .section3 > div > span > span > i {
            font-size: 0.8rem;
            background: #1a1a1a;
            border-radius: 30%;
            color: white;
        }
        main > article > .section3 > div,
        main > article > .section4 > div {
            display: flex;
            padding: 10px;
            background: white;
            margin-top: 10px;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 10px;
            flex: 1;
        }
        main > article > .section4 > div > a:first-of-type{
            display: flex;
            flex-flow: column nowrap;
            width: 68%;
        }
        main > article > .section4 > div > a{
            display: flex;
        }
        main > article > .section4 > div > a:last-of-type{
            width: 30%;
        }
        main > article > .section4 > div > a > img{
            width: 100%;
            height: 65px;
        }
        main > article > .section4 > div > a > span{
            margin-top: 8px;
        }
        main > article > .section4 > div > a > h4{
            font-size: 1.1rem;
        }
        main > article > .section4 > a,
        main > article > .section5 > a {
            display: flex;
            padding: 15px;
            line-height: 10px;
            background: white;
            margin-top: 10px;
            justify-content: center;
        }
        main > article > .section5 > div{
            display: flex;
            justify-content: space-between;
            background: white;
            padding: 10px 10px 20px;
            margin-top: 10px;
        }
        footer{
            width: 100%;
            height: 62px;
            justify-content: space-around;
            position: fixed;
            bottom: 0;
            background: #edeff0;
            align-items: center;
            z-index: 999;
            border-top:1px solid #999999;
        }
        footer > a {
            width: 50px;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            margin-top: 10px;
        }
        footer > a > img{
            width: 20px;
        }
        footer > a > span {
            margin-top: 3px;
        }
        footer > a:hover{
            color: red;

        }
    </style>
</head>
<body>
<header>
    <a href=""><img src="images\11.jpeg" alt=""></a>
    <img src="images\logo.png" alt="">
    <a href=""><img src="images\user-nav.jpg" alt=""></a>
</header>
<div class="banner">
    <img src="images\banner.jpg" alt="">
</div>
<nav>
    <ul>
        <li>
            <a href="">
                <img src="images\html.png" alt="">
                <span>html/css</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images\JavaScript.png" alt="">
                <span>JavaScript</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images\code.png" alt="">
                <span>服务器</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images\sql.png" alt="">
                <span>数据库</span>
            </a>
        </li>
    </ul>
    <ul></ul>
    <ul>
        <li>
            <a href="">
                <img src="images\app.png" alt="">
                <span>移动端</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images\manual.png" alt="">
                <span>手册</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images\html.png" alt="">
                <span>工具</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images\live.png" alt="">
                <span>直播</span>
            </a>
        </li>
    </ul>
</nav>
<main>
<h3>推荐课程</h3>
<article>
        <section class="section1">
            <a href="">
                <img src="images\tjkc1.jpg" alt="">
            </a>
            <a href="">
                <img src="images\tjkc2.jpg" alt="">
            </a>
        </section>
        <section class="section2">
            <div>
                <a href=""><img src="images\tjkc3.jpg" alt=""></a>
                <span>
                    <a href="">CI框架30分钟急速入门</a>
                    <span><i>中级</i>49381次播放</span>
                </span>
            </div>
            <div>
                <a href=""><img src="images\tjkc4.jpg" alt=""></a>
                <span>
                    <a href="">218前端入门基础</a>
                    <span><i>初级</i>215486次播放</span>
                </span>
            </div>
        </section>
    <h3>最新更新</h3>
    <section class="section3">
            <div>
                <a href=""><img src="images\tjkc4.jpg" alt=""></a>
                <span>
                    <a href="">2019python自学视频</a>
                    <a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
                    <span><i>初级</i>1707次播放</span>
                </span>
            </div>
        <div>
            <a href=""><img src="images\tjkc4.jpg" alt=""></a>
            <span>
                    <a href="">2019python自学视频</a>
                    <a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
                    <span><i>初级</i>1707次播放</span>
                </span>
        </div>
        <div>
            <a href=""><img src="images\tjkc4.jpg" alt=""></a>
            <span>
                    <a href="">2019python自学视频</a>
                    <a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
                    <span><i>初级</i>1707次播放</span>
                </span>
        </div>
        <div>
            <a href=""><img src="images\tjkc4.jpg" alt=""></a>
            <span>
                    <a href="">2019python自学视频</a>
                    <a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
                    <span><i>初级</i>1707次播放</span>
                </span>
        </div>
        <div>
            <a href=""><img src="images\tjkc4.jpg" alt=""></a>
            <span>
                    <a href="">2019python自学视频</a>
                    <a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
                    <span><i>初级</i>1707次播放</span>
                </span>
        </div>
        <div>
            <a href=""><img src="images\tjkc4.jpg" alt=""></a>
            <span>
                    <a href="">2019python自学视频</a>
                    <a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
                    <span><i>初级</i>1707次播放</span>
                </span>
        </div>


        </section>
    <section class="section4">
    <h3>最新文章</h3>
        <div>
            <a href="">
                <h4>PHP如何去除数组中的空值？（图文+视频></h4>
                <span>发布日期：<time pubdate>2018-10-9</time></span>
            </a>
            <a href=""><img src="images\tjkc13.png" alt=""></a>
        </div>
        <div>
            <a href="">
                <h4>PHP如何去除数组中的空值？（图文+视频></h4>
                <span>发布日期：<time pubdate>2018-10-9</time></span>
            </a>
            <a href=""><img src="images\tjkc13.png" alt=""></a>
        </div>
        <div>
            <a href="">
                <h4>PHP如何去除数组中的空值？（图文+视频></h4>
                <span>发布日期：<time pubdate>2018-10-9</time></span>
            </a>
            <a href=""><img src="images\tjkc13.png" alt=""></a>
        </div>
        <div>
            <a href="">
                <h4>PHP如何去除数组中的空值？（图文+视频></h4>
                <span>发布日期：<time pubdate>2018-10-9</time></span>
            </a>
            <a href=""><img src="images\tjkc13.png" alt=""></a>
        </div>
        <div>
            <a href="">
                <h4>PHP如何去除数组中的空值？（图文+视频></h4>
                <span>发布日期：<time pubdate>2018-10-9</time></span>
            </a>
             <a href=""><img src="images\tjkc13.png" alt=""></a>
        </div>
        <a href="">更多内容</a>
    </section>
    <h3>最新博文</h3>
    <section class="section5">
        <div>
            <a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
            <time>2019-11-07</time>
        </div>
        <div>
            <a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
            <time>2019-11-07</time>
        </div>
        <div>
            <a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
            <time>2019-11-07</time>
        </div>
        <div>
            <a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
            <time>2019-11-07</time>
        </div>
        <div>
            <a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
            <time>2019-11-07</time>
        </div>
        <a href="">更多内容</a>
    </section>
    <h3>最新问答</h3>
    <section class="section5">
        <div>
            <a href=""><h4>在金沙网站玩AG视讯赢了不给有什么解决办法？</h4></a>
            <time>2019-11-07</time>
        </div>
        <div>
            <a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
            <time>2019-11-07</time>
        </div>
        <div>
            <a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
            <time>2019-11-07</time>
        </div>
        <div>
            <a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
            <time>2019-11-07</time>
        </div>
        <div>
            <a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
            <time>2019-11-07</time>
        </div>
        <a href="">更多内容</a>
    </section>
</article>
</main>
<footer>
    <a href="" class="nav1">
        <img src="images\tjkc5.png" alt="">
        <span>首页</span>
    </a>
    <a href="" class="nav2">
        <img src="images\tjkc6.png" alt="">
        <span>视频</span>
    </a>
    <a href="" class="nav3">
        <img src="images\tjkc7.png" alt="">
        <span>社区</span>
    </a>
    <a href="" class="nav4">
        <img src="images\tjkc8.png" alt="">
        <span>我的</span>
    </a>
</footer>
</body>
</html>

运行实例 »

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

实例：

(1).png

手稿：

微信图片_20191110221625.jpg

微信图片_201911102216251.jpg


 

上一条：媒体查询简介与Flex实战--php培训9期线上班下一条：弹性盒子布局之弹性容器 - PHP第九期培训线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多