发表于： 2020-04-12 23:06:48
0 1356
编辑日报内容...
一.今日完成的内容和收获：
（一）为各个页面之间添加跳转
（二）完成代码的优化和自适应布局
（三）配置nginx能够在PC端和手机端正常访问
（四）什么是css sprites？（雪碧图）
1.定义：把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置，这样可以将原本需要多张图像文件分别显示，整并为单一图像文件的分区显示技术
2.优点：
（1）减少网页http请求，大大的提高了页面性能
（2）减少图片的字节
（3）减少的在图片命名上的烦恼，只需对一张集合的图片进行命名，不需要对每一个元素进行命名，提高制作网页的效率
3.缺点
（1）在合成图片时，要留出足够的空间，防止板块内出现不必要的背景。若在宽屏和高分辨率的屏幕下的自适应页面，若图片不够宽，很容易出现背景断裂。
（2）由于图片的位置需要固定为某个绝对数值，这样就会失去center一类的灵活性
4.制作
打开网站https://www.toptal.com/developers/css/sprite-generator
（1）在左侧放入想要制作雪碧图的小图
（2）在右侧选择下载
左侧的代码就可以实现目标图片的位置选择
（五）rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？
1.rgba（红，蓝，绿，alpha）
（1）前三个值（红蓝绿）的范围是0 — 255之间的整数，需要什么颜色可以去查询该颜色对应的rgb值
（2）第二个alpha值：它的范围是0-1之间，表示色彩的透明度；0表示完全透明；1表示完全不透明；0.5为半透明
2.opacity（div元素的不透明级别）
（1）语法
div {
opacity：0.5；
}
（2）取值0-1 之间（0表示完全透明，1表示完全不透明）
3.区别
（1）rgba的作用对象是背景颜色或元素的颜色，不影响其子元素（本次任务七中就需要选用该属性，不然会影响其两个按钮的透明度）
（2）opacity的作用对象是元素，以及元素的所有内容，并且其子元素会继承其透明度
4.display与visibility区别（两者都可以起到隐藏的作用）
（1）display：none；控制隐藏的对象，不占用位置
（2）visibility：hidden；控制的隐藏对象，会占用原来的位置
（3）demo
<style>
.main {
display: flex;
}
.left-dis {
width: 50px;
height: 50px;
background-color: black;
display: none;
}
.left-vis {
width: 50px;
height: 50px;
background-color: black;
visibility: hidden;
}
.right {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
<body>
<div class="main">
<div class="left-dis"></div>
<div class="right"></div>
</div>
<div class="main">
<div class="left-vis"></div>
<div class="right"></div>
</div>
</body>
</html>
我们会发现第一行的盒子里面，左边黑色的盒子使用了display：none；属性，会发现原来的位置没有被保留，右边的盒子到了左边；
第二行的盒子里面，左边的黑色盒子使用了visibility：hidden；属性，原来盒子的位置依旧保留。
（六）描述下z-index和叠加上下文是如何形成的？
1.z-index：元素在Z轴上的呈现顺序。同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下；相同层叠级别时，遵循后来居上的原则，即在html文档中的顺序；不同层叠上下文中，元素呈现顺序以父级元级层叠上下文层的层叠级别来决定呈现的先后顺序，与自身层叠级别无关。
2.语法
z-index：auto（自动）| integer（整数） | inherit（继承）
注： 整数也可以为负值；只能应用于position属性为非static值（position： relative，absolute，fixed），其它情况下，z-index将被忽略
3.demo
<style>
.blue {
position: absolute;
margin-left: 20px;
width: 150px;
height: 150px;
background-color: blue;
z-index: 1;
}
.red {
position: absolute;
top: 40px;
margin-left: 40px;
width: 150px;
height: 150px;
background-color: red;
z-index: 2;
}
.yellow {
position: relative;
top: 60px;
margin-left: 60px;
width: 150px;
height: 150px;
background-color: yellow;
z-index: 3;
}
</style>
<body>
<div>
<div class="blue"> z-index: 1</div>
<div class="red">z-index: 2</div>
<div class="yellow">z-index: 3</div>
</div>
</body>
（七）什么是浮动？如何清除浮动？
1.float属性
（1）值：left（元素向左浮动）；right（元素向右浮动）；none（默认值，元素不浮动）
float属性会使元素脱离文档流，遇到父级元素边界或者相邻的浮动元素才会停下来
（2）浮动的特性
1）包裹性：一个块级元素不知道宽度的话，width默认为100%，一旦该div浮动起来，立刻会向inline元素一样产生包裹性，宽度会跟随内容自适应。
2）破坏性：元素浮动后可能会导致父元素高度坍塌。因为浮动脱离了文档流，而父元素还在正常流之中，所以父元素不能被浮动元素撑大，导致浮动元素的父元素高度自适应而高度坍塌（父元素不写高度时）。
2.清除浮动
（1）clear属性
1）left：元素左侧不允许有浮动元素
2）right：元素右侧不允许有浮动元素
3）both：元素左右两侧均不许有浮动元素
<style>
.box1 {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background-color: blue;
}
.box2 {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background-color: yellow;
clear: left;
}
.box3 {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
第二个盒子clear：left，清除左侧浮动元素，然后到了第二行
（2）给浮动元素父元素设置高度
高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了.
缺点：在浮动元素高度不确定的时候不适用
（3）给父级元素设置overflow属性（给父元素添加overflow：hidden属性）
通过出发BFC的方式，实现清除浮动的效果
优点：代码简洁）（若该父盒子里还有position定位会引起麻烦）
缺点：内容增多时，容易造成不会自动换行导致内容被隐藏掉
（4）使用after伪元素清除浮动
（5）使用before和after双伪元素清除浮动
二.遇到的问题
遇到的问题自行百度解决
三.明天的计划
进行任务八的学习
返回列表
评论