发表于: 2019-08-26 15:58:24
1 1091
今天完成的事情:今天做任务十做了一大半,完成了任务十头尾的布局,以及中间流程图的制作。
明天计划的事情:完成任务十提交修改,学习修改表单和下拉框的样式。
遇到的问题:在做头部的登录注册按钮时候因为需要效果需要在鼠标移动到登录或者注册的时候出现有hover效果,而且两个按钮有覆盖,外部的container父级有自带的padding,而将注册按钮定位至右边会覆盖父级padding,导致和下面的内容对不齐,最后用了个笨办法,将所有的container的padding都去掉了,知道了定位会将无视padding的存在,同时使用媒体查询对小分辨率的布局做了设计。
收获:
一、
1、看了任务九的深度思考后,对响应式自适应有了进一步的理解。
响应式是为了能够让页面在不同的屏幕下都能合适的展示,对不同的尺寸的页面进行不同的设计,展现出来的页面效果能够合适分布,但是会让每种尺寸的页面不尽相同。
自适应是元素可以随着屏幕的大小等比例的放大缩小,一般多借助rem、百分比等相对度量单位,让代码在多种分辨率的移动端正常呈现,目的是让不同的屏幕能够有相同的页面布局。
我感觉使用响应式是因为自适应在小屏幕缩的太小不太容易看到或者点击,所以使用响应式重新布局下。
2、媒体查询MediaQuery
通过媒体查询能够检测到屏幕的大小,然后加载与之对应的提前设计的css,应用于响应式设计中
3、流式布局和固定布局
固定布局所有的宽度都定死了,所有浏览器下的显示宽度都一样,所以比较大的屏幕就会出现较大的空白,较小的则出现滚动条,但是设计简单
流式布局大多数元素使用百分比,最大最小宽度等,可以根据屏幕自适应,但是固定尺寸的图片等元素必须设置不同的宽度来适应不同屏幕,设计比固定布局麻烦。
二、
任务八的深度思考主流浏览器的内核分类
1、啥是内核,作用是啥:,浏览器内核有叫做渲染引擎,它决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释不同,因此同一网页在不同的内核的浏览器里的渲染效果也可能不同(但是今天下拉框的样式在师兄的mac谷歌浏览器和我windows的谷歌出现不同的样式不知道和内核有关么还是就是系统的原因)
2、Trident( 三叉戟)内核 IE6-10以及国产浏览器的兼容模式使用的这个内核,ps:因为现在浏览器会使用多核,一般把使用了其他内核的浏览模式叫做“高速浏览模式”,而Trident则是“兼容浏览模式”。
GECKO(壁虎)内核 火狐浏览器、Mozilla等,代码完全公开,可开发程度很高
WEBKIT内核 苹果公司自主研发的内核,也是Safari浏览器使用的内核,ebkit也是自由软件,同时开放源代码
BLINK(闪光)内核 一个由Google和Opera Software开发的浏览器排版引擎
暂时知识了解了不同浏览器的内核的不同,对各自的一些优劣有了点了解,但感觉了解的总不够,希望以后能懂得多点
评论