发表于: 2019-02-18 19:19:43
1 369
今天完成的事情:任务一九宫格还原完成。(其实不是今天一天完成,用了好长时间,最开始并没有上传日报。)
明天计划的事情:尽量完成任务二。
遇到的问题:九宫格里面内容数字没有水平垂直居中。水平居中采用了 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文件。
评论