发表于： 2019-10-14 04:15:37
2 1018
昨天师兄告诉我了为什么那里输入没有换行 原来是因为英文字母默认是不换行了，我想起来我以前看视频也是有讲的，这时候我就发现了做笔记的重要性。 我争取每天都写笔记。
1.我在做任务14的时候 遇到一个问题就是 页面要求 hover的时候 小圆点跟文字都要在下边框里面 ，但是原生li的圆点hover下边框的时候不会盖过原点。
我的解决方案就是 直接取消原生的li圆点 list-style: none; 然后利用before这个 写 li:before{content:"•”;} 这样就可以添加圆点了。
before 选择器是在被选元素的内容前面插入内容，也就是在你li标签里的内容前面加了一个内容，再设置这个内容的边框
2.这个是我今天遇到比较困难的 刚开始我以为很困难 然后我理清思路以后才想清楚怎么做。
问题是有个有序列表 在不同分辨率下面要有不同的样式 如下
下面就是代码了 html代码
<div class="baibgc ">
<div class="container ">
<div class=" gxx ptb-28">
<b class="">友情链接</b>
</div>
<div class="foots">
<ul class="foots1">
<li> <div class="wanwan"> 手机软件</div></li>
<li> <div class="wanwan"> 教师招聘 </div></li>
<li> <div class="wanwan"> 找工作 </div></li>
<li> <div class="wanwan"> 教师招聘 </div></li>
<li> <div class="wanwan"> 找工作 </div></li>
<li> <div class="wanwan"> 手机软件 </div></li>
<li> <div class="wanwan"> 教师招聘 </div></li>
<li> <div class="wanwan"> 手机软件 </div></li>
<li> <div class="wanwan"> 手机软件 </div></li>
<li> <div class="wanwan"> 找工作 </div></li>
</ul>
<ul class="foots1 foots2">
<li> <div class="wanwan"> 手机软件</div></li>
<li> <div class="wanwan"> 教师招聘 </div></li>
<li> <div class="wanwan"> 找工作 </div></li>
<li> <div class="wanwan"> 教师招聘 </div></li>
<li> <div class="wanwan"> 找工作 </div></li>
<li> <div class="wanwan"> 手机软件 </div></li>
<li> <div class="wanwan"> 教师招聘 </div></li>
<li> <div class="wanwan"> 手机软件 </div></li>
<li> <div class="wanwan"> 手机软件 </div></li>
<li> <div class="wanwan"> 找工作 </div></li>
</ul>
</div>
</div>
// 这个是小分辨率下面用
.foots {
@media only screen and (max-width: 1021px) and (min-width: 769px) {
display: flex;
width: 100%;
.foots1 {
width: 50%;
}
.foots2 {
display: flex;
flex-direction: column;
align-items: flex-end;
}
}
}
.foots1 {
@media only screen and (max-width: 3300px) and (min-width: 1301px) {
display: flex;
justify-content: space-around;
}
@media only screen and (max-width: 1300px) and (min-width: 1022px) {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
li {
width: 20%;
text-align: center;
}
}
@media only screen and (max-width: 999px) and (min-width: 1px) {
text-align: center;
}
li {
font-size: 14px;
color: rgb(153, 153, 153);
@media only screen and (max-width: 766px) and (min-width: 1px) {
display: flex;
justify-content: center;
}
@media only screen and (max-width: 4000px) and (min-width: 1022px) {
display: flex;
justify-content: center;
}
}
}
.wanwan {
white-space: nowrap;
width: 79px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: 1px solid white;
}
.wanwan:before {
content:"• "
}
.wanwan:hover {
border-bottom: 1px solid green
}
首先在大于1300px宽度的时候 我就可以直接ul里面的 display: flex; justify-content:space-around; 这两个参数就可以了 如下图
然后到 1300px -1022px 这个宽带里面 我就给ul display: flex; justify-content: space-around; flex-wrap: wrap; 同时设置li为宽度width: 20%; 这个每5个li 就变成100% 宽度了，就是自动变成两行了。
这里是需要里面的li是 display：flex； justify-content: center;
然后再最大宽度1021px到769px宽度里面给.foots 这个大盒子display: flex;width: 100%;
其中右边的ul 给display:flex; flex-direction: column; align-items: flex-end; 就是下面这样效果了。
这里的是不需要里面的li是 display：flex； justify-content: center;的
最后最小分辨率就是里面的li是 display：flex； justify-content: center; 就可以了。 如下图
这个就是我做这个媒体查询的无序列表教程了。
- 我学到了text-indent: 2em; 这样就缩进两个空格了。 以后问题里面需要缩进的话 就用这个代码。
返回列表
评论