发表于: 2018-07-16 21:02:51
1 637
今天完成的事情:
1.着手开始任务三,先是下载了任务资源,大概熟悉页面布局后开始写,布局主要运用的是盒子模型的原理。添加css样式与页面的基本内容,下载photoshop切图,将切出来的图片保存,添加到页面布局中,大概了解了单位px、rem、em以及自适应、屏幕分辨率、图片尺寸相应的概念后,开始调试代码,使得页面在不同分辨率、不同设备上都能正常显示。达到了验收标准。
2.理解【深度思考】中的问题
(1)如何利用PS切图以及从UI图中获取所需信息?
一张UI图片拿到手里,首先要做的就是观察整个布局,思考应该用什么方式实现网页的制作。最基本的,图片中的字体,图标的颜色、大
小,图标之间的间距,这些都是我们需要从一张UI图片中获取的信息。可以通过选中图片中的文字,通过字符栏看到文字的字体,文字的大小,字间距,行
间距等信息,可以通过吸管工具选中图标,从拾色器中看到颜色的六位编码,可以通过标尺工具测量图标的大小,间距等。
有4种切图方法:传统切图,即是手动切图,用切片工具框选所需要的图标,保存成web格式的图片。但是这种方式的弊端就是切图比较慢,而
且如果图标不是矩形,还会导致切出的图片中带有背景,这并不是我们想要的。另外,如果图标比较多,我们还可以利用参考线来使切图更精准,点击基于
参考线切图,还能加快切图的速度。不过这也导致切出很多我们并不需要的图标。所以这种方式并不好。
简单切图,Photoshop CC版本比CS6版本多了一些功能,比如选中所需图标的图层后,右键可以直接快速导出png格式。如果
想把多个图层导出到一张图片上,可以选中多个图层,右键转换为智能对象,再次右键,编辑内容,即可在新打开的窗口中保存为png格式。CS6版本上没有
右键快捷导出功能,但是可以用智能对象导出,也很方便。这种方法的优点是不带背景,简单。
自动切图,选择编辑>首选项>增效工具>启动生成器,然后文件>生成>图像资源,具体可以看我的视频演示。这种方式只需要
重命名图层即可生成jpg或png格式的图片,还可以将图片放大。这种切图方式也很方便,切得也很快。
脚本切图,选择文件>导出>将图层导出到文件。接下来就等着PS自动运行完成,图片也就切完了。这种方式虽然完全不需要
手动去切,但是也会产生很多你不需要的图片。 <来源>https://www.jianshu.com/p/79c58c5f61ee
(2)px、em、rem、%、vw、wh、vm等单位有什么区别?
px:px就是pixel的缩写,意为像素。px就是一张图片最小的一个点,一张位图就是千千万万的这样的点构成的,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。
em:参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
rem:css3新单位,相对于根元素html(网页)的font-size,不会像em那样,依赖于父元素的字体大小,而造成混乱。
%:一般宽泛的讲是相对于父元素,但是并不是十分准确。对于普通定位元素就是我们理解的父元素;对于position: absolute的元素是相对于已定位的父元素;对于position: fixed;的元素是相对于ViewPort(可视窗口)
vw:css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
vh:css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。
vm:css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm;举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px,vm的兼容性较差。
(3)如何进行自适应网页设计?
<1>在网页代码的头部,加入一行viewport元素,<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度,上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为
1.0,即网页初始大小占屏幕面积的100%;
<2>不使用绝对宽度;
<3>字体大小,字体大小是页面默认大小的100%,即16像素字体不要使用绝对大小"PX",要使用相对大小“REM”;
<4>流动布局:"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的,其好处是,如果宽度太小,放不下两个元素,后面的元素会
自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
<5>选择加载CSS:"自适应网页设计"的核心,就是CSS3引入的Media Query模块。自动探测屏幕宽度,然后加载相应的CSS文件。
(4)CSS有哪些选择器,优先级如何计算?
参考:https://www.jianshu.com/p/b69de6742357
(5)什么时候用margin好,什么时候用padding好?
Margin的几个特性::围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”;margin始终是透明的;margin是用来隔开元素与元素的间距;margin用于布局分开元素使元素与元素互不相干;
Padding的几个特性:元素的内边距(填充),在边框和内容区之间。控制该区域最简单的属性是 padding 属性.padding是用来隔开元素与内容的间隔。padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。
(6)手机中的分辨率和网页中的px是一回事吗?
分辨率(Resolution):是一个表示平面图像精细程度的概念,它通常是以横向和纵向点的数量来衡量的,
表示为水平点数垂直点数的形式,例如1366px768px。
像素(px):是一个相对单位,而且在特定设备上总是一个近似值(原则是尽量接近参考像素)。
明天计划的事情:
开启任务四
遇到的问题:
1.页面布局写好以后,会随着是窗口大小变化上下跑
在师兄的点拨下,去掉了纵向拉伸,设置; magin:0 auto,满足页面需求,还有就是要用相对单位px。
2.div中内容居中的问题
行高(line-height)法:如果要垂直居中的只有一行或几个文字,只要让文字的行高和容器的高度相同,如:p { height:30px; line-height:30px; width:100px; overflow:hidden; }
内边距(padding)法:另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,p { padding:30px; }
直接在盒子中设置:text-align:center也可以达到效果,还有两种方法看的不是很懂,没列举出来。不过这几种方法都是准垂直居中方法;
收获:综上所述。
评论