慕课网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 P1850 」 换教室
解题思路 很明显的是个期望 $dp$. 先前想到 $dp[i][j]$ 表示第决策到第 $i$ 个时间段,已经进行了 $j$ 次申请,然后就没有然后了,因为这根本就没法转移啊,你又不知道前 $i-1$ ...
- Python学习-字符串函数操作1
字符串的函数操作 capitalize():可以将字符串首字母变为大写 返回值:首字符大写后的新字符串 str = "liu" print(str.capitalize()); / ...
- 1.Zigbee开发学习资源
http://blog.csdn.net/zhanglianpin/article/details/46907349
- Codeforces 938C - Constructing Tests
传送门:http://codeforces.com/contest/938/problem/C 给定两个正整数n,m(m≤n),对于一个n阶0-1方阵,其任意m阶子方阵中至少有一个元素“0”,则可以求 ...
- Windows Server 2008R2服务器IIS安装步骤
注意点: 添加ASP.NET ..NET 扩展性.CGI.ISAPI 扩展.ISAPI 筛选器,去掉 目录浏览(因为大多数网站用不到.) 如果需要用到asp则勾选asp,如果需要用shtm需要开启在服 ...
- 生成随机数验证码的工具类（from韩顺平）
生成随机数验证码的工具类 package com.cx; //生成随机数的图片 import java.awt.Color; import java.awt.Font; import java.awt ...
- Eureka集群的那些坑
今天遇到一个Eureka集群的一个坑. 问题现场类似是这样的:两台Eureka组成的服务注册中心集群,两台服务提供方server1.server2,两个服务调用方client1.client2. 正常 ...
- 常见的HTTP状态码(HTTP Status Code)
HTTP状态码 当使用浏览器访问一个网页时,浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览 ...
- - > 网络流（【最大流】草地排水模板题）
1993 草地排水 USACO 时间限制: 2 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description 在农夫约翰的农场上,每 ...
- Ubuntu 16.04通过Trickle限制某个软件的下载/上传速度
在Linux下没有Windows使用360那样去限制某个软件的速度. 但是通过Trickle可以设置某个软件的网速,但是前提是通过Trickle命令连带启动这个软件才可以,不能中途去设置. 比如现在很 ...