博客列表 >媒体查询简介与Flex实战-11月7号作业

媒体查询简介与Flex实战-11月7号作业

wenbin0209
wenbin0209原创
2019年12月11日 11:13:31523浏览

实例

<!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布局的使用,了解了移动页面的布局



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议