简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 媒体查询简介与Flex实战-11月7号作业
Blogger Information
Blog 16
fans 0
comment 0
visits 12376
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
媒体查询简介与Flex实战-11月7号作业
wenbin0209
Original
524 people have browsed it

实例

<!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>


    <!--banner轮播图,这里用图片暂时代替-->
    <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 class="newupdate">
            <h3>最新更新</h3>
            <div class="update">
                <a href=""><img src="static/images/5db2b53c67bca626.jpg" alt=""></a>
                <span>
                    <a href="">2019python自学视频</a>
                    <p>本课程适合想从零开始学习 Python 编程语言的开发人</p>
                    <span>
                        <i>初级</i>
                        <span>6997次播放</span>
                    </span>
                </span>
            </div>
            <div class="update">
                <a href=""><img src="static/images/5da7e9b7895ed229.jpg" alt=""></a>
                <span>
                    <a href="">2019python自学视频</a>
                    <p>本课程适合想从零开始学习 Python 编程语言的开发人</p>
                    <span>
                        <i>初级</i>
                        <span>6997次播放</span>
                    </span>
                </span>
            </div>
            <div class="update">
                <a href=""><img src="static/images/5da51b8ff1224244.png" alt=""></a>
                <span>
                    <a href="">2019python自学视频</a>
                    <p>本课程适合想从零开始学习 Python 编程语言的开发人</p>
                    <span>
                        <i>初级</i>
                        <span>6997次播放</span>
                    </span>
                </span>
            </div>
            <div class="update">
                <a href=""><img src="static/images/5d9ec555ee63b448.png" alt=""></a>
                <span>
                    <a href="">2019python自学视频</a>
                    <p>本课程适合想从零开始学习 Python 编程语言的开发人</p>
                    <span>
                        <i>初级</i>
                        <span>6997次播放</span>
                    </span>
                </span>
            </div>
            <div class="update">
                <a href=""><img src="static/images/5da16c1d7f658408.jpg" alt=""></a>
                <span>
                    <a href="">2019python自学视频</a>
                    <p>本课程适合想从零开始学习 Python 编程语言的开发人</p>
                    <span>
                        <i>初级</i>
                        <span>6997次播放</span>
                    </span>
                </span>
            </div>
            <div class="update">
                <a href=""><img src="static/images/5da6a50535529903.jpg" alt=""></a>
                <span>
                    <a href="">2019python自学视频</a>
                    <p>本课程适合想从零开始学习 Python 编程语言的开发人</p>
                    <span>
                        <i>初级</i>
                        <span>6997次播放</span>
                    </span>
                </span>
            </div>
        </article>

        <!--最新文章-->
        <!--这个模块与上面的最新课程几乎是一样的, 只是左右顺序交换了一个,样式略有不同-->

        <article class="newarticle">
            <h3>最新文章</h3>
            <div class="article">
                <a href="">
                    <span>
                        <h2>java中常用的数据类型有哪些</h2>
                        <span>发布时间：2019-12-02</span>
                    </span>
                    <img src="static/images/5de4c847c3fec232.jpg" alt="">
                </a>
            </div>
            <div class="article">
                <a href="">
                    <span>
                        <h2>java中常用的数据类型有哪些</h2>
                        <span>发布时间：2019-12-02</span>
                    </span>
                    <img src="static/images/5de4c847c3fec232.jpg" alt="">
                </a>
            </div>
            <div class="article">
                <a href="">
                    <span>
                        <h2>java中常用的数据类型有哪些</h2>
                        <span>发布时间：2019-12-02</span>
                    </span>
                    <img src="static/images/5de4c847c3fec232.jpg" alt="">
                </a>
            </div>
            <div class="article">
                <a href="">
                    <span>
                        <h2>java中常用的数据类型有哪些</h2>
                        <span>发布时间：2019-12-02</span>
                    </span>
                    <img src="static/images/5de4c847c3fec232.jpg" alt="">
                </a>
            </div>
            <div class="article">
                <a href="">
                    <span>
                        <h2>java中常用的数据类型有哪些</h2>
                        <span>发布时间：2019-12-02</span>
                    </span>
                    <img src="static/images/5de4c847c3fec232.jpg" alt="">
                </a>
            </div>
            <a href="">更多内容</a>
        </article>
        <!-- 最新博文,最新问答,做为作业,交给大家课后完成 -->
        <!--最新博文-->
        <article class="blog">
            <h3>最新博文</h3>
            <div>
                <a href="">
                    <h2>1129_抽象类和接口 第25课</h2>
                    <span>2019年12月03号</span>
                </a>
            </div>
            <div>
                <a href="">
                    <h2>queryList可以下载图片吗？</h2>
                    <span>2019年12月03号</span>
                </a>
            </div>
            <div>
                <a href="">
                    <h2>demo1的id限制最小1位，输入1，会和demo3 isOk冲突吗？</h2>
                    <span>2019年12月03号</span>
                </a>
            </div>
            <div>
                <a href="">
                    <h2>1129_抽象类和接口 第25课</h2>
                    <span>2019年12月03号</span>
                </a>
            </div>
                <a href="">更多内容</a>
        </article>
        <article class="blog">
            <h3>最新问答</h3>
            <div>
                <a href="">
                    <h2>默认安装的PHP版本太低了啊怎么换成安装php7.1版本以上的</h2>
                    <span>2019-12-03</span>
                </a>
            </div>
            <div>
                <a href="">
                    <h2>默认安装的PHP版本太低了啊怎么换成安装php7.1版本以上的</h2>
                    <span>2019-12-03</span>
                </a>
            </div>
            <div>
                <a href="">
                    <h2>默认安装的PHP版本太低了啊怎么换成安装php7.1版本以上的</h2>
                    <span>2019-12-03</span>
                </a>
            </div>
            <div>
                <a href="">
                    <h2>默认安装的PHP版本太低了啊怎么换成安装php7.1版本以上的</h2>
                    <span>2019-12-03</span>
                </a>
            </div>
            <a href="">更多内容</a>
        </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>

运行实例 »

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

实例

/*************** 头部样式 ***************/
header {
    /*固定定位*/
    position: fixed;
    top: 0;


    /*固定定位元素必须设置宽度与高度*/
    width: 100%;
    height: 42px;
    background: #444444;
    color: white;

    /*设置最小尺寸*/
    min-width: 320px;
    max-width: 768px;

    /*转为Flex容器,设置元素排列*/
    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%;
    /* 13px */

}

/*设置中间LOGO样式*/
header>img {
    width: 94px;
}



/*************** 轮播图设置 ***************/

.banner {
    display: flex;
    height: 200px;
}

/*************** 导航区 ***************/

nav {
    background-color: white;
    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>.recommend>section:first-of-type {
    display: flex;
    flex-flow: row nowrap;
}

/*每个课程图片平分全部空间*/
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-flow: column nowrap;
}

main>.recommend>section:last-of-type>div {
    background-color: #fff;
    margin: 5px;

    /*也转为弹性容器*/
    display: flex;
    flex-flow: row nowrap;
}
/* 图片宽高 */
main>.recommend>section:last-of-type>div img {
    width: 350px;
    height: 90px;
}

main>.recommend>section:last-of-type>div>span {
    display: flex;
    /*文本垂直排列*/
    flex-flow: column nowrap;
    margin-top: 5px;
    padding-left: 10px;
}

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

/* 最新更新 */

main .newupdate {
    display: flex;
    flex-flow: column nowrap;
    margin: 5px;
}

main .newupdate .update {
    display: flex;
    flex-flow: row nowrap;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 9px 0px;
}

main .newupdate .update >a img {
    width: 350px;
    height: 90px;
}
main .newupdate .update >span {
    display: flex;
    flex-flow: column nowrap;
    margin-left: 10px;
}

main .newupdate .update > span > span > span{
    float: right;
    font-size: smaller;
}

main .newupdate .update > span > span i {
    /* normal：默认正常样式 */
    font-style: normal;
    background-color: #333333;
    /* 圆角 */
    border-radius: 4px;
    color: #fff;
    /* smaller 小号字体 */
    font-size: smaller;
    padding: 0 5px;
}

/* 最新文章 */
.newarticle {
    display: flex;
    flex-flow: column nowrap;
}

.newarticle .article {
    background-color: #fff;
    padding: 0 9px 8px 9px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    margin-bottom: 20px;
}


.newarticle  .article  img{
    margin-top: 8px;
    width: 250px;
    height: 65px;
}
.newarticle  .article > a {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.newarticle  .article > a > span >h2 {
    margin-top: 3px;
    font-size: 14px;
}
.newarticle  .article > a > span >span {
    font-size: 12px;

}
.newarticle > a  {
    background-color: #fff;
    display: block;
    text-align: center;
    padding: 5px 0;
    font-size: 14px;
}

/*************** 最新博文 ***************/
.blog {
    display: flex;
    flex-flow: column nowrap;
}

.blog > div {
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    background: #fff;
    margin-bottom: 10px;
}

.blog > div > a {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.blog > div > a > h2  {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blog > div > a > span {
    font-size: 12px;
}
.blog > a {
    background-color: #fff;
    display: block;
    text-align: center;
    padding: 5px 0;
    font-size: 14px;
}
/*************** 最新问答 ***************/


/*底部*/

footer {
    /* 固定定位固定在底部 */
    position: fixed;
    bottom: 0;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    border-top: 1px solid #ccc;
}

/* footer中a标签转为弹性容器 */
footer  a {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-top: 5px;
}
/* 图片大小 */
footer > a img {
    width: 10%;
}
/* 字体大小 */
footer > a span {
    padding-top: 3px;
    font-size:12px ;
}


/*暂时将高度设置为2000px,让滚动条出来*/
body {
    height: 2000px;
}

main > article  > .gengduo > a {
    
}

运行实例 »

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


image.png

image.png


手写：

image.png



总结：

熟悉了flex布局的使用，了解了移动页面的布局



Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：flex是一项比较成熟的快速布局方案, 但未来应该是栅格的天下, 有空了解一下grid
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！