发表于: 2018-11-25 21:57:42
1 929
今天完成的事:
一,今天主要是完成了任务的基本页面布局,但是还需要多一些细节进行优化处理。
1.如何用css写一个简单的幻灯片效果页面?
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation。
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。
Animation字面上的意思,就是“动画”的意思,
我们使用CSS3的Animation制作动画,实现简单的幻灯片效果,可以省去复杂的js,jquery代码。Animation有一点不足之处,
学习资料链接:https://blog.csdn.net/jnshu_it/article/details/77600561
2. 主流浏览器内核有哪几种?
“浏览器内核”主要指渲染引擎(Rendering Engine),负责解析网页语法(如HTML、JavaScript)并渲染、展示网页。因此,所谓的浏览器内核通常也就是指浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解析也有所不同,因此同一网页在不同的内核浏览器里的渲染、展示效果也可能不同。
目前主流的四大浏览器内核有Trident、Gecko、WebKit以及Presto。
一、Trident内核(代表:Internet Explorer):Trident(又称为MSHTML),是微软开发的一种排版引擎. Trident实际上是一款开放的内核,Trident引擎被设计成一个软件模块,使得其他软件开发人员很容易将网页浏览功能加到他们自行开发的应用程序里,其接口内核设计相当成熟,因此涌现出许多采用IE内核而非IE的浏览器,但是Trident只能用于Windows平台。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Sleipnir、GOSURF、GreenBrowser和KKman等。
二、Gecko内核(代表:Mozilla Firefox):Gecko是开放源代码、以C++编写的网页排版引擎, 由于Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。Gecko排版引擎提供了一个丰富的程序界面以供与互联网相关的应用程序使用
三、WebKit内核(代表:Safari、Chrome):WebKit 是一个开放源代码的浏览器引擎(Web Browser Engine)。WebKit也是自由软件,同时开放源代码。它的特点在于源码结构清晰、渲染速度极快。
四、Presto内核(代表:Opera):Presto的特点就是渲染速度的优化达到了极致,它是目前公认的网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。
什么是外边距重叠?重叠的结果是什么?
外边距重叠就是margin-collapse:外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界重合在一起而形成一个单一边界,外边距的重叠只产生在普通流的垂直相邻边界间。
外边距重叠的意义:当我们上下排列一系列规则的块级元素时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离,这样各处距离就一致了。
防止外边距重叠的方法
元素绝对定位postion:absolute;一般用在内层元素
内层元素加float:left;或display:inline-block;
外层元素用padding增加边距
外层元素设置overflow:hidden;
内层元素透明边框border:1px solid transparent;
两个相邻的外边距都是正数时,折叠的结果是他们两者之间较大的值。
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。
bootstrap有哪些常用组件?
Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。
什么是组件
组件:一般是指软件系统的一部分,承担了特定的职责,可以独立于整个系统进行开发和测试, 一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。
目前常用的bootstrap组件:
1.轮播图
2.下拉菜单
3.响应式导航栏
使用bootstrap的注意事项
bootstrap文件里面有很多默认设置,可能会在页面上起作用,这个要注意一下。 还有就是.当我们引入bootstrap.js和jquery.js文件时我们要注意引入该文件的先后顺序,要先引入jquery.js在引入bootstrap.js按照这样的顺序来引入文件, 否则就会报错。 因为bootstarp.js文件的开发是基于jquery开发的,所以要先引入jquery.js才可以使用bootstrap。 而且引入网上cdn的话要注意http和https的区别,有时候应用不对的话也会报错
明天计划的事:对任务八的一些细节问题进行优化修改。开始下一个页面的布局,
遇到的问题:在页面布局的时候,设计了一个,圆运用于栅格系统后,在屏幕像素大于992px的时候图案变形了,不知道是什么原因,后来请教师兄后将圆的宽度和高度够设置成了min-height和min-width(最小高度和宽度)解决了这个问题。
收获:完成任务八的第一个页面的基本布局,
评论