慕课网5-2编程练习：flex布局制作卡片布局案例

小伙伴们，学习了卡片布局，接下来我们根据效果图，也写出一个卡片布局的页面吧!

效果图如下：

任务

1、主体内容的卡片一行只能显示两个。

2、卡片与卡片之间的距离相等，行与行之间的距离也相等。

3、卡片的主体内容居中显示。

4、当鼠标放在按钮上时，按钮的文字颜色发生变化。

参考代码：

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title></title>

    <style>

        /* 头部导航 */

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        #head-nav {

            display: flex;

            justify-content: space-around;

            align-items: center;

            flex-wrap: nowrap;

            width: 100%;

            height: 75px;

            background-color: black;

            color: white;

        }

        .logo {

            max-height: 75px;

        }

        .logo img {

            max-height: 75px;

        }

        .nav {

            display: flex;

            flex-wrap: nowrap;

        }

        .nav li {

            margin: 0 2em;

        }

        .login input {

            width: auto;

            height: auto;

            background: orange;

            color: white;

            border: 1px solid orange;

            padding: 0.5em 1em;

            border-radius: 0.5em;

            outline: none;

        }

        /* card布局 */

        #main {

            display: flex;

            flex-wrap: wrap;

            justify-content: space-around;

        }

        .section {

            display: flex;

            /* direction: row; */

            /* flex-wrap: nowrap; */

            align-items: center;

            justify-content: space-around;

            margin-top: 10px;

            padding: 10px 0;

            border: 1px solid rgb(173, 216, 230);

            background: rgb(173, 216, 230);

            width: 46%;

        }

        .section .box {

            /* width: 40%; */

            display: flex;

            line-height: 1.8;

            flex-direction: column;

            align-content: space-around;

        }

        .shopping {

            width: auto;

            height: auto;

            background: orange;

            color: white;

            border: 1px solid orange;

            padding: 0.5em 1em;

            border-radius: 0.5em;

            outline: none;

        }

    </style>

</head>

<body>

    <header id="head-nav">

        <div class="logo">

            <img src="http://climg.mukewang.com/59197ab000014f1503000100.jpg" alt="">

        </div>

        <ul class="nav">

            <li>课程</li>

            <li>路径</li>

            <li>猿问</li>

            <li>手记</li>

        </ul>

        <div class="login">

            <input type="button" value="登录">

            <input type="button" value="注册">

        </div>

    </header>

    <!-- 主体内容 -->

    <section id="main">

        <!-- 前端小白入门手册 -->

        <div class="section">

            <div class="box">

                <p>《前端小白入门手册》</p>

                <div>适用人群：没有任何前端基础的小白</div>

                <div>费用：￥599</div>

            </div>

            <div class="shopping">

                <div class="btn">加入购物车</div>

            </div>

        </div>

        <!-- HTML5中CSS3实现动态网页 -->

        <div class="section">

            <div class="box">

                <p>《前端小白入门手册》</p>

                <div>适用人群：没有任何前端基础的小白</div>

                <div>费用：￥599</div>

            </div>

            <div class="shopping">

                <div class="btn">加入购物车</div>

            </div>

        </div>

        <!-- html5网页开发 -->

        <div class="section">

            <div class="box">

                <p>《前端小白入门手册》</p>

                <div>适用人群：没有任何前端基础的小白</div>

                <div>费用：￥599</div>

            </div>

            <div class="shopping">

                <div class="btn">加入购物车</div>

            </div>

        </div>

        <!-- html5网页开发 -->

        <div class="section">

            <div class="box">

                <p>《前端小白入门手册》</p>

                <div>适用人群：没有任何前端基础的小白</div>

                <div>费用：￥599</div>

            </div>

            <div class="shopping">

                <div class="btn">加入购物车</div>

            </div>

        </div>

    </section>

</body>

</html>

慕课网5-2编程练习：flex布局制作卡片布局案例的更多相关文章

  1. 技术胖Flutter第三季-18布局CardWidget 卡片布局组件

    技术胖Flutter第三季-18布局CardWidget 卡片布局组件 博客地址: https://jspang.com/post/flutter3.html#toc-420 最外面是Card布局,里 ...

  2. 慕课网 javascript深入浅出编程练习

    任务 请在index.html文件中,编写arraysSimilar函数,实现判断传入的两个数组是否相似.具体需求: 1. 数组中的成员类型相同,顺序可以不同.例如[1, true] 与 [false ...

  3. newbee-mall开源项目被慕课网拿去做课程，然后我毫不知情，这又是什么骚操作？

    万万没想到,这种事情会发生在我身上. 之前写过<开源囧事>系列而且已经写了四篇,四次开源囧事如下: <开源囧事(一)捅娄子了,写个bug被国家信息安全漏洞共享平台抓到了?> & ...

  4. 三十二、Java图形化界面设计——布局管理器之CardLayout（卡片布局）

    摘自 http://blog.csdn.net/liujun13579/article/details/7773945 三十二.Java图形化界面设计--布局管理器之CardLayout(卡片布局) ...

  5. 慕课网3-13编程练习：采用flex弹性布局制作页面主导航

    小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图. 要求: 1.logo.导航项.登录注册按钮这三项在水平和垂直方向上都对齐,而且他们之间的距离也相等. 2.导 ...

  6. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  7. 【JS学习】慕课网8-17编程练习 网页的返回与跳转

    编程练习 制作一个跳转提示页面: 要求: 1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页. 2. 如果点击“返回”按钮则返回前一个页面. 代码如下: 需要注意的是 ...

  8. 慕课网4-2 编程练习：jQuery祖先后代选择器小案例

    4-2 编程练习 结合所学的祖先后代选择器,实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值 ...

  9. JavaScript进阶--慕课网学习笔记

                         JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...

随机推荐

  1. json三种类型小笔记

    JSON基本语法与图例 Object(对象类型)用{ }包含一系列无序的key–Value键值对表示,其中Key和Value之间用冒号分割,每个key-value之间用逗号分割. Array(数组类型 ...

  2. Java日志框架-Logback手册中文版以及官方配置文档教程

    Logback手册中文版:(链接: https://pan.baidu.com/s/1bpMyasR 密码: 6u5c),虽然版本有点旧,但是大体意思差不多,先用中文版了解个大概,然后一切最新的配置以 ...

  3. SQL2008安装时，“provider: 命名管道提供程序, error: 40 - 无法打开到 SQL Server 的连接) (.Net SqlClient Data Provider)” 错误的解决方案

    错误提示: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接. (provide ...

  4. 分布式RPC框架性能大比拼

    https://github.com/grpc/grpc http://colobu.com/2016/09/05/benchmarks-of-popular-rpc-frameworks/ http ...

  5. IOS开发 AFN和ASI

    做项目有一段时间了,项目过程中处理网络请求难免的,而对于选择第三方来处理网络请求肯定是个明智的选择! AFNetworking和ASIHTTPRequest   这两个第三方该如何选择       我 ...

  6. Meteor Blaze

    Blaze是Meteor 软件包用于构建现场反应模板. Render方法 这种方法被用于绘制模板到DOM.首先,我们将创建 myNewTemplate 之后渲染. 我们增加 myContainer 这 ...

  7. [RxJS] `add` Inner Subscriptions to Outer Subscribers to `unsubscribe` in RxJS

    When subscribers create new "inner" sources and subscriptions, you run the risk of losing ...

  8. struts2 java.io.FileNotFoundException: http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd

    xxx-validation.xml 文件里  java.io.FileNotFoundException: http://www.opensymphony.com/xwork/xwork-valid ...

  9. Delphi全角转半角

    function ToDBC( input :String):WideString;varc:WideString;i:Integer;beginc := input;for i:=1 to Leng ...

  10. 加载之ready和onload

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 真不知道这个标题该怎么取,暂时就先凑 ...