发表于: 2018-12-12 20:34:44

1 828


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)

1、完成了轮播图的插件引用。 

昨天在把导航栏最后的一些自带用不着的属性给它覆盖后,引用了bootstarp的轮播图插件,但是就会出现导航栏的下拉菜单那里点击展开后轮播图的左右键就会往上移,因为轮播图用的是绝对定位,在设置样式覆盖属性的时候也设置了其他的属性样式,一般来说下拉菜单点击打开的时候会吧轮播图给挤下去,但是这里下拉菜单只是隐藏了,所以那部分的高度还在,不点开下拉菜单看上去是没问题的,点开就乱了。后来找师兄帮忙查看,发现下拉下单的问题,在引用导航栏的时候有多余没有的组件,因为这里用了媒体查询功能,所以在bootstrap中有下拉菜单的样式属性,但是这里不需要这个,媒体查询的运用已经让导航栏在768px以下会以汉堡菜单的形式展现,所以那个下拉组件可以去掉,对于媒体查询还不是很了解,因为引用bootstrap组件里也有很多属性不清楚,所以导致在引用轮播图的组件时会出现bug,后面重新引用了师兄修改的导航栏,加以修改才算是解决了这个下拉菜单影响轮播图的问题。


2、开始主体部分的代码编写。

任务要求是做成响应式,了解响应式。

响应式:可以让网站页面适应不同的移动端屏幕分辨率,反应速度很快,而且只需要写一套开发页面就行,这里就涉及到网格系统bootstrap。

响应式设计:是一个网站搭建的实践尝试,它使得每种设备和屏幕尺寸都能很好的工作,而不论是大屏还是小屏,手机或是pc。

响应式设计分三个部分:

1、流式布局。

就是用灵活的网格搭建一个网站布局,他可以动态的调整以适应任何屏幕的宽度。

网格布局使用相对长度单位,通常是百分比或em。这些相对长度多用于网格。例如宽度,间距或是留白等属性。


2、媒体查询。

是对媒体类型的一个扩展,因为经常发现目标设备自带样式,他为特定的浏览器和设备提供特殊的样式,能够为目标设备提供有针对性的样式,在响应式中发乎作用。

通常使用现有样式表@media规则,以避免多次触发http请求。

每个媒体查询可以包含一个或多个媒体类型。

常见的媒体类型有:所有(all)、屏幕(screen)、打印(print)、电视(tv)和盲文(braille)。html5中有添加了新的媒体类型,甚至包含3d眼睛(3d-glasses)。一个没有特别声明媒体类型的媒体查询,默认媒体类型是屏幕(screen)。

媒体查询中的罗技运算符,帮助建立强大的表达式。在媒体查询中有3个不同的罗技运算符,分别是与(and),非(not)和唯一(only)。

当同时用非和唯一罗技运算符,媒体类型就会失效,这种情况下,媒体类型是默认的所有设备。


3、灵活的媒体类型。


明天计划的事情:(一定要写非常细致的内容) 

完成首页的代码编写。


遇到的问题:(遇到什么困难,怎么解决的) 

暂时还没遇到问题。


收获:(通过今天的学习,学到了什么知识)

轮播图插件的引用。


返回列表 返回列表
评论

    分享到