发表于： 2019-04-05 20:23:54
1 867
今天完成的事情：今天突然发现bootstrap源码下载错版本了，又下载了一遍。然后把又container单独写在了一个组件库里。
明天计划的事情：明天计划手写一个导航栏出来
遇到的问题：纯CSS导航栏
第一步在我们的电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none;是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化，如下图所示：
第二步我们在html页面body里面编写导航栏内容，可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航栏，完整代码如下图所示：
第三步我们在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏，如下图所示：
第四步我们将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化，如下图所示：
第五步我们也可以制作成水平导航栏，overflow: hidden;代码的意思是超出高度和宽度的部分自动隐藏，float: left;使导航栏水平显示，完整代码如下图所示：
第六步我们在浏览器中打开页面，可以看到制作出美观的水平导航栏，如下图所示：
收获：又进一步了解了组件库的应用
返回列表
评论