内容持续更新中…
小程序开发基础
html常用的布局标签
<!-- html5 -->
<!DOCTYPE html><!-- 去掉变成HTML -->
<!-- 网页的根标签 -->
<html lang="en">
<!-- 头部标签 -->
<head>
<!-- 配置网页信息 -->
<meta charset="UTF-8">
<!-- 配置协议 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题 -->
<title>Document</title>
</head>
<!-- body控制页面内容区 -->
<body>
<!-- 每个标签在浏览器渲染的时候都会被浏览器赋予特性 -->
<!-- h1 - h6都是标题标签(区别是h1最大 -->
<h1>hello world</h1>
<!-- 段落标签(用来展示一段文字内容) -->
<p>我的第一个网页,三周之后我就可以完成第一个小程序了。</p>
<p>嘎嘎嘎嘎个</p>
<!-- 直接写标签名字 src:图片的来源 source
alt: 当src是小的时候 加载alt alter:提示-->
<img src="海贼王.jpg" alt="图片未连接">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F228841cf026b2a4af2624ac362733a8f86c63ccb.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620612333&t=cb5b26b6676574a2023c81ecca742f2e" alt="俺老孙去西天取经了">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180119%2Fbc406eb87edf4e62b615a352ce8b9701.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620612457&t=8ffa4985f27799329cf46c8ed85982d8" alt="ONE piece">
<img src="貂蝉.jpg" alt="貂蝉掉线了"><!-- 图片网上下载-->
<!-- 超链接标签 href:让a标签跳转的位置 -->
<a href="http://www.taobao.com">淘宝网</a>
<!-- hr 修饰线段 -->
<a href="http://www.zhihu.com">知乎</a>
<a href="http://www.JD.com">京东</a>
<a href="http://www.acwing.com">AcWing</a>
<hr>
<!-- u1: 无序列表 unorder list -->
<ul>
<!-- 列表项 -->
<li>html标签</li>
<li>css样式</li>
<li>javascript</li>
</ul>
<ol>
<!-- 列表项 -->
<li>html标签</li>
<li>css样式</li>
<li>javascript</li>
</ol>
<p style="color: darkgoldenrod;">111111!</p>
<h1 style="color: darkred;">22222</h1>
</body>
</html>
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本样式</title>
<!-- style标签用来设置元素的层叠样式表 -->
<style>
/* 标签名{} >>> 为对应的标签来设置样式 */
span{
/* 样式名:样式值 */
color: gold;
font-size: 25px;
font-family: "仿宋";
/* 字体粗细 */
font-weight: bold;
/* 首行缩进两字符 1em = 16px */
text: indent 2em;
/* 背景颜色 */
background-color: hotpink;
}
</style>
</head>
<body>
<!-- 标签内style属性(行内样式) C
color(样式名):darlcyan(样式值)-->
<span style="color: darkcyan;">该标签只是显示内容,没有任何语义</span>
<!-- 换行标签 -->
<br>
<!-- font-size:字体大侠:px代表的是单位(像素) -->
<span style="font-size: 20px;">这个span的字体要比上面的字体大</span>
<br>
<span style="font-family: '仿宋';">这和span的文字类型与上面的两个文字类型不同</span>
<br>
<span style="color: darkturquoise;font-size: 30px; font-family:'正楷'; " >上述三个文本样式都可以再该标签中呈现</span>
<hr>
<hr>
<hr>
<span>这个span的内容将采用style标签内的样式</span>
<P>不变色</P>
</body>
</html>
常用css选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
font-size: 25px;
font-weight: bold;
}
/* id值:id选择器的查找 */
#red{
color: red;
}
#blue{
color: blue;
}
#green{
color: green;
}
.test{
color: hotpink;
}
/* 常用的选择器:
标签名选择器:选择所有的标签
id选择器:选择对应id的元素,如果没有则不生成
class类名选择器:适合多个标签采用同一套样式的时候使用
*/
</style>
</head>
<body>
<!-- $读取 -->
<!-- id:标签的标识 -->
<!-- 同一个文档不能出现重复的 id -->
<span id="red">1</span>
<span id="blue">2</span>
<span id="green">3</span>
<hr>
<!-- 标签名字{内容 $代表要加载几个} -->
<p>第1个p标签</p>
<!-- class类型选择器:多个标签次要采用同一套样式 -->
<p class="test">第2个p标签</p>
<p class="test">第3个p标签</p>
<p class="test">第4个p标签</p>
<p>第5个p标签</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
/* 被Style标签包围的范围是CSS环境 可以写CSS代码 */
p {
color: red;
}
.f20 {
font-size: 20px;
}
/* ID样式 */
#p4 {
background-color: pink;
font-size: 24px;
font-weight: bolder;
font-style: italic;
font-family: "华文彩云";
}
/* 组合样式 */
div .f32 {
font-size: 32px;
font-family: "黑体";
}
div p {
color: blue;
}
</style>
<title>Document</title>
</head>
<body>
<!-- <p><font color="red">这里是段落1</font></p> 已淘汰 -->
<p class="f20">类样式</p>
<p id="p4">id样式</p>
<div >
<p><span>hello</span></p>
<span class="f32">world</span>
<p class="f32">!!!</p>
</div>
</body>
</html>
块元素以及盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块标签块元素</title>
<style>
/* 样式选择器之间使用,分隔开 */
html, body{
height: 100%;
/* 浏览器默认带有8px的margin值 */
margin: 0;
}
#boxOne{
/* 可以使用百分比也可使用具体像素
块元素不设置宽度的话, */
width: 400px;
/*h200 + tab快速生成 */
height: 200px;
background-color: indianred;
/* 一个值:代表的是同时为四个方向来设置外间距
两个值:第一个只代表的是上下,第二个值代表左右
四个值:上,右,下,左
*/
/* margin的左右设置成auto */
margin: 50px auto;
/* 背景图片 url:图片的链接地址*/
background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg");
/* 设置背景的尺寸 */
background-size: 100% 100%;
/* 设置背景是否重复 默认是repeat */
background-repeat: no-repeat;
}
img{
width: 100%;
height: 200px;
}
#box{
width: 300px;
height:300px;
background-color: lightcoral;
/* 居中设置 */
margin: 50px auto;
/* 边框宽度 */
border-width: 10px;
/* 边框的样式 */
/* border-style:dotted; */
/* border-color: lightseagreen; */
border-left: greenyellow dotted 10px;
border-right: indigo double 10px;
border-top: lightseagreen groove 10px;
border-bottom: maroon inset 10px;
/* 复合属性 */
border: solid 10px red;
/* 设置边框圆角的值 可以设置百分比 也可以设置像素*/
border-radius: 20px ;
}
</style>
</head>
<body>
<!-- 块标签div: 收纳一定量的元素标签
块标签可以设置大小-->
<div id="boxOne">
<!-- <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg" alt="连接错误"> -->
<a href="">这是图片介绍</a>
</div>
<!-- # + id名字 会自动生成对应的加id的div -->
<div id="box"></div>
</body>
</html>
案例:简易相册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>块标签块元素</title>
<style>
/* 样式选择器之间使用,分隔开 */
html,
body {
height: 100%;
/* 浏览器默认带有8px的margin值 */
margin: 0;
}
#boxOne {
/* 可以使用百分比也可使用具体像素
块元素不设置宽度的话, */
width: 400px;
/*h200 + tab快速生成 */
height: 400px;
background-color: indianred;
/* 一个值:代表的是同时为四个方向来设置外间距
两个值:第一个只代表的是上下,第二个值代表左右
四个值:上,右,下,左
*/
/* margin的左右设置成auto */
margin: 50px 80px;
/* 背景图片 url:图片的链接地址*/
background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg");
/* 设置背景的尺寸 */
background-size: 100% 100%;
/* 设置背景是否重复 默认是repeat */
/* background-repeat: no-repeat; */
border: solid 10px red;
border-radius: 50%;
}
#box {
width: 400px;
height: 400px;
margin: 50px auto;
background-color: rosybrown;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h814%2F20180107%2F5bed-fyqincv0959698.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620951440&t=ccfbab30ac8d7ca2271a8bc1decbec73");
background-size: 100% 100%;
border-radius: 50%;
border: solid 15px pink;
}
#boxTwo {
width: 400px;
height: 400px;
background-color: indianred;
margin: 50px 50px 50px 1000px;
border-width: 30px;
border: solid 10px purple;
border-radius: 50%;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.imgmini.eastday.com%2Fmobile%2F20180326%2F20180326185557_50bded96bbff45614383af1ceb2a689c_4.jpeg&refer=http%3A%2F%2F00.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620639650&t=b2ebdf239d0c6b5dbdd367b30424fae4");
background-size: 100% 100%;
/* background-repeat: no-repeat; */
}
</style>
</head>
<body>
<!-- 块标签div: 收纳一定量的元素标签
块标签可以设置大小-->
<div id="boxOne">
<!-- <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg" alt="连接错误"> -->
<!-- <a href="">这是图片介绍</a> -->
</div>
<!-- # + id名字 会自动生成对应的加id的div -->
<div id="box"></div>
<div id="boxTwo"></div>
</body>
</html>
制作风车动画
图片素材
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>风车</title>
<style>
/* div是块元素,可以设置宽高 */
div{
width: 800px;
height: 500px;
background-color:darksalmon;
margin: 100px auto;
background-image: url("背景.png");
/* 参数为先宽度再宽度 */
background-size: 100% 100%;
/* 定位
relative:相对定位 元素可以在自身原有的位置基础上进行微调,
然后为子元素的定位提供参照
*/
position:relative;
/* left top bottom right 根据自己的实际需求选择*/
/* left: 100px;
top: 50px; */
/*animation适用于任何标签 animation: zhuan 1s 5 linear; */
}
/* nth-child:查找当前元素所在的父元素下面的第n个子元素 */
img:nth-child(1){
width: 300px;
height:300px;
/* absolute绝对定位,参照父元素的位置定义 */
position: absolute;
left: 82px;
top: 70px;
}
img:nth-child(2){
width: 200px;
height:200px;
position: absolute;
left: 312px;
top: 255px;
}
img:nth-child(3){
width: 200px;
height: 200px;
position: absolute;
left: 463px;
top: 205px;
}
:nth-last-child(1)
{
color: red;
}
/*为三个图片添加动画 */
img{
/* 动画名称 */
/* animation-name: zhuan; */
/* 动画的时间 s秒数*/
/* animation-duration: 0.5s; */
/* 控制动画的次数 */
/* animation-iteration-count: 5; */
/* 控制动画的执行速率 */
/* animation-timing-function: ease-in; */
/* 复合属性 */
animation: zhuan 1s infinite linear;
/* 动画适用于任何标签 例如div */
}
/* 动画模块 */
@keyframes zhuan{
0%{
/* transfrom变形动画属性 deg代表度数 */
transform:rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 能展示出来草地,同时处在屏幕正中间 -->
<div>
<img src="风叶.png" alt="" >
<img src="风叶.png" alt="" >
<img src="风叶.png" alt="" >
</div>
<div>
<span>123</span>
<p>456</p>
</div>
</body>
</html>
Flex布局语法基础
容器属性:
1.display:flex>>>打开弹性布局
2.flex-direction>>>设置容器的主轴方向
3.flex-wrap:设置项目的换行方式
4.justify-content:项目在主轴的排列方式
5.align-items:项目在交叉轴的对齐方式
6.align-content:项目在交叉轴的排列方式.项目属性:
1.order:排序,值越大越靠后
2.grow:容器有富裕空间时,单一项目放大的比例。
3.shrink:与grow相反。
4.basis:项目在主轴上的尺寸
5.flex:2~~4的复合属性。
6.align-self:单个项目有与其他项目不一样的对齐方式。
flex-direction属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局基础</title>
<style>
#box
{
/* dispaly元素展示的样式 */
display: flex;
/* flex项目默认按照主轴排列 */
/* 项目在主轴的排列方向 */
/*
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
*/
flex-direction: column-reverse;
}
/* nth-child() section 200 200 红 绿 黄 */
section:nth-child(1){
width: 200px;
height: 200px;
color: red;
background-color: rgb(230, 147, 39);
}
section:nth-child(2){
width: 200px;
height: 200px;
color: green;
background-color: cadetblue;
}
section:nth-child(3){
width: 200px;
height: 200px;
color:blue;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="box">
<!-- div是容器 section是项目 -->
<!-- section是区域标签 -->
<section>1</section>
<section>2</section>
<section>3</section>
</div>
</body>
</html>
flex-wrap属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex-wrap属性</title>
<style>
#box {
/* flex-direction: column-reverse; */
display: flex;
/* nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
*/
flex-wrap: wrap;
/*flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 */
flex-flow: column-reverse wrap;
}
section {
width: 200px;
height: 150px;
margin-bottom: 50px;
}
/*2n 代表偶数 */
section:nth-child(2n) {
background-color: cornflowerblue;
}
section:nth-child(2n + 1) {
background-color: cyan;
}
</style>
</head>
<body>
<div id="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
<section>10</section>
<section>11</section>
<section>12</section>
</div>
</body>
</html>
justify-content属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>justify-content属性</title>
<style>
#box{
display: flex;
flex-flow: row wrap;
/*
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
*/
justify-content: flex-start;
}
section{
width: 200px;
height: 150px;
margin-bottom: 50px;
}
section:nth-child(2n){
background-color: lightcoral;
}
section:nth-child(2n +1){
background-color: lightseagreen;
}
</style>
</head>
<body>
<div id="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
<section>10</section>
<section>11</section>
<section>12</section>
</div>
</body>
</html>
align-items
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
height: 100%;
}
/*
块元素的宽度如果不设置会继承父元素的宽度
高度会依据填充的元素的高度来设置自身的高度 */
#box{
display: flex;
width: 1000px;
height: 800px;
border: solid 1px red;
margin: 0 auto;
/* 主轴对其方式 */
justify-content: center;
/* 交叉轴对齐方式 */
/*
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
*/
align-items: center;
}
/* 表示box下面的section标签 */
#box section{
width: 200px;
height: 200px;
background-color: lightseagreen;
border-radius: 50%;
/* 文本对齐方式 */
text-align: center;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div id="box">
<section>1</section>
</div>
</body>
</html>
align-content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content</title>
<style>
#box {
height: 1000px;
/* dispaly打开弹性布局 */
/* flex-direction设置容器的主轴方向; */
/* flex-wrap设置项目的换行方式 */
/* justify-content项目在主轴的排列方式 */
/* align-items项目在交叉轴的对齐方向 */
/* align-content项目在交叉轴上的对齐方向 */
display: flex;
flex-flow: row wrap;
justify-content: space-around;
/*
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。 */
align-content: space-between;
}
section {
width: 200px;
height: 200px;
margin-bottom: 50px;
}
section:nth-child(2n) {
background-color: royalblue;
}
section:nth-child(2n +1) {
background-color: salmon;
}
</style>
</head>
<body>
<div id="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
<section>10</section>
<section>11</section>
<section>12</section>
</div>
</body>
</html>
案例1:二饼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
height: 100%;
}
/*
块元素的宽度如果不设置会继承父元素的宽度
高度会依据填充的元素的高度来设置自身的高度 */
#box{
display: flex;
width: 300px;
height: 500px;
border: solid 1px red;
margin: 0 auto;
/* 主轴对其方式 */
flex-direction: column;
justify-content: center;
/* 交叉轴对齐方式 */
margin: 50px auto;
/*
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
*/
align-items: center;
}
/* 表示box下面的section标签 */
#box section:nth-child(1){
width: 200px;
height: 200px;
background-color: lightseagreen;
border-radius: 50%;
/* 文本对齐方式 */
text-align: center;
margin-bottom: 20px;
font-size: 50px;
color: white;
}
#box section:nth-child(2){
width: 200px;
height: 200px;
background-color: rgb(52, 20, 235);
border-radius: 50%;
/* 文本对齐方式 */
text-align: center;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div id="box">
<section>1</section>
<section>2</section>
</div>
</body>
</html>
order
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-self属性</title>
<style>
#box{
display: flex;
height: 800px;
}
section:nth-child(1){
background-color: teal;
flex-basis: 200px;
height: 300px;
align-self: flex-start;
}
section:nth-child(2){
background-color:violet;
flex-basis: 200px;
height: 200px;
}
section:nth-child(3){
background-color: green;
flex-basis: 100px;
height: 200px;
/* 单一项目的对齐方式 */
align-self: flex-end;
}
section:nth-child(4){
background-color: blue;
flex-basis: 150px;
height: 200px;
align-self: center;
}
</style>
</head>
<body>
<div id="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
</body>
</html>
shrink属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=d, initial-scale=1.0">
<title>Order2</title>
<style>
#box{
display: flex;
/* width: 1000px; */
height: 800px;
border: solid 2px black;
margin:0 auto;
}
section{
width: 500px;
height: 500px;
background-color: rgb(99, 243, 195);
color: bisque;
text-align: center;
font-size: 50px;
/* 行高:字体所占空间垂直度高度 */
line-height: 300px;
}
section:nth-child(1){
background-color: yellowgreen ;
flex-shrink: 1;
}
section:nth-child(2){
background-color: cyan;
flex-shrink: 0;
}
section:nth-child(3){
background-color: tomato;
flex-shrink: 1;
}
section:nth-child(4){
/* 复合属性 grow shrink basis */
/* flex:1 0 250px; */
}
</style>
</head>
<body>
<div id="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
</div>
</body>
</html>
alian-self属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-self属性</title>
<style>
#box{
display: flex;
height: 800px;
}
section:nth-child(1){
background-color: teal;
flex-basis: 200px;
height: 300px;
align-self: flex-start;
}
section:nth-child(2){
background-color:violet;
flex-basis: 200px;
height: 200px;
}
section:nth-child(3){
background-color: green;
flex-basis: 100px;
height: 200px;
/* 单一项目的对齐方式 */
align-self: flex-end;
}
section:nth-child(4){
background-color: blue;
flex-basis: 150px;
height: 200px;
align-self: center;
}
</style>
</head>
<body>
<div id="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
</body>
</html>
案例2:微信小窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wechat</title>
<style>
html, body{
height: 100%;
}
#box{
width: 1000px;
height: 800px;
display: flex;
flex-direction:row;
border:solid 10px aqua ;
justify-content: space-between;
align-content: flex-end;
}
div{
align-self: flex-end;
}
</style>
</head>
<body>
<div id="box">
<div>
<section><img src="朋友圈.jpg" alt="" width="100px" height="100px"></section>
<section><a href="./1.html">朋友圈</a></section>
</div>
<div>
<section><img src="通讯录.jpg" alt=""width="100px" height="100px"></section>
<section><a href="./2.html">通讯录</a></section>
</div>
<div>
<section><img src="首页.jpg" alt=""width="100px" height="100px"></section>
<section><a href="./3.html">设置</a></section>
</div>
<div>
<section><img src="设置.jpg" alt=""width="100px" height="100px"></section>
<section><a href="./4.html">首页</a></section>
</div>
</div>
</body>
</html>
待续…