task14
本来计划任务14，但是任务9有许多小细节，需要更改，先更改任务9
1.页面图标视口，压缩，会拉伸变形
因为：flex-shrink默认属性为1，
当宽度不够时，自适应压缩
解决：添加flex-shrink：0
2.三个页面可以共用头部和底部，不用每次都再写一一遍，
找到的语法:
<div id="page1"></div>
<div id="page2"></div>
<script>
$("#page1").load("page/Page_1.html");
$("#page2").load("page/Page_2.html");
</script>
ps:要引入的公共html页面，无需把页面写完整，只需要包括我们所需的代码片段就可以。
因为一个html页面只允许存在一个body，去掉所有的<html><body>标签
在实际操作中，因为task9分开做的，每个都有细节的差别，所以在开始任务14时，
从新的开始，不受代码混乱的影响
分别更改代码
明白语义化和结构化的意义，一定要有个统一易读的样式，多加注释，
非常简单的东西，却用了大量时间
3.在缩小之后隐藏箭头
解决：用媒体查询
@media screen and (max-width: 992px) {
.main-2-ioc{
display: none;
}
}
ps：
菜鸟教程中，关于网格宽度有容器宽度和容器宽度
网格宽度的触发点（宽度）是设备的像素，而不是容器的像素，
所以媒体查询触发宽度是设备宽度
4.学院页面缩小之后的上下间距
解决：重新设置col的内边距
5.战略企业部分
遇到问题:
图片在有多个时，由于flex属性，图片等高，
但当一行时，图片不等高，有各自默认高度
解决：
1.直接为包裹图片的格子设置高度，和外边距
height: 200px;
margin:2rem 0;
换行解决，但是成一行时，又拉伸了图片，变丑
解决方法：
两种
1.简单：直接为高度设置max-height：200px；
图片自适应高度最大就会限制在200px
2.稍复杂：设置媒体查询，在图片换行时height：200px生效；
6.友情链接
下划线沾满全行，在成一行时左对齐
原因：下划线是文本下方的盒子，设置悬停出现，所以下滑线是整个父元素宽度，随着父元素的宽度而改变
解决：要设置下划线不能占据整个父元素的宽度，而是文本的宽度，
开始想法：先设置盒子包裹文本，然后为盒子设置display：flex；
其中的子元素宽度由内容撑开，然后设置底部边框，颜色为背景色，
在此基础上，设置鼠标悬停，改变边框颜色
现在想法：总结时发现多此一举，多设置了一个盒子，把盒子属性直接移动到格子上就行，
文本用的是p标签，不是span标签，就是默认父元素宽度，为栅格添加display：flex；
p标签宽度就由其中的文本撑开
还有链接部分代码优化，
改变后一个col（列）里面可以由多个row（行），可读性更高，
原先设置的一个col对应一个row，代码就显得冗余，可读性不高。
设置最后单行，不好看，默认两行排列，用媒体查询，在成一行排列时，
为两个row的父元素设置flex布局，使他们并列
@media screen and (max-width: 768px) {
.footer-1-flex{
display: flex;
}
}
显示:
遇到问题：
再没换行之前，格子宽度不够，自动换行
原因：栅格布局弹性属性自适应
解决：为文本添加flex-shrink:0;属性，就不会压缩文本，而是边距，
显示:
遇到问题:需要图片有字围效果
为图片设置浮动向左float:left;
原理:浮动脱离文档流,但是不遮盖文本,文本流出形成字围效果
设置内边距,使图片外围与溢出文本平行
遇到问题:
侧边栏整体,比主体多一截
原因:是在侧边栏找原因,因为比底部多,结果,用了好长时间没有找到,
结果是在主体部分找到了,col有默认的外边距,padding:0 15px;
在占整体一行后,默认宽度100%,所以根据弹性布局,向内压缩,就造成如上图所示,
比上图窄了30px.
解决:
为主体部分设置padding:0;
但是原本视图变形
解决:
为侧边栏同样设置内边距
同样无法实现
设置冲突:
栅格布局,col只有内边距没有外边距,直接为栅格布局的格子设定边框,边框是紧贴在一起的,边框之间需要边距,
而为col设定外边距,会使row一行超过设定宽度产生换行,所以解决问题,在col内部嵌套一个盒子,在其中设定内容,并且
为盒子设定边框,把栅格默认的内边距,当成盒子的外边距使用.
因为原本的代码,只为主体这样布局,所以当换行成占满整行时,主体边框呈现的宽度就会比侧边栏少30px,
即:一边内边距在边框内,一边在边框外,如果不改变两边边框的包含关系,更改属性就会,不断出现其他错误
解决:为侧边栏设置与主体同样的布局
遇到问题:
同样的样式,设置,首页和介绍不识别
待解决:
返回列表
评论