发表于: 2019-05-26 21:34:25

1 743


今天完成的事情:

    今天解决了死亡的人不再被渲染为原来的颜色

明天计划的事情:

    开始渲染第二天
收获:

1.如何实现轮播图?

轮播图一般由logo,底部指示器和左右切换按键组成。

css轮播。

 

流程图解释:

1,把input[type="radio"]的一组按钮用设置相同name属性的方向进行关联,使得这组input可以切换。

2,用label标签可单向绑定input,点击label即可使相应的input被:checked。

3,多个label标签可绑定同一个input,分别为左右切换按钮和底部指示器设置一组label。

4,当input被:checked后,通过选择器可控制图片或label标签的样式。

5,input:nth-of-type(n)是选择input的父元素的第n个input子元素。

6,input ~选择input之后的兄弟元素。

js轮播。

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

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

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

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

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

(1)Trident内核

(2)Gecko内核

(3)WebKit内核

(4)Blink内核

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

外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。当我们上下排列一系列规则的块级元素(如段落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。

解决方案

外层元素padding代替

内层元素透明边框 border:1px solid transparent;

内层元素绝对定位 postion:absolute:

外层元素 overflow:hidden;

内层元素 float:left;或display:inline-block;

内层元素padding:1px;

5.div+css的布局较table布局有什么优点?
1、符合W3C标准的,W3C标准提出网页由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。结构清晰明了,结构、样式和行为分离,带来足够好的可维护性。

2、布局更加灵活多样,能够通过样式选择来实现界面设计方面的更多要求。

3、布局改版方便,不需要过多地变动页面内容,通常只要更换相应的css样式就可以将网页变成另外一种风格展现出来。

4、布局可以让一些重要的链接和文字信息等优先让搜索引擎抓取,内容更便于搜索。

5、增加网页打开速度,增强用户体验。

6.bootstrap有哪些常用组件? 

下拉菜单、导航、警告框、弹出框轮播图响应式导航栏

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

1、通过verticle-align:middle实现CSS垂直居中。

2、通过display:flex实现CSS垂直居中。

3、通过伪元素:before实现CSS垂直居中。

4、通过display:table-cell实现CSS垂直居中。

5、通过隐藏节点实现CSS垂直居中。

6、已知父元素高度通过transform实现CSS垂直居中。

7、到垂直居中的位置。

8、通过line-height实现CSS垂直居中。

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

1、对于自身的影响

static(非浮动、非定位)元素的margin-top/margin-left被赋予负值时,元素将被拉进指定的方向。

但如果你设置margin-bottom/right为负数,元素并不会如你所想的那样向下/右移动,而是将后续的元素拖拉进来,覆盖本来的元素。

如果没有设定width属性,设定负margin-left/right会将元素拖向对应的方向,并增加宽度,此时的margin的作用就像padding一样。

2、对文档流的影响

元素如果用了margin-left/margin-top时,元素自身会被拉向左/向上进行偏移,效果类似与position:relative。与之不同的是,在其后面的元素会补位,也就是后面的行内元素会紧贴在此元素的之后。

元素如果用了margin-right/margin-bottom时,元素视觉位置不变,但其后(下面/右边)的元素会被拉向此元素,相对此元素进行偏移并覆盖此元素。

3、对浮动元素的影响

margin会改变浮动元素的显示位置,即使元素写在DOM的后面,也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的,都是利用这个原理实现的。

4、对绝对定位的影响

对于绝对定位元素,负margin会基于其绝对定位坐标再偏移

脑图:

任务总结:通过任务八学会了用bootstrap框架制作导航栏、轮播图,以及警告框,下拉菜单等组件的使用。知道了主流浏览器的内核,trident、gecko、webkit、blink。css中实现垂直居中的集中常用方式:verticle-align:middle,display:flex,line-height。



返回列表 返回列表
评论

    分享到