慕课网3-10编程练习：简单的flex布局
小伙伴们，我们学习了伸缩容器的一些属性，接下来使用我们所学的伸缩容器属性完成下面的效果图。
完成效果：
任务
1、先将容器设置为伸缩容器
2、在垂直方向上对齐，行与行之间的空白距离一样
3、在水平方向上对齐，第一个和最后一个项目位于容器的最左边和最右边
<!DOCTYPE html>
<html> <head lang="zh-CN">
<meta charset="UTF-8"> <title></title>
<style>
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
background-color: orange;
height: 150px;
width: 390px;
margin: 20px auto;
/* 此处补充代码 */ } </style>
</head> <body>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
<li>第六个li</li>
</ul>
</body> </html>
参考代码：
<!DOCTYPE html>
<html> <head lang="zh-CN">
<meta charset="UTF-8"> <title></title>
<style>
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
background-color: orange;
height: 150px;
width: 390px;
margin: 20px auto;
/* 此处补充代码 */
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-around;
} li {
font-size: 24px;
width: 100px;
background-color: pink;
}
</style>
</head> <body>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
<li>第六个li</li>
</ul>
</body> </html>
慕课网3-10编程练习：简单的flex布局的更多相关文章
- 慕课网 javascript深入浅出编程练习
任务 请在index.html文件中,编写arraysSimilar函数,实现判断传入的两个数组是否相似.具体需求: 1. 数组中的成员类型相同,顺序可以不同.例如[1, true] 与 [false ...
- 慕课网：剑指Java面试-Offer直通车视频课程
慕课网:剑指Java面试-Offer直通车视频课程,一共有10个章节. 目录结构如下: 目录:/2020036-慕课网:剑指Java面试-Offer直通车 [6G] ┣━━第10章 Java常用类库与 ...
- 10慕课网《进击Node.js基础（一）》初识promise
首先用最简单的方式实现一个动画效果 <!doctype> <html> <head> <title>Promise animation</titl ...
- java网络爬虫----------简单抓取慕课网首页数据
© 版权声明:本文为博主原创文章,转载请注明出处 一.分析 1.目标:抓取慕课网首页推荐课程的名称和描述信息 2.分析:浏览器F12分析得到,推荐课程的名称都放在class="course- ...
- 【JS学习】慕课网8-17编程练习 网页的返回与跳转
编程练习 制作一个跳转提示页面: 要求: 1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页. 2. 如果点击“返回”按钮则返回前一个页面. 代码如下: 需要注意的是 ...
- 慕课网5-2编程练习：flex布局制作卡片布局案例
慕课网5-2编程练习:flex布局制作卡片布局案例 小伙伴们,学习了卡片布局,接下来我们根据效果图,也写出一个卡片布局的页面吧! 效果图如下: 任务 1.主体内容的卡片一行只能显示两个. 2.卡片与卡 ...
- 慕课网4-2 编程练习：jQuery祖先后代选择器小案例
4-2 编程练习 结合所学的祖先后代选择器,实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值 ...
- 慕课网3-13编程练习：采用flex弹性布局制作页面主导航
小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图. 要求: 1.logo.导航项.登录注册按钮这三项在水平和垂直方向上都对齐,而且他们之间的距离也相等. 2.导 ...
- JavaScript进阶--慕课网学习笔记
JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...
随机推荐
- 『 Luogu P3205 』 HNOI2010 合唱队
解题思路 设置两个二维数组 $f$ 和 $g$,含义如下. $f[l][r]$ 表示在期望得到的队形中 $l\rightarrow r$ 这段区间初始队形排列的方案数,并且最后一个加入进去的是第 $l ...
- Luogu P3110 [USACO14DEC]驮运Piggy Back
解题思路 看到下面很多人都在说什么遇到了之后要不要背着走,其实根本不需要,同样的我也是跑了三遍$SPFA$,求出了以$1$为起点到个点的$dist$,和以$2$为起点到个点的$dist$,还有以$n$ ...
- session对象的使用
session对象的使用 制作人:全心全意 session在网络中被称为会话.由于HTTP协议是一种无状态协议,也就是当一个客户向服务器发出请求,服务器接收请求,并返回响应后,该连接就结束了,而服务器 ...
- 10 Python中的代码缓存机制
目录: 1) 什么是代码块 2) 基本原理 3) 机制适用范围 4) 适用对象 5) 优势 更详细说明,参考太白老师博客 https://www.cnblogs.com/jin-xin/article ...
- BZOJ 3747 洛谷 3582 [POI2015]Kinoman
[题解] 扫描线+线段树. 我们记第i部电影上次出现的位置是$pre[i]$,我们从$1$到$n$扫描,每次区间$(pre[i],i]$加上第i部电影的贡献$w[f[i]]$,区间$[pre[pre[ ...
- Placing Lampposts
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=91212#problem/E #include <iostream> #inc ...
- java 访问对象私有变量
Captcha captcha = getCaptcha(captchaId); // 通过反射获取验证码值 Class<?> classType = captcha.getClass() ...
- 百练4103：踩方格(DFS)
描述 有一个方格矩阵,矩阵边界在无穷远处.我们做如下假设:a. 每走一步时,只能从当前方格移动一格,走到某个相邻的方格上:b. 走过的格子立即塌陷无法再走第二次:c. 只能向北.东. ...
- [BZOJ2594] [Wc2006]水管局长数据加强版（LCT + kruskal + 离线）
传送门 WC这个题真是丧心病狂啊,就是想学习一下怎么处理边权,给我来了这么一个破题! ORZ hzwer 临摹黄学长代码233 但还是复杂的一匹 理一下思路吧 题目大意:给定一个无向图,多次删除图中的 ...
- Sublime Text 3显示文本编码
在Settings上加入"show_encoding":true 进入这个选项:[Preferences]->[Settings] 搞定之后,在右下角可以看见文本编码