第五天（渐变）
文章目录
- 笔记
- 第五章 ⻚⾯布局
- 5.1弹性盒⼦
- 练习题目（使用实现学校官网的首页面）
- 效果截图
- 项目反思：
笔记
-
其他效果
渐变
- 多列
多列相关属性及使⽤⻅以下代码。
匆匆
我⼀直都在期待着那些英雄能够超出原本的模样，变成他们⾃
⼰想象的样⼦，可是我们所想象的其实并没有什么多好的景象，只是在这样漫天⻜舞的雪花当中能够看清
楚。这些幸福其实就是如此简单，根本就不是你所想象的那样。
- 字体图标
五种图标
1.正常图⽚如png，jpg。他们的有点事图像精美复杂 缺点 放⼤后失真。
2.svg图像他的有点是放⼤后不会失真，但是制作复杂图像困难。
3.css图像同楼上 。
4.精灵图属于⽬前较好的图标解决⽅案。缺点维护性差。
5.字体图标，他是将已有的svg，css，png等图标制作成⼀个字体⽂件供开发者使⽤。
-
CSS的变量
-
变量的声明
⾸先创建⼀个变量，必须两个中划线开始（–）。CSS变量跟⼀般属性如color没有本质差别，只是color
被系统赋予内在含义。所以css的变量海被称为⾃定义属性。
- 怎么使⽤变量
通过var函数使⽤变量
- 变量的类型
变量是由类型的可以是字符串也可是数字或者像素等等带单位量，创建变量的时候应要注意他的类型，
否则可能引起引⽤上的错误。
- CSS的常⻅函数
函数 描述 CSS 版本
attr() 返回选择元素的属性值。 2
calc() 允许计算 CSS 的属性值，⽐如动态计算⻓度值。 3
cubic-bezier() 定义了⼀个⻉塞尔曲线(Cubic Bezier)。 3
hsl() 使⽤⾊相、饱和度、亮度来定义颜⾊。 3
hsla() 使⽤⾊相、饱和度、亮度、透明度来定义颜⾊。 3
linear-gradient() 创建⼀个线性渐变的图像 3
radial-gradient() ⽤径向渐变创建图像。 3
repeating-lineargradient() ⽤重复的线性渐变创建图像。 3
repeating-radialgradient() 类似 radial-gradient()，⽤重复的径向渐变创建图像。 3
rgb() 使⽤红(R)、绿(G)、蓝(B)三个颜⾊的叠加来⽣成各式各
样的颜⾊。 2
rgba() 使⽤红(R)、绿(G)、蓝(B)、透明度(A)的叠加来⽣成各式
各 样的颜⾊。 3
var() ⽤于插⼊⾃定义的属性值。 3
- 常⻅的CSS单位和倒影
第五章 ⻚⾯布局
表格布局：表格当前的互联⽹环境下，已经被淘汰，因为他的可维护性交叉，通常要修改其中某⼀个区域的时
候，会影响到全局，到最后不得不重新设计⻚⾯。
盒⼦模型：也就是我们常⽤div+CSS的布局形式，它是当前互联⽹环境中最常⽤的布局⽅式。
5.1弹性盒⼦
⾸先要使⽤弹性盒⼦ 第⼀个应该将display设置为flex。
flex-direction属性：它是⽤来控制⼦元素的排列⽅式，可以横向或者纵向排列。row|row-reverse|column|column-revers
justify-content属性：控制⼦元素在主轴上如何布局的。
flext-start:在横向左对⻬ 在纵向上对⻬。
flex-end：在横向上右对⻬ 纵向下对⻬。
center：居中
space-between：在横向或者纵向上均匀的排列⼦标签。第五章 ⻚⾯布局
表格布局：表格当前的互联⽹环境下，已经被淘汰，因为他的可维护性交叉，通常要修改其中某⼀个区域的时
候，会影响到全局，到最后不得不重新设计⻚⾯。
盒⼦模型：也就是我们常⽤div+CSS的布局形式，它是当前互联⽹环境中最常⽤的布局⽅式。
5.1弹性盒⼦
⾸先要使⽤弹性盒⼦ 第⼀个应该将display设置为flex。
flex-direction属性：它是⽤来控制⼦元素的排列⽅式，可以横向或者纵向排列。
row|row-reverse|column|column-revers
justify-content属性：控制⼦元素在主轴上如何布局的。
flext-start:在横向左对⻬ 在纵向上对⻬。
flex-end：在横向上右对⻬ 纵向下对⻬。
center：居中
space-between：在横向或者纵向上均匀的排列⼦标签。
- align-item:⽤来设置弹性盒⼦在侧轴上的对⻬⽅式。
flext-start：当前布局为横向时 控制⼦项向上对⻬。当前布局为纵向时 控制⼦项向左对⻬。
flex-end：当前布局为横向时 控制⼦项向下对⻬。当前布局为纵向时 控制⼦项向右对⻬。
center：居中。
baseline：内容部分对⻬。
strech：如果没有⾼度限制 该属性会将⼦标签填满⽗容器。 - flex-wrap
：⽤来设置弹性盒⼦的换⾏模式，wrap多⾏，nowrap单⾏，wrap-reverse多⾏逆序。 - align-content
：他是在多⾏模式下才能体现效果的属性，他会顶掉align-item的效果
练习题目（使用实现学校官网的首页面）
为了隐私我就没有放学校官网，这里我仿了淘宝into you的页面
HTML代码图：
指尖唇釉镜面显色秋冬口红持久滋润显白平价
INTO YOU
![]()
新品 INTO YOU指尖唇釉镜面显色秋冬口红持久滋润显白平价 哑光-E04
INTO YOU
产品介绍
产品参数
产品名称：INTO YOU INTOYOU心慕
产地: 中国
上市时间: 2020年
是否为特殊用途化妆品: 否
品牌: INTO YOU
颜色分类: W01 蜜桃荔枝饮 W02 树莓
功效: 提升气色 不粘杯 持久
限期使用日期范围: 2023-04-11至2023-07-11
消费提醒： 国家药监局提示您：化妆品不能宣称医疗作用，也没有治疗作用，宣称治疗儿童湿疹等皮肤病的产品不属于化妆品。
累计评价
与描述相符
4.6
★★★★★
颜色实测还是适合皮肤偏白的比较好看些～,也太好看了吧,在手臂试色倒是有点水光感,从上到下是01,大爱唇釉的质地,正品！整体评价好保湿效果还行,原相机拍摄,,w02一个是橡皮粉,不吃东西的时候不会掉色,真的变白了,很好的染唇液爱了..
![]()
>颜色分类：W01 蜜桃荔枝饮
x***0（匿名）超级会员
颜色实测还是适合皮肤偏白的比较好看些～,也太好看了吧,在手臂试色倒是有点水光感,从上到下是01,大爱唇釉的质地,正品！整体评价好保湿效果还行,原相机拍摄,,w02一个是橡皮粉,不吃东西的时候不会掉色,真的变白了,很好的染唇液爱了..
![]()
>颜色分类：W08 粉提荔枝饮
q***n（匿名）超级会员
图片详情
![]()
礼盒
![]()
色号展示
![]()
效果展示
INTO YOU
CSS图：
*
{margin: 0 auto;padding:0 auto;list-style: none;
}
#head
{/*border: solid #f5f5f5 2px;*/width: 3000px;height: 6300px;text-decoration: none;
}
#div1
{float: left;font-size: 50px;width: 100%;height: 100px;background: #9da29d;;margin-top: 20px;border-bottom: #b7bcb7 solid 2px;text-decoration: none;
}
#div1 li
{float: left;margin-left:200px;line-height: 100px;}#div2
{border: solid #b7bcb7 2px;width: 65%;height:1500px;float: right;margin-top: 20px;}
#div3
{background: url("img/index.png");width: 100%;height: 180px;margin-top: 30px;}
#div5
{float: left;font-size: 50px;width: 100%;height: 75px;border-bottom: white solid 2px;text-decoration: none;
}
#div5 li
{float: left;margin-left:200px;line-height: 100px;margin-top: -80px;}
#div6
{float: left;font-size: 50px;width: 100%;height: 200px;border-bottom: white solid 2px;text-decoration: none;
}
#div6 li
{float: left;margin-left:250px;line-height: 100px;margin-top: -150px;}
#div7
{float: left;font-size: 50px;width: 100%;height: 200px;text-decoration: none;
}
#div7 li
{float: left;margin-left:500px;line-height: 100px;margin-top: 100px;border: black solid 2px;background: #fcbcba;
}
#div8
{text-decoration: none;width: 30%;height:500px;float:left;margin-top: 90px;}
#div9
{border: solid #b4b0b0 2px;width:30%;height:450px;text-decoration: none;float:left;margin-top: 340px;margin-left: -900px;
}
#div10
{float: left;font-size: 50px;width: 100%;height: 200px;text-decoration: none;margin-left: -60px;
}
#div10 li
{float: left;margin-left:200px;line-height: 100px;margin-top: 10px;border: black solid 2px;background: #fcbcba;
}
#div11
{border: #f0eae8 solid 1px;width:100%;height: 80px;float: left;margin-top: 10px;background:#f0eae8;
}
#div12
{border: #f0eae8 solid 1px;width:65%;height:800px;float: right;margin-top:100px;
/* background:#f0eae8;*/
}
#div12-1
{background:#f0eae8;
}
#div12-2
{margin-top: 20px;
}
#div12-3
{margin-top: 20px;width: 33%;height: 500px;/*border:red solid 2px ;*/float: left;
}
#div12-4
{width: 33%;height: 500px;/*border:red solid 2px ;*/float: right;
}
#div13
{border: white solid 1px;width:100%;height: 150px;float: left;margin-top: 300px;background:#fef4f4;line-height: 150px;color: #f1a127;text-indent: 2em;
}
#div14
{border: #f0eae8 solid 1px;width:100%;height:1600px;float: left;margin-top: 10px;/*background:#f0eae8;*/margin-top: 50px;
}
#div14-1
{background:#f0eae8;border: #f0eae8 solid 1px;width:100%;height:100px;}
#div14-2
{margin-top: 20px;text-align: center;width: 20%;float: left;height: 150px;
}
#div14-3
{margin-top: 40px;text-align: center;width: 70%;float:left;height: 150px;line-height: 150px;background:#fef4f4;
}
#div14-3 ul{ width: 100%;list-style: none;}
#div14-3 li {float: left;text-align: center;margin-left: 100px;font-size: 50px;}#div14-3 li a
{text-decoration:none;color: black;line-height: 38px;
}
#div14-4
{margin-top: 20px;width: 100%;height: 800px;/*border:red solid 1px;*/
}
#div14-4-1
{margin-top: 30px;width: 50%;height: 180px;float: left;
}
#div14-4-2
{margin-top: 30px;width: 20%;height: 180px;float: left;margin-left: 100px;
}
#div14-4-3
{margin-top: 30px;width: 24%;height: 180px;float: right;
}
#div14-4-4
{border-top: #f0eae8 solid 1px;margin-top: 500px;width: 50%;height: 180px;float: left;
}
#div14-4-5
{margin-top:500px;width: 20%;height: 180px;float: left;margin-left: 100px;border-top: #f0eae8 solid 1px;
}
#div14-4-6
{margin-top:500px;width: 24%;height: 180px;float: right;border-top: #f0eae8 solid 1px;
}
#div15
{width: 100%;height: 2000px;margin-top: 800px;
}
#div15-1
{width: 33%;height: 2000px;margin-top:50px;float: left;
}
效果截图
项目反思：
通过仿照页面我发现我的代码有以下问题：
1、div命名不规范
2、代码格式不规范
3、按钮设置样式不好看（下次可以改进）
下次一定注意！！！
上一篇： 英语团购作文模板范文（精选6篇）
下一篇： 过年范文高中英语【优选6篇】