发表于: 2018-07-11 20:51:03

4 772


今天完成的事情:今天完成了任务八任务九,然后写了任务八任务就的深度思考还有任务总结,然后做了一部分任务十,看了栅格系统的嵌套.


明天计划的事情:明天继续写任务十.


遇到的问题:今天遇到的问题,就是栅格系统的嵌套,然后今天看了些资料,明天早上写出来.



收获:栅格系统的嵌套:

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12



任务八深度思考

1.如何实现轮播图?

1.先让图片轮播起来。基本就是写一个 play函数里面加定时器,每次使图片的index对象加一,当index大于最大值时,设置index等于第 一张图片.这样轮播图就动起来了。

    2. 轮播图动起来基本就是只显示一张图片隐藏其他的图片。我上面使用的是opacity 。

    3. 图片下面的按钮。主要就是使下面的按钮与上面的图片一一对应。然后点击下面的按钮显示对应的图片。

     4. 左右的上一张和下一张按钮。点击左边的上一张按钮图片向前显示,实现原理就是使 index 对象减一。点击左边的下一张按钮图片向后显示,实现原理就是使 index 对象加

    5. 对应上一张和下一张连续点击的问题就是给这两个按钮加上延时器。

    6. 当鼠标放在轮播图区域时停止轮播,实现原理就是清除定时器,离开开始轮播就是加上定时器。


2.如何用css写一个简单的幻灯片效果页面?

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation。

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。

Animation字面上的意思,就是“动画”的意思,

使用CSS3的Animation制作动画,实现简单的幻灯片效果,可以省去复杂的js,jquery代码。Animation有一点不足之处,

运用Animation能创建自己想要的一些动画效果,但是有点粗糙,如果想要制作比较好的动画,大家还是使用flash或js等。

Keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,

后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,

有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的,

如“0%”到"100%"之间,我们可以在这个规则中创建多个百分比,

我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,

比如说移动,改变元素颜色,位置,大小,形状等,不过有一点需要注意的是,

可以使用“fromt”“to”来代表一个动画是从哪开始,到哪结束,

也就是说这个"from"就相当于"0%"而"to"相当于"100%",值得一说的是,

其中"0%"不能像别的属性取值一样把百分比符号省略


3.主流浏览器内核有哪几种?

1.Trident/IE内核

2.Gecko/Firefox内核

3.WebKit内核

4.Presto内核


4.什么是外边距重叠?重叠的结果是什么?

相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

结果就是他们将合并形成一个外边距。


5.div+css的布局较table布局有什么优点?

1.符合W3C标准,代码结构清晰明了,结构、样式和行为分离,带来足够好的可维护性。

2.布局精准,网站版面布局修改简单。

3.加快了页面的加载速度(最重要的)(在IE中要将整个table加载完了才显示内容)。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签,提高另外搜索引擎对网页的搜索效率。


6.bootstrap有哪些常用组件?

1.轮播图

2.下拉菜单

3.响应式导航栏


7.css有哪些方式可以实现垂直居中?

table的vertical-align属性

一个top设为50%、margin-top设为内容高度的一半、绝对定位的div

line-height设置行高

8.margin负值在页面布局中有哪些应用?

多列等高布局

圣杯布局

双飞翼布局



1.如何使用bootstrap栅格系统?

在Bootstrap中使用栅格系统非常简单方便,只需要在你的div中引入它们已经定义好的类即可。
Bootstrap有几种栅格类可以使用:
1. .col-xs-* 这是超小屏幕类(<768px),类似手机等设备。
2. .col-sm-* 这是小屏幕设备类(≥768px且<992px),类似平板设备。
3. .col-md-* 这是中型设备类(≥992px且<1200px)。
4. .col-lg-* 这是大型设备类(≥1200px)。

你可以通过使用这些对应设备的栅格类来决定自己应用在不同设备上的布局样式。


2.媒体查询如何使用?

@media 媒体类型and (媒体特性){你的样式}

注意:使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔。


3.响应式的优点与缺点?

优点:

兼容性好,跨平台,移动设备尺寸参差不齐,版本定制通常只适用于固定规格的设备,但不适用分辨率变化较大的设备。

方便改动,响应式设计是针对页面的,可以只对必要的页面进行改动,其他页面不受影响。

缺点:

1.页面加载的代码多了,导致文件增大,影响加载速度;

2.在响应式设计中,图片、视频等资源一般是统一加载的,这就导致在低分辨率的机子上,实际加载了大于它的显示要求的图片或视频,导致不必要的流量浪费,影响加载速度;

3.局限性,对于响应式,局限性较大,不适合一些大型的门户网或者电商网站,一般门户网或电商网站一个界面内容较多,而响应式最忌讳较多内容,代码过多会影响运行速度。





css8-9任务总结


任务耗时:12天,超出预期3天

任务链接:https://wjxhd.github.io/task/html/task8-1.html

脑图:



收获:css8-9学习bootstap布局,然后学习媒体查询.

一个栅格布局需要3部分组成——容器(container)行(row)列(column,也可称为栅)。容器是用于确定宽度的,行需要放到容器中;行是将列分组,并把一组列合并为一个行;列是正真的显示内容的元素,我们的内容就写在列里面

完善的栅格布局框架,都会提供一个类似自适应布局一样的声明列宽的class类。首先系统把容器分为若干份,这个总份数一般都是3、4的倍数,这样利于排版。然后再提供若干代表份数的类,让列去继承,这样列就会占据容器总宽度的指定份数(span)了。


Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果

@media 媒体类型and (媒体特性){你的样式}
注意:使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔



返回列表 返回列表
评论

    分享到