发表于： 2019-09-25 09:54:08
1 899
今天完成的事:
结果页面
整体结构:
根据范例,大的结构
分为三部分header,main,footer
header背景色为
因为main部分要有滚动
所以,为头部设置
position: fixed;/*固定定位,头部脱离文档流,固定在顶部*/
width: 100%;/*脱离文档流,没有默认宽度,要主动设置,不设高度,子元素自动撑开,高度就是所有子元素只和*/
z-index: 1;/*层叠属性,为z轴设置为1,避免被主体覆盖*/
background-color: rgb(41,189,224);
header部分又分成三个部分,top,center,bootom
header_top布局
可以用flex布局
默认属性排成一行
justify-content:space-between属性
两端对齐,间隔相等
align-items:center属性
垂直居中
然后设置各个部位的参数,微调,结果如下
header_center
遇到问题:ps切图,一个图标在两个图层,
思考:单独切,再分别定位合成,不利与之后的微调,所以需要切成一个图层
解决:按住shift键,点击选择要选的两个图层,就会同时选中
(选择的两个图层和它们之间的图层都会被选中,再按ctrl键,点击不需要的图层,取消选中)
header_center布局
设置一个盒子
宽用默认值,高用子元素撑开
插入图片
在图片下方添加文本
因为图片和文本都有宽度,所以可以用margin:auto,实现居中
运用负值,和后来居上的层叠原来,微调,实现文字出现在图片上的的效果
遇到问题:
图片没有居中
思考:img是行内元素,宽度默认整个宽度,所以margin:auto无法生效
解决:为img添加display:block属性,把它变成块元素属性,解决
遇到问题:文字没有居中
解决:
用text-align:center;
思考:p标签本身就是块级元素,文字本身也赋予了高度,宽度,为什么margin:auto无效?
遇到问题:微调后,下方没有背景颜色
代码:
.header_center_ioc{
display: block;
margin:20px auto;
}
.header_center_txt{
text-align: center;
font-weight: 600;
font-size: 50px;
color: white;
margin-top:-97px;
}
思考:为什么会变成这个样子?
在没有为<p>标签设置负边距之前,显示结果如下,以插入图片的下方为界限,
插入图片设置margin:20px auto,下方外边距20px,<P>标签本身高度是67px,两个相加,也就是说,下方外边距加上,p元素本身的高度,为header部分
(向下)增加了87px的高度
设置margin-top:-97px,显示结果为
也就是说为了实现图中p元素所在的位置,高度向上移动(减去)了97px,97-87=10,所以就相当于,图标底部向上移动了10px,这一部分背景颜色
没有覆盖,呈现出如图的样子.
解决:
1.原本打算单独为图片设置下下边距,但是一想,下边距增加,p向上移动的距离也会增加,反之,也会减少,所以,这个方法,恒定,底边向上10px
失败
2.根据范例在下方继续添加元素,只要设置margin-top:10px以上,就可以避免重叠
3.为父级元素设置边框,需要了解资料什么是BFC？
header_bottom布局
有上下两个不同的文本构成
上边文本可以设置两边的外边距20%,使之居中换行,
.header_bottom_txt_1{
margin:40px 20%;
font-size: 40px;
font-weight: 600;
color:rgb(255,200,101);
}
下部文本用盒子框起来,设置
.header_bottom_2{
margin:40px 20%;
}
在其中设置文本样式,分别有三种,
1.正常设置文字大小,和颜色
2.在1基础上设置浮动,一行
3.在2基础上设置左边边距
4.在2基础上清清除浮动
遇到问题:
空格只能识别一个,如何添加更多空格(行间距)
解决:
1.在html页面需要的地方添加
一个 相当与一个空格
2.在css里用字间距设置
3.用边距属性设置
(千里之行始于足下,向一个合格程序员看起,三种方法)
第二种样式设置
也可以用flex弹性布局加外边距实现
遇到问题:
clear:both
清除浮动,之后,左右都不在一行
float:none
解决:清除右边浮动,clear:left
需要了解属性:clear:both|left|right|none;
(ps.阻击手文本在本例中,犹豫敞口原因,用2样式,可以实现范例样式,但是窗口拉大之后就会排成一行,因此不可取)
添加clear:left
清除浮动一共四个属性
clear:both|left|right|none;
我都测试了一下
首先box1 设置右clear:right 来达到不在同一行的目的
效果
思考:没有达到理想的效果?
把第二个元素box2设置clear:left;
box1 box2 不在同一行了 实现了目的
那为什么box1设置clear:right 不好使呢
因为box1 只能通过改变自己的位置来让自己右边没有浮动的元素
就像生活中 你改变不了别人 但是你可以改变自己
但是 box1就算改变了自己位置 box2 还会紧跟着box1的 因为浮动元素都是脱离文档流的
并且脱离文档流的理应去找脱离文档流的元素 因为元素变成了特殊的inline-block类型
有宽高 并且不换行 inline 和 block 特征合体
这里box1 就算清除右浮动 box2还是会跟着它 最终结果 box1 box2 box3 还是在一行
ps 可能你会想 那box1 跑到下一行 让box2 box3 不动就好了 那不行的 清除浮动 不是float:none 都是浮动 并且 在html
中box1 box2 box3 是依次创建的
遇到问题:同上
收获:
1.更加深入的了解了层级属性
2.更加深刻的学会了clear的用法
3.加深了float属性的认识,学到了在各种需求中,正确的运用clear:both|left|right|none;和float:none
明天计划:
1.完成结果页面
2.在完成task7页面布局样式与范例的一致后,添加task7对于功能的需求
3.争取完成任务7,开始任务8
返回列表
评论