慕课网5-2编程练习：flex布局制作卡片布局案例
慕课网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布局制作卡片布局案例的更多相关文章
- 技术胖Flutter第三季-18布局CardWidget 卡片布局组件
技术胖Flutter第三季-18布局CardWidget 卡片布局组件 博客地址: https://jspang.com/post/flutter3.html#toc-420 最外面是Card布局,里 ...
- 慕课网 javascript深入浅出编程练习
任务 请在index.html文件中,编写arraysSimilar函数,实现判断传入的两个数组是否相似.具体需求: 1. 数组中的成员类型相同,顺序可以不同.例如[1, true] 与 [false ...
- newbee-mall开源项目被慕课网拿去做课程，然后我毫不知情，这又是什么骚操作？
万万没想到,这种事情会发生在我身上. 之前写过<开源囧事>系列而且已经写了四篇,四次开源囧事如下: <开源囧事(一)捅娄子了,写个bug被国家信息安全漏洞共享平台抓到了?> & ...
- 三十二、Java图形化界面设计——布局管理器之CardLayout（卡片布局）
摘自 http://blog.csdn.net/liujun13579/article/details/7773945 三十二.Java图形化界面设计--布局管理器之CardLayout(卡片布局) ...
- 慕课网3-13编程练习：采用flex弹性布局制作页面主导航
小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图. 要求: 1.logo.导航项.登录注册按钮这三项在水平和垂直方向上都对齐,而且他们之间的距离也相等. 2.导 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 【JS学习】慕课网8-17编程练习 网页的返回与跳转
编程练习 制作一个跳转提示页面: 要求: 1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页. 2. 如果点击“返回”按钮则返回前一个页面. 代码如下: 需要注意的是 ...
- 慕课网4-2 编程练习：jQuery祖先后代选择器小案例
4-2 编程练习 结合所学的祖先后代选择器,实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值 ...
- JavaScript进阶--慕课网学习笔记
JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...
随机推荐
- HDU 2059 【DP】
题意: 中文. 思路: 这题不是自己的思想. 当对第i个点的最优值进行求解的时候一定存在最后一个加油的点j.这里j直接枚举. 另外将0和n+1个加油站定义为起点和终点. dp需要加强训练. #incl ...
- File类的三种构造方法
package cn.zmh.File; import java.io.File; /* * * File类的构造方法 三种重载形式 * * */ public class FileDemo1 { p ...
- java实验（三）——课堂小测
这次的课堂小测是用以前生成的那些四则运算的代码,然后将这些题目写到一个文件中,再通过这个文件读取题目的信息,每读入一个答案的时候,遇到星号的时候,等待用户输入然后判断输入的答案是否正确,然后输出小一道 ...
- kis
http://5.xp510.com:801/xp2011/%E9%87%91%E8%9D%B6kis%E4%B8%93%E4%B8%9A%E7%89%88.rar
- js的基础(平民理解的执行上下文/调用堆栈/内存栈/值类型/引用类型)
与以前的切图比较,现在的前端开发对js的要求似乎越来越高,在开发中,我们不仅仅是要知道如何运用现有的框架(react/vue/ng), 而且我们对一些基础的知识的依赖越来越大. 现在我们就用平民的方法 ...
- xml文件的schema也是经过jdk编译器编译的，如果xsd没引入完整，而xml中又用到了这些标签，就会编译不通过啊。
1.xml文件的schema也是经过jdk编译器编译的,如果xsd没引入完整,而xml中又用到了这些标签,就会编译不通过啊. 2.java编译器会下载xsd的指定链接文件,加在代码里,一起编译
- 关于Android Service真正的全然具体解释，你须要知道的一切
转载请注明出处(万分感谢! ): http://blog.csdn.net/javazejian/article/details/52709857 出自[zejian的博客] Service全部内 ...
- JVM原理及内存溢出
JVM原理及内存溢出
- POJ 1988 Cube Stacking（并查集+路径压缩）
题目链接:id=1988">POJ 1988 Cube Stacking 并查集的题目 [题目大意] 有n个元素,開始每一个元素自己 一栈.有两种操作,将含有元素x的栈放在含有y的栈的 ...
- sqoop基本 操作
列出 hive的 全部库 sqoop list-databases --connect jdbc:mysql://localhost --username hive --password hive 列 ...