“小白的我”第14天日报
今天完成的事情:
1.提前完成了今天的目标,做完了任务6,已经通过了审核。
明天计划的事情:
1.学习任务七需要的知识点,并做一部分内容,加深对任务七的理解。
遇到的问题:
1.对选择器不熟悉,不清楚div p{}的含义,导致部分代码没有达到效果;
2.太过依赖雪碧图,不知道如何用css写出三角形的图标;
3.第一次做下拉菜单,不知从何下手。
解决方案:
1.被师兄指出问题,并建议我多去看看选择器这一个知识点:
div, p 选择所有<div>和<p>元素;
div p 选择<div>内所有的<p>元素;
div>p 选择所有父级是<div>的<p>元素;
div+p 选择所有紧接着<div>元素之后的<p>元素;
p~ul 选择p元素之后的每一个ul元素。
2.在师兄的提醒下,自己找资料写了出来:
html:
<body>
<div class="triangle-down">
</div>
</body>
css:
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #999999;
}
3.我是自己找的资料然后师兄指点了一下:主要是设置下拉菜单display:none,然后在button中设置伪类display:block的方式把下拉菜单做出来的:
html:
<button class="seat">
<span class="triangle"></span>
<span class="there">所在地</span>
<div class="site">
<a class="locus" href="#">北京</a>
<a class="locus" href="#">上海</a>
<a class="locus" href="#">深圳</a>
</div>
css:
.seat:hover .site {
display: block;
}
.triangle {
position: absolute;
right: 7%;
top: 50%;
width: .07rem;
height: .04rem;
background: url(../img/css_sprites.png) no-repeat -118px -88px;
}
.site {
display: none;
position: absolute;
width: 100%;
background-color: #E1E5E7;
}
.locus {
text-decoration: none;
display: block;
color: #5FC0CD;
background-color: #FFFFFF;
}
.locus:hover {
color: #FFFFFF;
background-color: #5FC0CD;
}
收获:
1.今天完成的任务6熟悉了position的用法,现在已经可以熟练地运用position了,flex还差一点;
2.学会了如何制作自定义的下拉菜单和熟练运用雪碧图技术;
3.能够独立码出近四百行代码了。
评论