发表于： 2019-02-18 19:19:43
1 368
今天完成的事情：任务一九宫格还原完成。（其实不是今天一天完成，用了好长时间，最开始并没有上传日报。）
明天计划的事情：尽量完成任务二。
遇到的问题：九宫格里面内容数字没有水平垂直居中。水平居中采用了 text-align:center，但垂直居中也百度了好多，但感觉仍然无从下手。
可能是因为对div块状元素居中 和div中内容居中理解有误差。也可能是因为对vw理解偏差。
收获：要坚持写日报，持之以恒。另外要注意编写的规范，不能丢东落西。
详情内容如下：
① 准备工作：安装webstorm、Chrome软件。
② 了解HTML与CSS基础内容
HTML 标记语言，不是编程语言；描述网页结构；
CSS 修饰网页内容。
HTML 结构：<!DOCTYPE html> <html><head><tittle><body><h><p>
<!DOCTYPE html> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
常用的 DOCTYPE 声明有很多，但目前流行的是HTML 5 格式为<!DOCTYPE html>。
<tittle>整个网页的标题。
<body>HTML文档所要显示的内容。
排版标签：
<p>段落 <div>块级元素 <span> 块级元素
<br>换行 <hr> 水平<center>居中<pre>保留其中的所有的空白字符
<div>和<span>唯一的区别在于：<span>是不换行的，而<div>是换行的。
div容器级标签，里面什么都能放，甚至可以放div自己。
span文本级标签。只能放置文字、图片、表单。不能放p、h、ul、dl、ol、div。
字体标签：<h1>到<h6>标题 <sup>上标<sub>下标<>
超链接：外部链接：<a href="XXX.html">点击进入另外一个文件</a>【也有不同路径】
锚链接： 邮寄链接
插入图片：相对路径：两个标记 . 和 .. 分表代表当前目录和父路径。
<img src="xxx.jpg">和<img src=".\xxx.jpg">当前目录中的图片
<img src="..\xxx.jpg">上一级目录中的图片
绝对路径：将文件路径全部写出<img src="C:\xxx\xxxx\xxxxx\xxxxxx\xx.jpg">
网络路径<img src="http://xxxx.com/xxx.jpg">
HTML标签是分等级的，HTML将所有的标签分为两种：
文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
CSS <style type=”text/css”>修饰内容</style>，
嵌套方式： 内嵌式、外联式、内联式（行内式）
优先级：内联样式表（标签内部） > 嵌入样式表（当前文件中） > 外部样式表（外部文件中）【前提：是在的相同权值的情况下】
总结：就近原则（离被设置元素越近优先级别越高）
③ 初步尝试，随意编写几段再用浏览器打开，发现字符乱码。原因无要求字符规格，应在<head>后添加<meta charset="utf-8" >
meta必须是head的第一个直接子元素，[ UTF-8 编码具有更广泛的]
④ 盒子模型
一个盒子的总长=左margin宽度+左border宽度+左padding宽度+width宽度+
右padding宽度+右border宽度+右margin宽度。
尝试做出第一个大盒子，并用浏览器打开。
⑤ 块级元素
块级元素：div , p, form, ul, li , ol, dl, form...
行内元素：span, strong, em, br, img , input...
1）块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
2） 块级元素可以设置 width, height属性，行内元素设置width, height无效 【注意：块级元素即使设置了宽度，仍然是独占一行的】
3) 块级元素可以设置margin 和 padding.
行内元素的水平方向的padding-左右, margin-左右 都产生边距效果，
但竖直方向的padding-顶底,margin-顶底 都不会产生边距效果。
（水平 方向有效，竖直方向无效）
用div做出九个格子
发现问题：并没有出现9个格字按顺序排在1个大格子中。
解决方案：添加浮动float:left
⑥ 浮动
浮动就是元素可以自由移动，从一行的左端到右段排序，直到碰到边缘进行下一行。
改写代码并用chrome开发者工具查看。
发现问题：九宫格太小，且固定比例。
解决添加Viewport自适应和父元素的高宽的改变。
⑦ Viewport自适应和各种大小。
viewport设置移动端自适应的方法：
<meta name="viewport" content="width=device-width, initial-scale=1">
要把当前的(layout) viewport宽度设为ideal viewport的宽度，既可以设置width=device-width，也可以设置initial-scale=1，
但有一个小缺陷，width=device-width会导致iphone、ipad横竖屏不分，initial-scale=1会导致IE横竖屏不分，都以竖屏的ideal viewport宽度为准。
所以，最完美的写法两者都写上去， initial-scale=1 解决 iphone、ipad的缺陷，width=device-width解决IE的缺陷。
名称解释：
viewport：网页的可视区域，视区
width：移动设设备下显示的宽度为设备宽度(device-width)
initial-scale：设备与视口的缩放比率 ，缩放值
visual viewport：浏览器可视区域
layout viewport：浏览器默认的viewport
ideal viewport ：移动设备理想viewport（最适合移动设备的viewport）
px：px其实就是像素
vw：vw和vh是视口（viewport units）单位。
vw是可视窗口的宽度单位，和百分比有点一样，1vw =可视窗口的宽度的百分之一。
em 是相对于父级的字体大小,
rem是相对于HTML根元素的字体大小。
改写代码
发现问题：内容数字都不居中。【并未完全解决】
解决方案：text-align:center
发现只是水平居中，没有垂直居中。
之后按照要求把<style>至</style>内容重新建一个CSS文件。
至此九宫格算是还原完成。
⑧ 配置nginx并用手机访问
发现问题：手机打开网页，只有数字，没有九宫格格式。
解决方案：目录里只放了html文件，没有放于此匹配的css文件。
返回列表
评论