文章目录
- 笔记
- 第五章 ⻚⾯布局
- 5.1弹性盒⼦
- 练习题目（使用实现学校官网的首页面）
- 效果截图
- 项目反思：
笔记
-
其他效果
渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
/* border: 1px solid red; */
/* 默认渐变效果是从上到下 */
background-image: linear-gradient(red,blue);
}
/* 渐变可以控制渐变⽅向 */
div{
background-image: linear-gradient(to right,red,blue);
}
/* 渐变可以进⾏对⻆渐变 */
div{
background-image: linear-gradient(to bottom right,red,blue);
}
/* 你可以通过⻆度来设置渐变*/
div{
background-image: linear-gradient(40deg,red,blue);
}
/* 可以多各种颜⾊进⾏渐变 */
div{
background-image: linear-gradient(40deg,red,blue,yellow,green,pink);
}
/* 渐变⽀持透明 */
div{
background-image: linear-gradient(40deg,red,rgba(255,0,0,0));
}
/* 重复性渐变 */
div{
background-image: repeating-linear-gradient(50deg,red,blue 20%,green
30%);
}
/* 径向渐变 */
div{
background-image: radial-gradient(red,blue,yellow,pink);
}
/* 重复径向渐变 */
div{
background-image: repeating-radial-gradient(red,yellow 10%,pink 20%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 多列
多列相关属性及使⽤⻅以下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
/* 控制有多少列，控制列数的最⼤值 */
column-count: 3;
/* 控制⼀列有多宽，控制列数的最⼩值 */
column-width: 20px;
/* 可以像给标签加边框⼀样给每⼀列加边框 */
column-rule: 1px solid red;
/* 可以拆分以下三个属性 */
column-rule-width: 10px;
column-rule-style: dashed;
column-rule-color: rebeccapurple;
}
h1{
column-span: all;
text-align: center;
}
</style>
</head>
<body>
<h1>匆匆</h1>
<p style="text-indent: 32px;">我⼀直都在期待着那些英雄能够超出原本的模样，变成他们⾃
⼰想象的样⼦，可是我们所想象的其实并没有什么多好的景象，只是在这样漫天⻜舞的雪花当中能够看清
楚。这些幸福其实就是如此简单，根本就不是你所想象的那样。</p>
</body>
</html>
- 字体图标
五种图标
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单位和倒影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
第五章 ⻚⾯布局
表格布局：表格当前的互联⽹环境下，已经被淘汰，因为他的可维护性交叉，通常要修改其中某⼀个区域的时
候，会影响到全局，到最后不得不重新设计⻚⾯。
盒⼦模型：也就是我们常⽤div+CSS的布局形式，它是当前互联⽹环境中最常⽤的布局⽅式。
5.1弹性盒⼦
⾸先要使⽤弹性盒⼦ 第⼀个应该将display设置为flex。
flex-direction属性：它是⽤来控制⼦元素的排列⽅式，可以横向或者纵向排列。
row|row-reverse|column|column-revers
justify-content属性：控制⼦元素在主轴上如何布局的。
flext-start:在横向左对⻬ 在纵向上对⻬。
flex-end：在横向上右对⻬ 纵向下对⻬。
center：居中
space-between：在横向或者纵向上均匀的排列⼦标签。
<title></title>
<sTyLe>
html{
}
:root{
}
div{
--size:200;
width: calc(var(--size)*1px);
height:calc(var(--size)*1px);
border: 1px solid red;
background-color: hsl(235, 60%, 50%);
-webkit-box-reflect: below 2px linear-gradient(transparent,transparent
50%,rgba(255,0,0,1));
/* -webkit-box-reflect:below 2px lineargradient(transparent,transparent 50%,rgba(0,0,0,1)); */
}
span{
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
第五章 ⻚⾯布局
表格布局：表格当前的互联⽹环境下，已经被淘汰，因为他的可维护性交叉，通常要修改其中某⼀个区域的时
候，会影响到全局，到最后不得不重新设计⻚⾯。
盒⼦模型：也就是我们常⽤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的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
display: flex;
width: 400px;
height: 400px;
background-color: rebeccapurple;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap:wrap;
align-content: flex-start;
}
.container > div{
width: 100px;
height:100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
练习题目（使用实现学校官网的首页面）
为了隐私我就没有放学校官网，这里我仿了淘宝into you的页面
HTML代码图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>指尖唇釉镜面显色秋冬口红持久滋润显白平价</title>
<link rel="stylesheet" type="text/css" href="into.css">
</head>
<body>
<div id="head">
<center><p style="font-family: 黑体;font-size: 100px;color: #966d95;list-style: none;">INTO YOU</p></a></center>
<div id="div1">
<ul>
<a href="https://item.jd.com/10037741964287.html"><li>所有产品</li></a>
<a href="https://item.jd.com/10037741964287.html"><li>首页</li></a>
<a href="https://item.jd.com/10037741964287.html"><li>唇部产品</li></a>
<a href="https://item.jd.com/10037741964287.html"><li>眼部产品</li></a>
<a href="https://item.jd.com/10037741964287.html"><li>脸部产品</li></a>
<a href="https://item.jd.com/10037741964287.html"><li>品牌故事</li></a>
<a href="https://item.jd.com/10037741964287.html"><li>会员中心</li></a>
</ul>
</div>
<img style="margin-top: 30px;border: solid #f5f5f5 2px;width:29%;" src="img/2.jpg">
<div id="div2">
</br></br>
<p>
<span style="color:white;background-color: #258f04;font-size: 50px;">新品</span> <span style="font-size: 50px;color:#767876; ">INTO YOU指尖唇釉镜面显色秋冬口红持久滋润显白平价 哑光-E04</span>
</p>
<div id="div3">
<p style="color: #858180;font-size: 50px;">价 格 <s><span style="color: #767876;font-size: 60px;width: 20px;">￥98.00--￥180.00</s></span></br></p>
<p style="color: #858180;font-size: 50px;">促销价 <span style="color: #f66351;font-size: 60px;width: 20px;">￥50.00--￥169.00</span></p></br></br></br></br></p>
<p style="color: #686666;font-size: 50px;">运 费</span> <span style="color: #767876;font-size: 50px;width: 20px;">浙江嘉兴 至 四川 快递：0.00</span></p>
<p style="border-top: #c6bebe solid 2px;margin-top: 40px;"></p>
<p align="center" style="color: #858180;font-size: 50px;float: left; border-right: solid 2px #c6bebe ;width: 33%;margin-top: 20px;">月销量 <span style="color: #f66351;font-size: 60px;width: 20px;">30万+</span></p>
<p align="center" style="color: #858180;font-size: 50px;float: left; border-right: solid 2px #c6bebe ;width: 33%;margin-top: 20px;">累计评价 <span style="color: #f66351;font-size: 60px;width: 20px;">150万+</span></p>
<p align="center" style="color: #858180;font-size: 50px;float: left; border-right: solid 2px white ;width: 33%;margin-top: 20px;">送天猫积分 <span style="color: #56b609;font-size: 60px;width: 20px;">29</span>起</p>
<p style="border-top: #c6bebe solid 2px;margin-top: 150px;"></p>
<p style="color: #858180;font-size: 50px;margin-top: 30px;">版 本</p>
<div id="div5">
<ul>
<a href="https://item.jd.com/10037741964287.html"><li>摩尔唇泥</li></a>
<a href="https://item.jd.com/10037741964287.html"><li>水雾唇釉</li></a>
<a href="https://item.jd.com/10037741964287.html"><li>女主角唇泥</li></a>
<a href="https://item.jd.com/10037741964287.html"><li>指尖唇釉</li></a>
</ul>
</div>
<p style="color: #858180;font-size: 50px;margin-top: 150px;">颜色分类
<div id="div6">
<a href="https://item.jd.com/10037741964287.html"><li><img style="width:300%;margin-top: 50px;" src="img/3.jpg"></li></a>
<a href="https://item.jd.com/10037741964287.html"><li><img style="width:300%;margin-top: 50px;" src="img/4.jpg"></li></a>
<a href="https://item.jd.com/10037741964287.html"><li><img style="width:300%;margin-top: 50px;" src="img/5.jpg"></li></a>
<a href="https://item.jd.com/10037741964287.html"><li><img style="width:300%;margin-top: 50px;" src="img/6.jpg"></li></a>
</p>
</div>
<p style="color: #858180;font-size: 50px;">数 量 <span>1 件</span></p>
<div id="div7">
<ul>
<a href="https://item.jd.com/10037741964287.html"><li>立即购买</li></a>
<a href="https://item.jd.com/10037741964287.html"><li>加入购物车</li></a>
</ul>
</div>
</div>
</div>
<div id="div8">
<center><p style="font-family: 黑体;font-size: 100px;color: #966d95;list-style: none;">INTO YOU</p></a></center>
</div>
<div id="div9">
<p align="center" style="color: #858180;font-size: 50px;"> <span style="color: #959494;">intoyou旗舰店</span></p></br></br>
<p align="center" style="color: #858180;font-size: 50px;text-decoration: none;list-style: none;"><a style="list-style: none;text-decoration: none;" href="#">描 述 服 务 物 流</a></p></br></br>
<p align="center" style="color: #858180;font-size: 50px;">4.8 <span style="color: green;">↑</span> 4.7 <span style="color: red;">↑</span> 4.9 <span style="color: green;">↑</span></p></br>
<div id="div10">
<ul>
<center><a href="https://item.jd.com/10037741964287.html"><li>进店逛逛</li></a></center>
<a href="https://item.jd.com/10037741964287.html"><li >收藏店铺</li></a>
</ul>
</div>
<div style="border: solid 2px #b4b0b0;" id="div11">
<p style="color: #858180;font-size: 50px;">产品分类</p></br>
<a style="list-style: none;text-decoration: none;" href="https://item.jd.com/10037741964287.html"><p align="center" style="color: #858180;font-size: 50px; margin-top: 20px;"> 脸部产品: <span style="color: #fc7536">唇泥</span></p></br></a>
<a style="list-style: none;text-decoration: none;" href="https://item.jd.com/10037741964287.html"><p align="center" style="color: #858180;font-size: 50px; margin-top: 20px;">眼部产品: <span style="color: #fc7536">眼影</span></p></br></a>
<a style="list-style: none;text-decoration: none;" href="https://item.jd.com/10037741964287.html"><p align="center" style="color: #858180;font-size: 50px; margin-top: 20px;">唇部产品: <span style="color: #fc7536">口红</span></p></br></a>
<a style="list-style: none;text-decoration: none;" href="https://item.jd.com/10037741964287.html"><p align="center" style="color: #858180;font-size: 50px; margin-top: 20px;"> 卸妆产品: <span style="color: #fc7536">卸妆水</span></p></br></a>
</div>
</div>
<div id="div12">
<div id="div12-1">
<p style="color: #858180;font-size: 50px;">产品介绍</p></br>
</div>
<div id="div12-2">
<p style="color:#c8c3c2;font-size: 60px;">产品参数</p></br>
</div>
<div id="div12-3">
<p style="color: #858180;font-size: 50px;"> 产品名称：INTO YOU INTOYOU心慕</p></br>
<p style="color: #858180;font-size: 50px;"> 产地: 中国</p></br>
<p style="color: #858180;font-size: 50px;"> 上市时间: 2020年</p></br>
<p style="color: #858180;font-size: 50px;"> 是否为特殊用途化妆品: 否</p></br>
</div>
<div id="div12-4">
<p style="color: #858180;font-size: 50px;"> 品牌: INTO YOU</p></br>
<p style="color: #858180;font-size: 50px;"> 颜色分类: W01 蜜桃荔枝饮 W02 树莓</p></br>
<p style="color: #858180;font-size: 50px;">
功效: 提升气色 不粘杯 持久</p></br>
<p style="color: #858180;font-size: 50px;"> 限期使用日期范围: 2023-04-11至2023-07-11</p></br>
</div>
</div>
<div id="div13">
<p style="font-size: 50px;">消费提醒： 国家药监局提示您：化妆品不能宣称医疗作用，也没有治疗作用，宣称治疗儿童湿疹等皮肤病的产品不属于化妆品。</p>
</div>
<div id="div14">
<div id="div14-1">
<p style="color: #858180;font-size: 50px;">累计评价</p></br>
</div>
<div id="div14-2">
<p style="color:#858180;font-size: 50px;">与描述相符</p>
<p style="color:#858180;font-size: 50px;"><span style="color: #ff7a4d;font-size:50px;width: 30px;">4.6</span></p>
<p style="color:#858180;font-size: 50px;" ><span style="color: yellow;">★★★★★</span></p>
</div>
<div id="div14-3">
<ul>
<p style="color:#858180;font-size: 100px;"><li><a href="#">非常不满意（5）</a></li></p>
<p style="color:#858180;font-size: 100px;"><li><a href="#">不满意（2）</a></li></p>
<p style="color:#858180;font-size: 100px;"><li><a href="#">一般（2）</a></li></p>
<p style="color:#858180;font-size: 100px;"> <li><a href="#">满意（2）</a></li></p>
<p style="color:#858180;font-size: 100px;"> <li><a href="#">非常满意（10）</a></li></p>
</ul>
</div>
<div id="div14-4">
<div id="div14-4-1">
<p style="color:#858180;font-size: 50px;">颜色实测还是适合皮肤偏白的比较好看些～,也太好看了吧,在手臂试色倒是有点水光感,从上到下是01,大爱唇釉的质地,正品！整体评价好保湿效果还行,原相机拍摄,,w02一个是橡皮粉,不吃东西的时候不会掉色,真的变白了,很好的染唇液爱了..
</p>
<img style="width: 200px;" src="img/7.jpg">></br>
</div>
<div id="div14-4-2">
<p style="color:#858180;font-size: 50px;">颜色分类：W01 蜜桃荔枝饮</p>
</div>
<div id="div14-4-3">
<p style="color:#858180;font-size: 50px;">x***0（匿名）<span style="color: #ea9f08;">超级会员</span></p>
</div>
<div id="div14-4-4">
<p style="color:#858180;font-size: 50px;">颜色实测还是适合皮肤偏白的比较好看些～,也太好看了吧,在手臂试色倒是有点水光感,从上到下是01,大爱唇釉的质地,正品！整体评价好保湿效果还行,原相机拍摄,,w02一个是橡皮粉,不吃东西的时候不会掉色,真的变白了,很好的染唇液爱了..
</p>
<img style="width: 200px;" src="img/8.jpg">></br>
</div>
<div id="div14-4-5">
<p style="color:#858180;font-size: 50px;">颜色分类：W08 粉提荔枝饮</p>
</div>
<div id="div14-4-6">
<p style="color:#858180;font-size: 50px;">q***n（匿名）<span style="color: #ea9f08;">超级会员</span></p>
</div>
</div>
<div id="div15">
<div id="div12-1">
<p style="color: #858180;font-size: 50px;">图片详情</p></br>
</div>
<div id="div15-1">
<center><img style="width:900px;" src="img/9.jpg"></center></br>
<p align="center" style="color: #858180;font-size: 50px; font-family: 黑体">礼盒</p>
</div>
<div id="div15-1">
<center><img style="width:850px;" src="img/11.jpg"></center></br>
<p align="center" style="color: #858180;font-size: 50px; font-family: 黑体">色号展示</p>
</div>
<div id="div15-1">
<center><img style="width:680px;" src="img/12.jpg"></center></br>
<p align="center" style="color: #858180;font-size: 50px; font-family: 黑体">效果展示</p>
</div>
<div style="margin-top: -800px;" id="div13">
<center><p style="font-family: 黑体;font-size: 100px;color: #966d95;list-style: none;">INTO YOU</p></a></center>
</div>
</div>
</div>
</div>
</body>
</html>
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、按钮设置样式不好看（下次可以改进）
下次一定注意！！！
