发表于： 2019-11-06 23:46:56
1 899
一、今天完成的事情
任务六做完了
进一步实践了代码规范
header、main、footer的应用
给header添加居中的按钮组，居右的图标按钮。
学习了通过搜索引擎查看如何用css模拟下拉框。
.list-left{
position: relative;
display: inline-block;
text-align: center;
width: 32%;
height: 40px;line-height: 40px;
background: url("img/three.png") no-repeat;
background-position-x: right;
background-position-y: center;
}
.list-left-button{
font-size: 17px;
border: none;
cursor: pointer;
background-color: white;
color: #dddddd;
}
.list-left-content{
display: none;
position: absolute;
background-color: #939393;
min-width: 100%;
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
}
.list-left-content a{
color: #dddddd;
text-decoration: none;
display: block;
}
.list-left-content a:hover {background: white}
.list-left:hover .list-left-content{display: block }
.list-left:hover .list-left-button{background: #f9f9f9}
这是实际的效果，当鼠标悬停在上面时，会出现下拉框，里面的内容在平时隐藏。
二、遇到的困难
新知识的应用不熟练，在实际情况下，会应用出错，头部的固定时，出现混乱，后来发现应该给一个高和宽，就解决了，对于在头部固定的情况下，下面的内容出现挤占的情况，应该给下面的内容一个外边距就可以了，不过要跟头部等高。
三、明天要做的事情
开始任务七
四、收获
进一步学习了代码规范，对于新知识的应用有所实践。任务总结之后会写。
返回列表
评论