Flex布局实战/网格布局/媒体查询 19年09月10日

0910作业:

1.将php中文网移动端首页,未完成的部分:最新更新, 最新文章完成

部分代码

实例

   <!-- 最新更新 -->
    <h3>最新更新</h3>
    <div class="recently">
        <div>
            <a href=""><img src="static/images/zjgx1.jpg" alt=""></a>
            <p>
                <a href="">16天带你入门UI视频教程</a>
                <br>
                <span>包含PS工具的使用、UI设计基础、商业设计要素，《16天带你入门UI视频教程》</span>
                <br>
                <span>初级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/zjgx2.jpg" alt=""></a>
            <p>
                <a href="">Vue.js基础教程</a>
                <br>
                <span>欢迎朋友们加入Vue.js基础学习的行列，Vue是一套用于构建用户</span>
                <br>
                <span>中级</span><span>4292次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/zjgx3.jpg" alt=""></a>
            <p>
                <a href="">JavaScript极速入门</a>
                <br>
                <span>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、</span>
                <br>
                <span>中级</span><span>4292次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/zjgx4.jpg" alt=""></a>
            <p>
                <a href="">CSS3 极速入门</a>
                <br>
                <span>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程</span>
                <br>
                <span>中级</span><span>4292次播放</span>
            </p>
        </div>

通过定义.coures div的布局方式为 display: flex;，并设定好控件占用比例，通过CSS设定span的显示属性

.courses div a {

    text-decoration: none;

    color: gray;

    flex: 0.45;

}

.courses div p {

    flex: 0.55;

    margin-left: 15px;

}

.courses div p span:first-of-type {

    font-size: 0.8rem;

    background-color: black;

    color: white;

    border-radius: 30%;

    padding: 0 3px;

}

.courses div p span:last-of-type {

    font-size: 0.7rem;

}

2课外作业

自己找一个优秀的手机页面, 用已掌握Flex技术进行仿站,只写首页即可

因为自己做医疗IT,仿了一个***的手机页面

实例

/*头部LOGO区用了float实现*/
body {
    height: 1200px;
}

.header {
    height: 200px;
    background-image: url(../images/banner1.jpg);
    background-size: cover;
}

.header .nav-ico {
    display: none;
}

@media (max-width: 768px) {
    .header .nav-ico {
        display: block;
        padding-top: 10px;
        padding-right: 10px;
    }
    .header .nav-ico .zy {
        width: 30px;
        height: 30px;
        float: right;
    }
}

.header .logo {
    padding-top: 15px;
    padding-left: 10px;
    float: left;
    width: 80%;
}

/*新闻区和底部样式用了flex布局实现*/

/* 最近更新 */

.news {
    height: 455px;
    color: gray;
}

.news div {
    background-color: white;
    padding: 5px;
    margin-top: 10px;
    height: 100px;
    /* flex布局 */
    display: flex;
    justify-content: flex-start;
}

.news div img {
    width: 100%;
    height: 95px;
}

.news div a {
    text-decoration: none;
    color: green;
    flex: 0.5;
}

.news div p:first-of-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0.5;
    margin-top: 0;
    margin-left: 10px;
}

.news div p span:first-of-type {
    white-space: warp;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
}

.news div p span:nth-of-type(2) {
    font-size: 0.8rem;
    background-color: black;
    color: white;
    border-radius: 30%;
    padding: 0 3px;
}


/*底部样式*/

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 80px;
    min-width: 320px;
    max-width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: black;
}

.footer p {
    color: #9c9c9c;
    font-size: 0.8rem;
}