【CSS练习】IT修真院--练习3-简单界面
任务三、 一个最简单的移动端页面
今天完成的事情
- 运用布局知识跟随设计图进行布局,完成简单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图不一样呀=。=)
2. 让布局更好适应屏幕宽度变化
先尝试对刚才写的Demo应用屏幕改变的效果
425px&768px的效果图与现在对比
- 后退按键与title变化不大
- container的左右margin过小
- contacts的顶部margin过小
修改
- 将container左右margin改为百分比
- 将context和contacts中间改为margin和padding的组合
- 结果:基本完成与设计图的重合
3. 了解rem & em & px & % & vw & wh & vm的区别
参考:
- 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<height?width: height)
实际使用:
- 元素严格不可缩放时,使用px
- 一切可扩展都应该用rem, 包括媒体查询
- 千万不要用em控制字体的大小
- em用于缩放一些没有默认字体大小的元素,当字体变大整个组件也能随之变大
- 多列布局用%较好
- vw、vh、vm做页面排版很厉害,但是兼容做得比较晚,所以优先还是用rem和%解决问题
- 在task3中应用rem.(已完成)
4. 深度思考
如何从UI图中获取所需信息(使用Photoshop)参考:前端工程师技能之photoshop巧用系列
- 终极目标:视觉设计师是怎样让前端工程师 100% 实现设计效果的
- 页面大致布局获取: 视图-标尺,视图-新建参考线,将页面分块大致确定布局;
- 字体获取: 左侧栏-文字工具,点击目标文字查看字体属性
图片获取:
- 图层中有现有素材: 选中所需图层,右键快速导出为PNG
- 图层中无现有素材: 前端工程师技能之photoshop巧用系列第三篇——切图篇
- 颜色获取:左侧栏-吸管工具,然后在拾色器中获取颜色值
如何进行自适应网页设计 参考:自适应网页设计(Responsive Web Design)
- 允许网页宽度自动调整
<meta name="viewport" content="width=device-width, initial-scale=1" />
- 不使用绝对宽度布局,多用%和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-护工列表界面
【CSS练习】IT修真院--练习3-简单界面相关推荐
- 【CSS练习】IT修真院--练习4-移动端界面
任务四. 一个最常见的移动端页面 完成的事情 完成简单布局,然后填充界面 与效果图对比优化 完成验收要求:header扩展性 & 顶栏固定 进行placeholder样式兼容性研究 完成任务四 ...
- 【CSS练习】IT修真院--练习6-护工列表界面
任务六. 护工列表页 完成的事情 1.规划任务六 2.完成基本界面编写 计划的事情 [x] 限制最小宽度 [x] 使用雪碧图替换当前的多张图片引入 [x] 完成模拟下拉框编写 [x] 屏幕过窄时,列表 ...
- 【CSS练习】IT修真院--练习2-开发工具
任务二. 认识开发工具 今天完成的事情 IDE & 编辑器对比 版本管理工具学习 Git基本操作 代码托管平台对比 服务器使用学习 明天计划的事情 分析任务三, 完成规划及部分开发 遇到的问题 ...
- 【CSS练习】IT修真院--练习1-九宫格
九宫格--用html+css制作一个网页 一. 目标效果: 二. 效果描述 圆角橙色九宫格,自适应页面大小 三. 开发计划 1. 开发 [x] index.html建九个div.block [x] a ...
- 【修真院JAVA小课堂】redis缓存集群简单介绍
大家好,我是IT修真院郑州分院第11期的JAVA学员,一枚正直纯洁善良的java程序员. 今天给大家分享一下,redis缓存集群简单介绍. 1.背景介绍 redis是一个key-value存储系统.和 ...
- 【修真院Java小课堂】Tiles框架简单介绍
大家好,我是IT修真院上海分院第6期的学员,一枚正直纯洁善良的程序员 今天给大家分享一下,Tiles框架简单介绍 Tiles框架简单介绍 背景介绍 什么是Tiles Tiles 是一种JSP布局框架, ...
- 【修真院web小课堂】请描述 BFC(Block Formatting Context) 及其如何工作
请描述 BFC(Block Formatting Context) 及其如何工作 小课堂[北京-WEB-A组] 分享人:要来点本子吗 大家好,我是IT修真院北京分院第35期的学员,一枚正直.纯洁.善良 ...
- 【修真院“善良”系列之十八】WEB程序员从零开始到就业的全资料V1.0——只看这一篇就够了!...
前言 这是两年以来,修真院收集整理的学习资料顺序. 以CSS15个任务,JS15个任务为基础,分别依据要完成任务的不同的技能点,我们整理出来了这么一篇在学习的时候需要看到的资料. 这是Version ...
- 【修真院“善良”系列之十八】WEB程序员从零开始到就业的全资料V1.0——只看这一篇就够了!
这里是修真院小课堂,本篇分析的主题是 [WEB程序员从零开始到就业的全资料V1.0] 前言 这是两年以来,修真院收集整理的学习资料顺序. 以CSS15个任务,JS15个任务为基础,分别依据要完成任务的 ...
最新文章
- 2022-2028年中国润滑油基础油行业市场研究及前瞻分析报告
- python查找文件夹下的文件,python 查找文件夹下所有文件 实现代码 -电脑资料
- R12.1.3 R12.2.X 注册客户化应用
- linux tcmalloc,内存管理TCMalloc 安装和使用
- 在linuxc中如何实现输入隐藏
- 单例模式创建的两种方法
- java platform_Java Platform Module系统中的可选依赖项
- 5.3linux下C语言socket网络编程简例
- Spring中都用到了哪些设计模式
- 科学网—语音识别技术发展史
- 腾讯亿级排行榜系统实践及挑战
- REST another WebService???
- android 开发种子文件,IT之家学院:如何制作种子文件和磁力链接
- JavaScript高级程序设计读书笔记(第6章面向对象的程序设计之创建对象)
- python复制word段落_使用python将整个word文档(包括表)复制到另一个
- 打印英文字母阵列c语言,UG软件做英文字母的阵列自动递增,这个方法太好用了!...
- ble理论(13) BT4.2 ble 广播详解
- ultraiso制作u盘启动盘方法
- 压力测试后,DeFi会如何自我进化?|「生机」云峰会
- 【Python】标识符 ( Python 标识符命名规则 - 强制性 | 内容限定 | 大小写敏感 | 非关键字 | Python 标识符命名规范 - 建议性 | 下划线命名法 | 英文字母全小写 )