第8章 Flex弹性布局基础-2019年09月09日20时00分 - 前端开发作业

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 第8章 Flex弹性布局基础-2019年09月09日20时00分

博主信息

博文 34

粉丝 0

访问量 27724

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="http://blog.buimo.com/demo/phpcn/static/css/init.css">
    <link rel="stylesheet" href="http://blog.buimo.com/demo/phpcn/static/css/style.css">
    <title>php中文网手机端-首页</title>
</head>

<body>
    <!--布局原则: 宽宽自适应, 高度是固定-->
    <!--固定定位: 顶部-->
    <div class="top">
        <img src="http://blog.buimo.com/demo/phpcn/static/images/user-pic.jpeg" alt="">
        <div class="logo">
            <img src="http://blog.buimo.com/demo/phpcn/static/images/logo.png" alt="">
        </div>
        <img src="http://blog.buimo.com/demo/phpcn/static/images/user-nav.jpg" alt="">
    </div>

    <!--banner轮播图,这里用图片暂时代替-->
    <div class="banner">
        <img src="http://blog.buimo.com/demo/phpcn/static/images/banner.jpg" alt="">
    </div>

    <!--导航区-->
    <div class="nav">
        <ul>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/html.png" alt=""><br>HTML/CSS</a>
            </li>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/JavaScript.png" alt=""><br>JavaScript</a>
            </li>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/code.png" alt=""><br>服务端</a>
            </li>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/sql.png" alt=""><br>数据库</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/app.png" alt=""><br>移动端</a>
            </li>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/manual.png" alt=""><br>手册</a>
            </li>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/tool2.png" alt=""><br>工具</a>
            </li>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/live.png" alt=""><br>直播</a>
            </li>
        </ul>
    </div>

    <!--课程区-->
    <h3>推荐课程</h3>
    <div class="courses">
        <ul>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/tjkc1.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/tjkc2.jpg" alt=""></a>
            </li>
        </ul>

        <div>
            <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">CI框架30分钟极速入门</a>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/tjkc4.jpg" alt=""></a>
            <p>
                <a href="">2018前端入门_HTML5</a>
                <br>
                <span>初级</span><span>210066次播放</span>
            </p>
        </div>
    </div>

    <h3>最新更新</h3>
    <div class="new-courses">
        <div class="course">
            <div class="course-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/z1.jpg" alt=""></a>
            </div>
            <div class="course-info">
                <a href="">Laravel 5.8 中文文档手册</a>
                <div class="course-main">
                    <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>
                    <span>中级</span><span>7286次播放</span>
                </div>
            </div>
        </div>

        <div class="course">
            <div class="course-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/z2.jpg" alt=""></a>
            </div>
            <div class="course-info">
                <a href="">JavaScript极速入门</a>
                <div class="course-main">
                    <p>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了，让你学习0压力，适合新手观看学习......</p>
                    <span>初级</span><span>7093次播放</span>
                </div>
            </div>
        </div>

        <div class="course">
            <div class="course-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/z3.jpg" alt=""></a>
            </div>
            <div class="course-info">
                <a href="">第七期_直播体验课</a>
                <div class="course-main">
                    <p>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广大PHP开发爱好者，了解本期的课程，特安排了直播开放课，感兴趣的小伙伴不要错过哟！ 晚 20:00-22:00直播 ，报名qq：88526（猪哥）。七期线上班详情：http://www.php.cn/k.html</p>
                    <span>初级</span><span>6671次播放</span>
                </div>
            </div>
        </div>

        <div class="course">
            <div class="course-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/z4.jpg" alt=""></a>
            </div>
            <div class="course-info">
                <a href="">CSS3 极速入门</a>
                <div class="course-main">
                    <p>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们再来学习本章节的css，将会获得更好的学习体验。课程内容非常有节奏的安排，知识点简单明了，让你从头到尾学习毫无压力……快来学习吧……</p>
                    <span>初级</span><span>6630次播放</span>
                </div>
            </div>
        </div>

        <div class="course">
            <div class="course-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/z5.jpg" alt=""></a>
            </div>
            <div class="course-info">
                <a href="">HTML5 极速入门</a>
                <div class="course-main">
                    <p>在本套课程中，你将学习如何使用 HTML 来创建站点，完成静态网页布局，非常适合HTML5零基础入门，整个轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力！</p>
                    <span>初级</span><span>5602次播放</span>
                </div>
            </div>
        </div>

        <div class="course">
            <div class="course-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/z6.jpg" alt=""></a>
            </div>
            <div class="course-info">
                <a href="">nodejs开发基础教程</a>
                <div class="course-main">
                    <p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。Node.js 使JavaScript 可以在浏览器之外上运行。非常适合前端人员想学习后端技术的同学。</p>
                    <span>初级</span><span>4856次播放</span>
                </div>
            </div>
        </div>
    </div>

    <h3>最新文章</h3>
    <div class="new-article">
        <div class="article">
            <div class="article-info">
                <a href="">php自定义错误处理器</a>
                <br>
                <span>发布时间：2019-09-11</span>
            </div>
            <div class="article-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/w1.jpg" alt=""></a>
            </div>
        </div>

        <div class="article">
            <div class="article-info">
                <a href="">Composer简明教程</a>
                <br>
                <span>发布时间：2019-09-11</span>
            </div>
            <div class="article-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/w2.jpg" alt=""></a>
            </div>
        </div>

        <div class="article">
            <div class="article-info">
                <a href="">php字符串几个常用的操作函数</a>
                <br>
                <span>发布时间：2019-09-11</span>
            </div>
            <div class="article-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/w3.jpg" alt=""></a>
            </div>
        </div>

        <div class="article">
            <div class="article-info">
                <a href="">Sublime Text3 安装svn插件遇到的问题</a>
                <br>
                <span>发布时间：2019-09-11</span>
            </div>
            <div class="article-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/w4.jpg" alt=""></a>
            </div>
        </div>

        <div class="article">
            <div class="article-info">
                <a href="">如何解绑宝塔账号</a>
                <br>
                <span>发布时间：2019-09-11</span>
            </div>
            <div class="article-img">
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/images/w5.jpg" alt=""></a>
            </div>
        </div>

        <div class="article-more">
            <a href="">更多内容</a>
        </div>
    </div>

    <!-- 最新博文 -->
    <h3>最新博文</h3>
    <div class="new-blog">
        <div class="blog-info">
            <a href="">mysql查询时间戳和日期的转换</a>
            <span>2019-09-07</span>
        </div>

        <div class="blog-info">
            <a href="">小程序实现复制文本内容</a>
            <span>2019-09-06</span>
        </div>
        <div class="blog-info">
            <a href="">js获取url链接中的域名部分</a>
            <span>2019-09-07</span>
        </div>
        <div class="blog-info">
            <a href="">小程序实现头像图片裁剪</a>
            <span>2019-09-03</span>
        </div>
        <div class="blog-info">
            <a href="">《悦帮到家》小程序</a>
            <span>2019-09-03</span>
        </div>

        <div class="blog-more">
            <a href="">更多内容</a>
        </div>
    </div>

    <!-- 最新问答 -->
    <h3>最新问答</h3>
    <div class="new-wenda">
        <div class="wenda-info">
            <a href="">localhost打不开?</a>
            <span>2019-09-11</span>
        </div>

        <div class="wenda-info">
            <a href="">php之免费常用快递物流api查询接口的使用教程</a>
            <span>2019-09-10</span>
        </div>
        <div class="wenda-info">
            <a href="">控制台</a>
            <span>2019-09-10</span>
        </div>
        <div class="wenda-info">
            <a href="">为什么我播放不了</a>
            <span>2019-09-10</span>
        </div>
        <div class="wenda-info">
            <a href="">求免费的物流查询接口或者源码</a>
            <span>2019-09-10</span>
        </div>

        <div class="wenda-more">
            <a href="">更多内容</a>
        </div>
    </div>


    <!--底部-->
    <div class="clear"></div>
    <div class="footer">
        <ul>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/font-icon/zhuye.png" alt=""><br><span>主页</span></a>
            </li>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/font-icon/video.png" alt=""><br><span>视频</span></a>
            </li>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/font-icon/luntan.png" alt=""><br><span>社区</span></a>
            </li>
            <li>
                <a href=""><img src="http://blog.buimo.com/demo/phpcn/static/font-icon/geren.png" alt=""><br><span>我的</span></a>
            </li>
        </ul>
    </div>
</body>

</html>

运行实例 »

下面是init.css 文件的代码：

实例

body {
    min-width: 320px;
    max-width: 768px;
    margin: 0 auto;
    background: #edeff0;
    overflow-y: initial;
    position: relative;

    /*不要出现水平滚动条*/
    overflow-x: hidden;
    /*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/
    -webkit-tap-highlight-color: transparent;
}

运行实例 »

下面是style.css 文件的代码：

实例

.top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 42px;
    background-color: #444444;
    min-width: 320px;
    max-width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.top {
    display: flex;
}

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

.top img:first-of-type {
    border-radius: 50%;
    margin-left: 5px;
}

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

.top .logo img {
    width: 94px;
    height: 45px;
    margin-top: -1px;
}


/*轮播图*/

.banner {
    display: flex;
}

.banner img {
    width: 100%;
    height: 160px;
}


/*导航区*/

.nav {
    height: 170px;
    background-color: white;
    box-sizing: border-box;
}

.nav ul {
    margin: 0;
    padding: 6px;
}

.nav ul li {
    list-style-type: none;
    text-align: center;
    height: 75px;
}

.nav ul li img {
    width: 45px;
    height: 45px;
}

.nav ul li a {
    text-align: center;
    color: gray;
    text-decoration: none;
}

.nav ul {
    display: flex;
}

.nav ul li {
    flex: 1;
}


/*推荐课程区*/

h3 {
    color: gray;
    display: block;
    margin-top: 30px;
}

.courses {
    height: 326px;
    color: gray;
}

.courses ul {
    margin: 0;
    padding: 0;
    list-style: none;
    /*flex布局*/
    display: flex;
}

.courses ul li {
    padding: 5px;
}

.courses ul img {
    width: 100%;
    height: 90px;
}

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

.courses div img {
    width: 100%;
    height: 90px;
}

.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 2px;
}

.courses div p span:last-of-type {
    font-size: 0.7rem;
}


/* 最新课程css */

.new-courses .course {
    display: flex;
    overflow: hidden;
    justify-content: flex-start;
    width: 100%;
    height: 110px;
    background-color: white;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
}

.new-courses .course .course-img {
    flex: 0.45;
    width: 100%;
    height: 90px;
    min-width: 0;
}

.new-courses .course .course-img img {
    width: 100%;
    height: 90px;
}

.new-courses .course .course-info {
    flex: 0.55;
    min-width: 0;
    height: 90px;
    width: 100%;
    margin-left: 15px;
}

.new-courses .course .course-info .course-main {
    position: relative;
}

.new-courses .course .course-info .course-main p {
    font-size: 0.7rem;
    color: gray;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.new-courses .course .course-info a {
    text-decoration: none;
    color: gray;
}

.new-courses .course .course-info .course-main span:first-of-type {
    font-size: 0.8rem;
    background-color: black;
    color: white;
    border-radius: 30%;
    padding: 0 2px;
}

.new-courses .course .course-info .course-main span:last-of-type {
    font-size: 0.7rem;
    color: gray;
    position: absolute;
    right: 10px;
    bottom: 1px;
}


/* 最新文章CSS */

.new-article {}

.new-article .article {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 90px;
    background-color: white;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
}

.new-article .article .article-info {
    flex: 0.65;
    margin-left: 10px;
}

.new-article .article .article-info a {
    font-size: 14px;
    font-weight: bold;
    color: #888;
    text-decoration: none;
    display: block;
    /* margin-bottom: 5px; */
    padding-top: 5px;
}

.new-article .article .article-info span {
    font-size: 14px;
    color: #888;
    display: block;
    margin-top: -15px;
}

.new-article .article .article-img {
    flex: 0.35;
}

.new-article .article .article-img img {
    width: 100%;
    height: 70px;
}

.new-article .article-more,
.new-blog .blog-more,
.new-wenda .wenda-more {
    margin-top: 10px;
    width: 100%;
}

.new-article .article-more a,
.new-blog .blog-more a,
.new-wenda .wenda-more a {
    display: block;
    background-color: white;
    color: #888;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    width: 100%;
    height: 30px;
    line-height: 30px;
}


/* 最新博文及最新问答CSS */

.new-blog .blog-info,
.new-wenda .wenda-info {
    background-color: white;
    position: relative;
    width: 100%;
    height: 45px;
    margin-top: 10px;
}

.new-blog .blog-info a,
.new-wenda .wenda-info a {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #888;
    display: block;
    margin-left: 10px;
    padding: 10px 0;
}

.new-blog .blog-info span,
.new-wenda .wenda-info span {
    font-size: 14px;
    color: #888;
    display: block;
    position: absolute;
    right: 10px;
    bottom: 15px;
}


/*底部样式*/

body {
    /* height: 4000px; */
}


/* 使得最底部的内容不会被footer遮盖住 */

.clear {
    width: 100%;
    height: 70px;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 42px;
    min-width: 320px;
    max-width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-top: 1px solid #ccc;
    background-color: #eee;
    padding: 10px 0;
}

.footer ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

.footer ul li img {
    width: 20px;
    height: 20px;
}

.footer ul li a {
    color: gray;
    text-decoration: none;
    font-size: 14px;
}

.footer ul li {
    flex: 1;
}

运行实例 »

运行后效果如下图所示：

php中文网手机端-首页.png

总结：

手机端页面需要清楚的知道各设备匹配的宽度，需要对body设置最小和最大的宽度，还要清楚的知道css中transform如何去使用，在自适应的页面中，我们只需要对高度进行固定，宽度设置百分比即可。flex布局中，对图片这种标签，需要设置一个最小的宽度，不然会对它进行挤压。对于文本过多可以使用overflow: hidden;white-space: nowrap;text-overflow: ellipsis;进行截取。

批改状态：合格

老师批语：前端就是比较麻烦, 要记得多, 没办法,发量越来越少