发表于: 2019-11-29 21:17:02
2 875
今天完成的事情:
1.修改任务8,9
明天计划的事情:
任务
遇到的问题:
收获:
修改任务8、9出现的错误
感谢师兄为我指出的各个不足之处,最近毕业有点忙今天才修完,以下为收获分析:
1.boostrap的响应式导航栏
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- 汉堡按钮 -->
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 折叠列表 -->
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="index.html">首页</a>
</li>
<li>
<a href="profession.html">职业</a>
</li>
<li>
<a href="profession.html">推荐</a>
</li>
<li>
<a href="company.html">关于</a>
</li>
</ul>
</div>
</nav>
参考修改样式资料:https://ask.csdn.net/questions/706081
https://www.cnblogs.com/CherishZeng/p/9525497.html
https://wenda.so.com/q/1468810499720081
2.css3动画
首先定义一个动画,然后在css选择器的animation属性中使用。
@keyframes myfirst{
0% {
top: -100%; /* position的top值使用百分比,相对于其父元素 */
}
100% {top: 0;}
}
@keyframes中除了百分比,也可以用from、to
.hidde {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 270px;
height: 312px;
padding: 0 15px;
font-size: .7rem;
animation: myfirst 1s; /*“myfirst”这个动画的时长为1s */
color: #fff;
background: rgba(120,120,120,.8);
}
评论