发表于： 2019-09-01 19:28:21
9 969
一、任务目标
二、任务难点
1. 响应式设计：适配不同的设备及分辨率的屏幕，都能达到图片等比缩放的效果；
2. 盒模型布局：各元素以九宫格
布局呈现，居中且等距分布；
三、成果呈现
四、开发过程
1. 开发前：
① 分析html所需运用的标签
a. 因无文字及图片，图形由CSS绘制，由此只需实现划分出九个区域，通过CSS的选择器来给九个区域应用样式，从而实现九个圆角方格；
b. 由此选择<div>...</div>来划分区域，如九宫格视为一个整体即一个模块，则在划分出一个大区域后再细分九个区域，通过对不同的<div>运
用类（class）来区分；
② 分析CSS的盒模型布局模式
a. 由于<div>属于块状元素，块状元素都是占据一整行，需要改变为内联元素或内联块状元素，才可以多个元素并列一行；
b. 实现九宫格布局分为两种：
一种是转变为浮动模型（float）
在CSS文件里，通过添加float:left，来使所有块状元素转变为内联块状元素，并都左对齐，且会自动换行，可以实现例如文字流式的效
果，通过定义元素的外边距（margin）即可完成间距；
缺点：由于浮动模型中各元素移动到碰到另一元素的边框或包含框就停止，如各元素的盒高度不同，就会出现错落不齐，如word的图片
围绕效果；
另一种是弹性布局盒模型（Flexible Box）
在CSS文件里，通过添加display:flex，来创建一个flex容器，其所有子元素都会变为容器成员（内联块状元素），实现各元素等比缩放
的效果，甚至缩放时各元素的缩放比例都可以不同；
缺点：部分较老的浏览器的兼容性不好，需要添加前缀；
③ 分析响应式布局设计的要点
a. 在Responsive布局中，可以毫无保留的丢弃：
第一， 尽量少用无关紧要的div；
第二，不要使用内联元素（inline）；
第三，尽量少用JS或flash；
第四，丢弃没用的绝对定位和浮动样式；
第五，用宽度的百分比来代替元素的宽高、边距、圆角大小等，不用固定数值；
第六、页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本；
b. 帮助Responsive确定更好，更干净的布局：
第一，使用HTML5 Doctype和相关指南；
第二，重置好你的样式（reset.css）；
第三，一个简单的有语义的核心布局；
第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素
c. 快速测试的方法：
首先禁掉页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果内容排列有序，方便阅读，结构就可以。
2. 开发中：
① 搭建环境
a. 下载VSCode后，搜索HTML Boilerplate插件并安装，并在第一行输入html，选择下拉列表的html5模板，来应用html5模板；
b. 下载chrome浏览器，通过（Ctrl+Shift+I）来打开开发者工具，可以在网页上调试在不同分辨率的屏幕下的效果；
c. 其中html5模板中，<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前，同时在<html>标签内添加<meta>标签，来
通过标记控制viewpoint；
<!DOCTYPE>是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，而html5只有一种：<!DOCTYPE html>，由此浏览器才
能获知是哪种文档类型来呈现；
<meta>中的视口元素，设置页面宽度适配设备的屏幕宽度，并设置在首次加载时初始缩放级别为1.0，从而达到宽度自适应的效果；
<meta name="viewport" content="width=device-width, initial-scale=1.0">
② 编写html文档
a. 首先，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内；
<link href="index.css" rel="stylesheet" type="text/css" />
b. 在<body>内，先创建一个整体模块<div>，并赋予class即类的属性名称方便CSS里进行选择，再在其内部创建九个子元素<div>，并赋
予同一个类的属性名称，方便全部选择；
c. 由于图形绘制在CSS文件内，所以html文件的<div>模块建立空模块即可，并右键-格式化来调整缩进及分行格式；
③ 编写CSS文档
a. 首先，清除浏览器的默认脏边距，而一般用body而不是用*作为选择器来清除，因为*为通配符，会遍历所有标签，一方面效率较慢，另
一方面会清除表格需要的格式：
body{
margin:0;
padding:0;
}
b. 然后，建立一个flex容器
设置子元素的排列方向（flex-direction）及换行方式（flex-wrap），默认为从左向右水平排列（row）及不换行（nowrap），可通过
flex-flow:row wrap;//flex-flow是flex-direction属性和flex-wrap属性的简写形式，默认值为row wrap，设置为自动换行到最左边；
再设置第一个子元素的起始位置，justify-content 属性定义了项目在主轴（水平方向）上的对齐方式，align-items 属性定义项目在交
叉轴（垂直方向）上如何对齐，通过justify-content: flex-start; align-items: flex-start;//在flex容器即大模块的左上角；
再设置子元素的缩放属性，用flex来代替flex-shrink（缩小比例）、flex-grow（放大比例）和flex-basis（固定空间），默认为0 1
auto，通过flex:auto;//auto (1 1 auto) 和 none (0 0 auto)，数值越大，缩放的比例越大，相同则等比缩放；
c. 之后，给子元素定义圆角正方形
设置子元素的背景颜色（background-color），一般应用十六进制颜色或者rgba（另加透明度）；
设置子元素的宽高，在响应式设计中，以屏幕宽度为基准，数值都以宽度的百分比表示，而子元素的高度以padding-top（数值为宽度
的百分比）表示，如padding-top等于width的数值，子元素便为正方形，如：width:30%; padding-top:30%;
边距（margin）及圆角大小以宽度的百分比表示，因为用户浏览的方式都是垂直滚动，如有水平滚动则影响体验，所以都以可视范围
的宽度（device-width）作为参考；
d. 最后，完善等距布局
由于子元素间的外边距（margin）会相互影响而不会重叠，则一般设置子元素的上右边或下左边（上右下左的顺序）为同一数值，其
余两边为0，由flex容器的内边距（padding）来定义；
宽度计算：device-width（可视屏幕宽度100%）=padding（容器的下左内边距2.5%）+width（子元素宽度30%）* 3+margin（子
元素的上右外边距2.5%）* 3
④ 上线测试
a. 初步测试：用chrome浏览器的开发者工具测试，直接双击index.html在chrome打开，再用Ctrl+Shift+I打开开发者工具，模拟在不同分辨
率的屏幕及移动设备上的布局情况；
b. 进一步测试：用nginx模拟到手机测试，通过下载安装nginx并配置好链接本地文件，再查看电脑ip地址，且手机与电脑连同一个wifi，即
可在手机浏览器输入电脑ip/index.html即可模拟；
3. 开发后：
① 验收标准
a. 还原设计图
- 圆角：宽度的10%
- 颜色：#FFA600
- 设计图：等距居中九宫格布局；
- b. 自适应：宽度无滚动条，经chrome测试，格子随屏幕等比缩放；
- c. 移动端：手机模拟符合九宫格宽度等同屏幕宽度；
d. 编码规范
- UTF-8: <meta>的charset默认UTF-8
- 标签均小写 & 闭合
- 元素属性值已用双引号包含
- css外联引用
- css不用id控制样式，都用类控制
- 用div实现布局
② 深度思考
a. <!DOCTYPE>的作用：
<!DOCTYPE>声明是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，不是HTML标签，由此浏览器才能获知正确的
文档类型来呈现；
b. 盒模型：
盒模型是运用CSS技术的一种常用思维模式，通过将HTML文档元素都生成一个类似于盒子的矩形框，并围绕矩形框定义一系列与盒子相
关的属性，可以更加形象地设置各元素的布局结构；
content：内容，呈现盒子的主要信息内容，内容可以是文字、图片等多种类型，主要有三个属性：width、height和overflow，前两者
定义内容宽高，后者定义溢出内容的处理方法；
padding：填充，即内容与边框之间的空间，也是内边距，通过padding-top/bottom/left/right或padding来定义内容与边框的距离，设
置盒子的背景色时，可以使背景色延申到填充区域；
border：边框，以围绕填充区域的外边呈现，通过定义border的类型、颜色、粗细、圆角大小、背景图片等来定义border的样式，类
似于描边效果；
margin：距离，即边框与相邻其他元素的距离，也是外边距，会与相邻元素的外边距或内边距相加后得到两元素边框间的距离，可以
定义为负值，来产生重叠效果；
c. 标签元素：
block：块状元素，常用的块状元素标签都有结束符，每个块级元素占据页面一整行或父容器的宽度100%，元素的高度、宽度、行高
以及顶和底边距都可设置；
inline：内联元素，常用的内联元素标签无需结束符，每个内联元素可以并列一行，元素的高度、宽度及顶和底边距不能设置，其宽
度就是包含的文字或图片的宽度；
inline-block：内联块状元素，常用的标签为<img>、<input>，每个内联标签元素可以并列一行，且其高度、宽度、及顶和底边距都
可以设置；
d. chrome浏览器的调试：
Elements：从浏览器的角度，可以看到渲染页面所需要的HTML、CSS和DOM对象，还可以编辑来改变呈现效果；
HTML文档部分：可以对HTML文档中的DOM节点进行处理，把鼠标悬浮在某一节点，对应的元素会在页面以盒子形式指示出
来，右键DOM节点可以进行修改：
Add Attribute: 在标签中增加新的属性；
Force Element State: 若为页面元素添加动态的样式，如当鼠标悬停在元素上时的样式，可以强制元素状态，方便调试；
Edit as HTML: 以HTML形式更改页面元素；
Copy XPath: 复制XPath；
Delete Node: 删除DOM节点；
Break On: 设置DOM 断点；
CSS文档部分：显示当前选中的标签的CSS样式、属性等，以及盒模型的直观图形；
Styles: 显示用户定义的样式，如请求的default.css中的样式，和通过Javasript生成的样式，还有开发者工具添加的样式
Computed: 显示开发者工具计算好的元素样式；
Event Listeners: 显示当前HTML、DOM节点和其祖先节点的所有JavaScript事件监听器，这里的监听脚本可以来自
Chrome的插件。可以点击右边小漏斗形状(filter)选择只显示当前节点的事件监听器。
DOM Breakpoints: 列出所有的DOM 断点；
Properties: 超级全面地列出当前选中内容的属性，不过基本很少用到。
.cls：当前标签添加新的选择器，新建立的样式为inspector-stylesheet，此外，也可以直接在原有的样式上增加、修改、
禁用样式属性；
.hov：可以查看鼠标各种交互动作时的CSS样式；
Network：可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，也能看到哪些资源不能成功加载，以及查
看HTTP的请求头，返回内容等；
默认显示的功能列：
Name/Path: 资源名称以及URL路径；
Method: HTTP请求方法；
Status/Text: HTTP状态码/文字解释；
Type: 请求资源的MIME类型；
Initiator解释请求是怎么发起的，有四种可能的值：
Parser：请求是由页面的HTML解析时发送的；
Redirect：请求是由页面重定向发送的；
Script：请求是由script脚本处理发送的；
Other：请求是由其他过程发送的，比如页面里的link链接点击，在地址栏输入URL地址。
Size/Content: Size是响应头部和响应体结合起来的大小，Content是请求内容解码后的大小。
Time/Latency: Time是从请求开始到接收到最后一个字节的总时长，Latency是从请求开始到接收到第一个字节的时间；
Timeline: 显示网络请求的可视化瀑布流，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间。
另外的六个小功能：
Record Network Log: 红色表示此时正在记录资源请求信息；
Clear: 清空所有的资源请求信息；
Filter: 过滤资源请求信息；
Use small resource raws: 每一行显示更少的内容；
Perserve Log: 再次记录请求的信息时不擦出之前的资源信息；
Disable cache: 不允许缓存的话，所有资源均重新加载。
Sources: 主要用来调试js；
Timeline: 提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在
Timeline中；
Profiles: 分析web应用或者页面的执行时间以及内存使用情况；
Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；
Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；
Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。
e. 九宫格的实现方式：
一种是转变为浮动模型（float）
实现：通过添加float:left，来使所有块状元素转变为内联块状元素，并都左对齐，且会自动换行，可以实现例如文字流式的效果，
通过定义元素的外边距（margin）即可完成间距；
优点：浏览器兼容性好；
缺点：由于浮动模型中各元素移动到碰到另一元素的边框或包含框就停止，如各元素的盒高度不同，就会出现错落不齐，如word的
图片围绕效果，移动端问题较多；
另一种是弹性布局盒模型（Flexible Box）
实现：通过添加display:flex，来创建一个flex容器，其所有子元素都会变为容器成员（内联块状元素），实现各元素等比缩放的效
果，甚至缩放时各元素的缩放比例都可以不同；
优点：移动设备友好，即便内容的大小和动态未知也可以有效地设置布局；
缺点：部分较老的浏览器的兼容性不好，需要添加前缀；
f. IDE：
说明：指的是集成开发环境，用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具；
特点：集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套，具备这一特性的软件都可以自动生成；
与文本编辑器的比较：
优点：节省时间与精力，因集成而不用切换软件且减少失误，在同一个开发环境可以建立统一开发标准，并且可以方便管理开
发进程；
缺点：也因集成具有一定的学习门槛，对于初学者不适合作为学习一种新语言时的工具使用，而且因自动识别而会忽略一些坏
代码或设计，不利于代码纠正；
g. <meta>对viewpoint的作用：
添加<meta>： 可以设置页面宽度适配设备的屏幕宽度，并设置在首次加载时初始缩放级别为1.0，从而达到宽度自适应的效果；
不加<meta>：在不同设备上尤其在移动设备显示，会导致布局错乱，缩放比例出错。 
返回列表
评论