发表于： 2019-10-12 23:02:15
1 797
导航栏调整样式
遇到问题：
导航栏链接没有下划线，且设置样式不识别
原因;nav-link属性
解决;换一种方法，外包裹一层盒子，把浮动设置在盒子边框上，再在盒子内<a>标签后，添加一个盒子为边框设置隐藏和浮动属性，设置鼠标悬停下划线
.nav-item:hover .nav-li{
visibility: visible;
}
.nav-li{
visibility: hidden;
border-bottom: 1px solid white;
}
<ul class="navbar-nav justify-content-end" style="width:100%">
<!--链接组(导航组)-->
<li class="nav-item">
<a class="nav-link nav-a" href="#">首页 </a>
<div class="nav-li"></div>
<!--链接-->
</li>
调整main样式，要调整，不同宽度下，主体有不同的样式
设置统一对齐
栅格嵌套都在col-8 offset-2中class=row
总结：关于sm md lg xl
单个设置，当视口宽度，大于要求最小宽度时，布局，按前面设置的数字，
当小于要求的最小宽度时，布局，按默认设置（默认12，即容器宽度）
当设置多个时，布局，按照要求最小宽度由大到小，前面的数字要求设置，直到默认布局
在底部插入图片部分
遇到问题：
因为单独col的默认属性， flex-basis属性，导致想法不能实现，
解决：
开始想的用.flex-fill属性，因为在设置了具体col-**属性之后，就不会受到flex-basis属性的影响，
但是无法平均分成5份
想到的解决方法：
1.用媒体查询，更加灵活额设置宽度
2.用.flex-fill属性，每个格子设置，达到等宽，
ps;能达到同样效果的还有.flex-grow-1，用于扩展父元素剩余宽度，为每个子元素都设置的话，
就和.flex-fill属性，等宽效果相同，
3.但是，col的识别属性覆盖上，有很多自己想不到的问题，还是用了，以下方法
在图片外嵌套一个盒子，让栅格识别盒子，相当与，在平均分成5份的格子中，
每个独立的格子中分别插入图片，然后让图片自适应布局，
<div class="row">
<div class="col-lg col-md-6 p-0">
<img class="main-4-img" src="a.png" />
</div>
<div class="col-lg col-md-6 p-0">
<img class="main-4-img" src="b.png" />
</div>
<div class="col-lg col-md-6 p-0">
<img class="main-4-img" src="c.png" />
</div>
<div class="col-lg col-md-6 p-0">
<img class="main-4-img" src="d.png" />
</div>
<div class="col-lg col-md-6 p-0">
<img class="main-4-img" src="e.png" />
</div>
遇到问题：因为图片大小不同，所以在统一高度下有几个图片没有，填满容器
解决：
1.设置
text-align: center;
width:
height:
line-height:
图片水平垂直在容器里居中
2.为图片设置
background: url("image.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;
使图片铺满容器，显示如上
然后为给容器设置浮动阴影效果，选择了方法二
遇到问题：
不管是为图片设置阴影，还是边框，设置阴影，在没有悬停的情况下，都会使其包含的内容跟着一起隐藏
解决;不设置阴影隐藏，悬浮阴影出现这个步骤，而是这届设置悬浮出现阴影
.main-4-img:hover{
box-shadow: rgb(230 230 230) 0rem 0rem 2rem;
遇到问题：阴影没有完全出现
解决：设置z-line，无效
思考原因：是为图片直接设置阴影，外面还嵌套了一个父元素，
为图片设置的z轴只能影响到同一个容器下的元素，而不能影响到与父元素同级的其他父元素，
因为是父元素是图片撑开的，且父元素之间没有边距，所以，根据后来居上原则，图片阴影会被
与它的父元素相邻的另一个图片的父元素覆盖，
最后一个图片阴影没有被覆盖，思考正确
解决：把阴影悬浮，设置在图片的父元素上
ps:因为根据范例样式父元素间没有外边距，还是会被后来居上的遮盖右边阴影，阴影设置在父容器上，
解决的问题是z-line无效，无法影响到父容器之外，这么设置后，容器同级z-line属性生效
为尾部的第一部分设置属性
.footer-1-p{
color: rgb(153,153,153);
font-size: 1.2rem;
text-align: center;
}
<div class="col-lg col-md-2 col-sm-4 m-1 p-1">
<p class="footer-1-p">· 手机软件</p>
</div>
用浮动直接设置下划线
.footer-1-p:hover{
border-bottom: 1px solid rgb(38, 162, 111);
}
遇到问题：鼠标悬停出现下划线，会因为突然多出1px，使底部布局footer-2下移1px，然后恢复，出现类似抖动的效果
解决：单独设置下划线，用visibility: hidden
它的属性实际存在不可见
.footer-1-p:hover .footer-1-box {
visibility: visible;
}
.footer-1-box {
visibility: hidden;
border-bottom: 1px solid rgb(38, 162, 111);
}
<div class="col-lg col-md-2 col-sm-4 m-1 p-1 footer-1-p">
<p>· 手机软件</p>
<div class="footer-1-box"></div>
</div>
任务8首页完成
收获：如上
遇到问题：做任务，看下资料，就跟着做，一些基础属性，不熟，或者自以为的没有效果，没有特意去记忆，
导致结果，步步都是坑，属性不能灵活运用，所以磕磕绊绊，花了大量时间
明天计划：
1.总结下之后该怎么学，本来都计划着任务9的，结果被琐碎的小问题牵绊了大量时间
2.看看任务8之后还有什么把，打脸都敢说继续任务9了
返回列表
评论