摘要：任务三一个最简单的移动端页面今天完成的事情运用布局知识跟随设计图进行布局，完成简单并继续学习优化让布局更好适应屏幕变化使用了盒模型及百分比了解区别在中应用图片处理学习明天计划的事情深度思考手机分辨率和网页的区别周末补学任务四计划及简单编写遇
任务三、 一个最简单的移动端页面 今天完成的事情
运用布局知识跟随设计图进行布局，完成简单Demo并继续学习优化.
让布局更好适应屏幕变化(使用了盒模型及百分比).
了解rem&em&px区别 & 在Demo中应用rem.
图片处理学习.
明天计划的事情
[ ] 深度思考：手机分辨率和网页px的区别(TODO:周末补学)
link1
link2
link3
[ ] 任务四计划及简单编写
遇到的问题暂无
收获 1. 运用布局知识进行更复杂的布局
借助盒模型完成布局
明确目标：完成简单Demo，找出不足继续学习优化，目标效果如下
编码
设计图尺寸为640*1136,于是在浏览器选择相同比例的iPhone5/SE(320*568)进行模拟
新建index.html并编写简单布局div及css，将页面纵向分为topbar&container两个部分, 其中topbar包含着后退按钮，container包含title、content、contact三个部分. 接着通过在PS界面上画参考线方法，简单获得页面各部分比例，并以此为依据完善CSS，效果如下图所示:
在PhotoShop中找到图层工作区，找到将要用到的素材点击右键-快速导出为PNG(由于有素材图所以不需要使用切图工具)，并用吸管工具获取背景颜色，再在拾色器(前景色)获取背景色#68cdd6
接下来将图片素材引入index.html中，调整图片长宽
截取效果图GIF的320*650来与当前Demo做对比(吐槽一下这跟PSD图不一样呀=。=)
先尝试对刚才写的Demo应用屏幕改变的效果
425px&768px的效果图与现在对比
后退按键与title变化不大
container的左右margin过小
contacts的顶部margin过小
修改
将container左右margin改为百分比
将context和contacts中间改为margin和padding的组合
结果：基本完成与设计图的重合
参考：
CSS3的REM设置字体大小
rem与em的使用和区别详解
视区相关单位vw, vh..简介以及可实际应用场景
1)px：相对长度单位，相对于屏幕的分辨率.
特点：
优点：稳定 & 精确
缺点：改变浏览器字体大小，布局会被打破
作用：
给定具体大小，协助em和rem重写具体单位
2)em：相对长度单位，相对于当前元素的文本尺寸,如果当前元素文本尺寸未设置则相对于浏览器默认字体尺寸
计算公式：targetEM = 1 / parentPX * targetPX;
特点：
1.em值不固定; 2.会继承父类字体大小
缺点：如果不重新计算已被放大字体的em值的话，各层设置的字体大小复合会导致连锁反应,这个连锁反应是"继承"导致的，想要避免继承的连锁反应可以在目标元素上显式设置px单位的font-size来停止继承.
总结：em对应px的值取决于其使用字体的大小，此字体大小受父类继承过来的大小影响，除非显示重写一个具体单位.
作用：
允许保持在一个特定的设计元素范围内的可扩展性(应在标识清除的情况下使用em单位)
3)rem(root em)：相对长度单位,只相对于HTML根元素
特点：
优点：只需修改根元素大小就可以成比例地调整所有字体大小,且避免了字体大小逐层复合的连锁反应，且IE8+的浏览器都支持
Tip：为应对不支持的浏览器,可以多写一个绝对单位的声明，例如：
p {font-size:14px; font-size:.875rem;}
总结：rem对应px的值取决于html元素字体大小，此大小会被浏览器中字体大小的设置影响，除非显示重写一个具体单位.
作用：
保证无论用户如何设置自己的浏览器，布局都能调到合适大小
维护用户拥有自己体验偏好的权利
4)%
特点：
普通元素的百分比定位基于父类.
设置了position: fixed的元素的百分比定位基于浏览器窗体.
设置了position: absolute的元素的百分比定位相对于static定位以外第一个父元素进行定位.
5)vw(viewport width, viewport指的是浏览器内部可视区域大小)
特点：
计算： 1vw = 1% * width_viewport
6)vh(viewport height)
特点：
计算： 1vh = 1% * height_viewport
7)vm(viewport min)
特点：
计算： 1vm = 1% * (width
实际使用：
元素严格不可缩放时，使用px
一切可扩展都应该用rem, 包括媒体查询
千万不要用em控制字体的大小
em用于缩放一些没有默认字体大小的元素，当字体变大整个组件也能随之变大
多列布局用%较好
vw、vh、vm做页面排版很厉害，但是兼容做得比较晚，所以优先还是用rem和%解决问题
在task3中应用rem.(已完成)
4. 深度思考
如何从UI图中获取所需信息（使用Photoshop）参考：前端工程师技能之photoshop巧用系列
终极目标：视觉设计师是怎样让前端工程师 100% 实现设计效果的
页面大致布局获取: 视图-标尺，视图-新建参考线，将页面分块大致确定布局；
字体获取: 左侧栏-文字工具，点击目标文字查看字体属性
图片获取:
图层中有现有素材: 选中所需图层，右键快速导出为PNG
图层中无现有素材: 前端工程师技能之photoshop巧用系列第三篇——切图篇
颜色获取：左侧栏-吸管工具，然后在拾色器中获取颜色值
如何进行自适应网页设计 参考：自适应网页设计（Responsive Web Design）
允许网页宽度自动调整
不使用绝对宽度布局，多用%和auto
字体多用rem
使用流式布局，谨慎使用绝对布局
使用媒体响应
根据屏幕大小加载图片
margin和padding使用时机：根据盒模型,padding是盒子内部填充物,margin是盒子与其他物品保持的距离，所以用padding来扩充(撑大)盒子，用margin来保持距离
css选择器优先级 参考:优先级-CSS：层叠样式表
从上到下优先级递增：
对优先级无影响：通配符选择器(*) & 关系选择符(+,>,~) & 否定伪类(:not())
类型选择器(h1) & 伪元素(::before)
类选择器(.btn) & 属性选择器(type="radio") & 伪类(:hover)
ID选择器(#navbar)
内联样式(style)
覆盖任何声明：!important
效果Github
线上展示
系列文章【CSS练习】IT修真院--练习1-九宫格
【CSS练习】IT修真院--练习2-开发工具
【CSS练习】IT修真院--练习3-简单界面
【CSS练习】IT修真院--练习4-移动端界面
【CSS练习】IT修真院--练习5-护工个人界面
【CSS练习】IT修真院--练习6-护工列表界面
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113428.html
摘要：任务六护工列表页完成的事情规划任务六完成基本界面编写计划的事情限制最小宽度使用雪碧图替换当前的多张图片引入完成模拟下拉框编写屏幕过窄时，列表项左边文字被截断出现省略号复习之前的代码规范，优化代码查看验收标准查看深度思考遇到的问题收获页面原生 任务六、 护工列表页 完成的事情 1.规划任务六2.完成基本界面编写 计划的事情 [x] 限制最小宽度 [x] 使用雪碧图替换当前的多张图片引入...
摘要：任务二认识开发工具今天完成的事情编辑器对比版本管理工具学习基本操作代码托管平台对比服务器使用学习明天计划的事情分析任务三完成规划及部分开发遇到的问题暂无收获编辑器对比参考三者比较，各有哪些优势和弱势一款成熟的，对网站开发者友好，插件齐全功能 任务二. 认识开发工具 今天完成的事情 IDE & 编辑器对比 版本管理工具学习 Git基本操作 代码托管平台对比 服务器使用学习 明天计划的...
摘要：用于显示日志信息及输入一些命令请求监听。可获得请求列表，点开某一项将看到数据头部数据。包含本次请求的请求方法状态码请求服务器的地址其他一些设置响应头部包含用户代理，帮服务器识别设备用预览。 九宫格——用html+css制作一个网页 一. 目标效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圆角...
摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一 任务四、 一个最常见的移动端页面 完成的事情 完成简单布局，然后填充界面 与效果图对比优化 完成验收要求：header扩展性 & 顶栏固定 进行p...
摘要：任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍，查缺 任务五、 一个最常见的移动端页面 完成的事情 float学习 张鑫旭《CSS世界》相关章节 张鑫旭 float系列 了解CSS通配符 &...
阅读 1333·2023-04-26 02:43
阅读 2371·2021-11-11 16:54
阅读 1164·2021-09-23 11:54
阅读 988·2021-09-23 11:22
阅读 2145·2021-08-23 09:45
阅读 691·2019-08-30 15:54
阅读 2982·2019-08-30 15:53
阅读 3047·2019-08-30 15:53
