发表于： 2017-07-15 22:04:28
0 839
今天完成的事情：用bootstrap写了前台页面的导航栏和底部，由于一开始不理解，采用了栅格布局，发现导航栏并不能自适应，后来就删掉了导航栏的栅格。做了导航栏的css3hover动画，对动画有了更多的了解；引用了font-awesome的字体图标样式。拆分了任务。
遇到的问题：任务拆分的不够细致，分工不够明确。感觉经常大家一起做一个事情，有点浪费时间。
明天计划的事情：详细的拆分任务，完成前台的静态页面。
收获：更加熟悉了bootstrap导航栏的写法，也更加了解了css3动画。
响应式导航栏写法：
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!--header section -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand Name</a>
</div>
<!-- menu section -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="# ">Home</a></li>
<li><a href="# ">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
</nav>
css3动画：css3的动画非常简单，主要就是用animation属性给出动画的名称和持续时长，然后用@keyframes定义动画的效果，但是要注意兼容性。下面是一个例子
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
返回列表
评论