Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex布局实战
Blogger Information
Blog 9
fans 0
comment 0
visits 6190
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布局实战
橙汁的博客
Original
728 people have browsed it

CSS

html,
body {
    max-width: 768px;
    min-width: 320px;
    margin: 0 auto;
    background-color: #e5e5e5
}

.w100 {
    width: 100%;
}

.m {
    margin: 0 auto;
}

.h3 {
    line-height: 34px;
    padding: 22px 0 12px;
    font-size: 18px;
    color: #888;
    font-weight: bold;
}

.padding-left-0 {
    padding-left: 0 !important;
}

a.more {
    line-height: 1em;
    text-align: center;
    background-color: #fff;
    padding: 7px 0;
    display: block
}


/* top */

.top {
    height: 45px;
    background-color: #2d353c;
    display: flex;
}

.top a:first-of-type,
.top a:last-of-type,
.top a:first-of-type img,
.top a:last-of-type img {
    width: 25px;
    height: 25px;
}

.top a:first-of-type,
.top a:last-of-type {
    margin: 9px 5px 0;
}

.top a:first-of-type img {
    border-radius: 50%;
}

.top a.logo {
    text-align: center;
    flex: 1;
}

.top a.logo img {
    height: 45px;
}


/* banner */

.banner {
    display: flex;
}

.banner img {
    width: 100%;
    display: block;
}


/* nav */

.nav {
    display: flex;
    background-color: #fff;
    padding: 10px 0;
}

.nav li {
    flex: 1;
    text-align: center;
}

.nav li img {
    width: 50%;
    margin-bottom: 6px;
}

.nav li a {
    color: #888;
    font-weight: 600;
}


/* course */

.course {
    display: flex;
    margin-bottom: 14px;
}

.course a {
    flex: 1;
}

.course a img {
    width: 100%;
}

.course a:first-of-type {
    padding-right: 5px;
}

.course a:last-of-type {
    padding-left: 5px;
}


/* course-list */

.course-list li {
    padding: 10px;
    background-color: #fff;
    margin-bottom: 10px;
}

.course-list li a {
    display: flex;
}

.course-list li a span {
    flex: .4;
}

.course-list li a img {
    width: 100%;
    display: block;
}

.course-list li a h2 {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888;
    font-size: 16px;
    overflow: hidden;
    padding-bottom: 6px;
}

.course-list .course-list-right {
    flex: .6;
    padding-left: 14px;
    overflow: hidden;
}

.course-list-right p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
    color: #888;
}

.course-list-right-info {
    padding: 4px 0;
    overflow: hidden;
}

.course-list-right-info span {
    border-radius: 5px;
    background-color: #595757;
    color: #fff;
    font-size: 12px;
    padding: 4px;
}

.course-list-right-info em {
    font-size: 12px;
    color: #888;
    padding: 4px;
}

.index-article-list a {
    padding: 8px 5px;
    margin-bottom: 8px;
    display: flex;
    background-color: #fff;
    color: #888;
}

.index-article-list h2 {
    flex: .7;
    font-size: 14px;
    line-height: 1em;
}

.index-article-list span {
    flex: .3;
    line-height: 1em;
    padding-left: 5px;
    text-align: right
}

HTML

<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">
    <title>Document</title>
    <link rel="stylesheet" href="static/style/reset.css">
    <link rel="stylesheet" href="static/style/css.css">
</head>

<body>
    <!-- top -->
    <div class="w100 top ">
        <a href=""><img src="https://m.php.cn/static/images/user_avatar.jpg" alt=""></a>
        <a class="logo" href=""><img src="https://m.php.cn/static/images/logo.png" alt=""></a>
        <a href=""><img src="static/images/user-nav.jpg" alt=""></a>
    </div>
    <!-- banner -->
    <div class="w100 banner">
        <img src="https://m.php.cn/static/images/ico/1.jpg" alt="">
    </div>
    <!-- nav -->
    <ul class="nav">
        <li>
            <a href=""><img src="https://m.php.cn/static/images/ico/html.png" alt=""><br>HTML/CSS</a>
        </li>
        <li>
            <a href=""><img src="https://m.php.cn/static/images/ico/JavaScript.png" alt=""><br>JavaScript</a>
        </li>
        <li>
            <a href=""><img src="https://m.php.cn/static/images/ico/code.png" alt=""><br>服务端</a>
        </li>
        <li>
            <a href=""><img src="https://m.php.cn/static/images/ico/sql.png" alt=""><br>数据库</a>
        </li>
    </ul>
    <ul class="nav">
        <li>
            <a href=""><img src="https://m.php.cn/static/images/ico/app.png" alt=""><br>移动端</a>
        </li>
        <li>
            <a href=""><img src="https://m.php.cn/static/images/ico/manual.png" alt=""><br>手册</a>
        </li>
        <li>
            <a href=""><img src="https://m.php.cn/static/images/ico/tool2.png" alt=""><br>工具</a>
        </li>
        <li>
            <a href=""><img src="https://m.php.cn/static/images/ico/live.png" alt=""><br>直播</a>
        </li>
    </ul>
    <!-- title -->
    <h3 class="h3">推荐课程</h3>
    <div class="course">
        <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt=""></a>
        <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt=""></a>
    </div>
    <div class="course-list">
        <li>
            <a href="">
                <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span>
                <div class="course-list-right">
                    <h2>CI框架30分钟极速入门</h2>
                    <div class="course-list-right-info">
                        <span>中级</span>
                        <em>49900次播放</em>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="">
                <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span>
                <div class="course-list-right">
                    <h2>CI框架30分钟极速入门</h2>
                    <div class="course-list-right-info">
                        <span>中级</span>
                        <em>49900次播放</em>
                    </div>
                </div>
            </a>
        </li>
    </div>
    <!-- title -->
    <h3 class="h3">最新更新</h3>
    <div class="course-list">
        <li>
            <a href="">
                <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span>
                <div class="course-list-right">
                    <h2>CI框架30分钟极速入门</h2>
                    <p>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16
                        缓存驱动规范等等。
                    </p>
                    <div class="course-list-right-info">
                        <span class="fl">中级</span>
                        <em class="fr">49900次播放</em>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="">
                <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span>
                <div class="course-list-right">
                    <h2>CI框架30分钟极速入门</h2>
                    <p>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16
                        缓存驱动规范等等。
                    </p>
                    <div class="course-list-right-info">
                        <span class="fl">中级</span>
                        <em class="fr">49900次播放</em>
                    </div>
                </div>
            </a>
        </li>
    </div>
    <!-- title -->
    <h3 class="h3">最新文章</h3>
    <div class="course-list">
        <li>
            <a href="">
                <div class="course-list-right padding-left-0">
                    <h2>CI框架30分钟极速入门</h2>
                    <div class="course-list-right-info">
                        <em>发布时间：2019-07-29</em>
                    </div>
                </div>
                <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span>
            </a>
        </li>
        <li>
            <a href="">
                <div class="course-list-right padding-left-0">
                    <h2>CI框架30分钟极速入门</h2>
                    <div class="course-list-right-info">
                        <em>发布时间：2019-07-29</em>
                    </div>
                </div>
                <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span>
            </a>
        </li>
    </div>
    <a class="more" href="">更多内容</a>
    <!-- title -->
    <h3 class="h3">最新文章</h3>
    <div class="index-article-list">
        <a href="">
            <h2>mysql查询时间戳和日期的转换</h2>
            <span>2019-09-07</span>
        </a>
        <a href="">
            <h2>mysql查询时间戳和日期的转换</h2>
            <span>2019-09-07</span>
        </a>
        <a href="">
            <h2>mysql查询时间戳和日期的转换</h2>
            <span>2019-09-07</span>
        </a>
    </div>
    <a class="more" href="">更多内容</a>
    <!-- title -->
    <h3 class="h3">最新问答</h3>
    <div class="index-article-list">
        <a href="">
            <h2>mysql查询时间戳和日期的转换</h2>
            <span>2019-09-07</span>
        </a>
        <a href="">
            <h2>mysql查询时间戳和日期的转换</h2>
            <span>2019-09-07</span>
        </a>
        <a href="">
            <h2>mysql查询时间戳和日期的转换</h2>
            <span>2019-09-07</span>
        </a>
    </div>
    <a class="more" href="">更多内容</a>
</body>

20190910_看图王.jpg

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