发表于: 2017-03-04 21:46:40
1 871
今天完成的事情:看bootstrap的资料,然后用bootstrap对任务6进行布局,布局列表主体部分,高度始终在列表头和footer之间,超出部分自动出现滚动条,给header添加居中的按钮组,居右的图标按钮,通过搜索引擎查看如何用css模拟下拉框,将列表头分做3列,分别模拟3个下拉选框。
遇到的问题:任务6的要求是导航栏跟header部分需要一直在顶部,用了bootstrap的class="navbar navbar-default navbar-fixed-top"属性设置,最开始导航栏跟header我是分开放的,分别用的bootstrap给它进行设置,但后来发现它们两个显示出来是重叠的,就把它们两个放在了一个盒子里面用bootstrap给它进行设置。导航栏跟header设置好,列表的主体部分设置class=“white-space:pre”主体部分会出现滚动条,但是发现主题部分是从body开始的,header和导航部分把一部分列表主体给覆盖了,就给它设置了margin-top,在这里我有个疑问,用bootstrap给设置了class="navbar navbar-default navbar-fixed-top"属性后,导航栏跟header一直在顶部显示,是不是它们就脱离文档流了,并且不占据空间?同时在做任务的时候发现bootstrap的许多组件都会有margin和border值,要根据页面的要求把它去掉。
明天的计划:继续做任务6,给footer添加3个按钮,制作列表主体,注意垂直居中,如果屏幕过窄时,设置左边的文字被截断出现”…”省略号,根据代码规范优化自己的代码。
收获:对用bootstrap给页面进行布局有了一定的了解。
评论