今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今天完成了对于之前的任务一些复习之类的，重新的看了下标签的定义
明天计划的事情：（一定要写非常细致的内容）
明天我计划把关于任务六的样式写完
遇到的问题：（遇到什么困难，怎么解决的）
遇到了，标签不知道怎么去使用的情况，还有一些选择器的问题比如说<img>单标签，这个标签的自带属性是啥，上次用了选择器以后就，一直跳行，最后换回了<div>标签
收获：（通过今天的学习，学到了什么知识）
今天看了下雪碧图，知道了雪碧图是一个什么东西，雪碧图就是一个由很多个小图标来组成的一张大图片
如果说在我们普通的图片中，插入了无数的图片，那么的话。会增加了Http的一些负载，还有不利于整体的优化
这也是出现了雪碧图的原因，如果说我们把无数个小图标给贴在一张图片上的话，那么就会图片进行优化了很多
而且http的负载也会小很多，但是这样也是会有压力的，那么就是如果说分辨率太小的话，那么这些雪碧图上的
图片会显得非常的不清楚，如果说这一点也就是雪碧图的劣势了，那么他的优势在哪里呢？也就是上面说的，优化
了页面
那么雪碧图的实现原理是什么呢？那么就是用background-size来控制background-size 属性规定背景图像的尺寸。
以及background-positon来控制的background-position 属性设置背景图像的起始位置。
以上的就是这个的实现的原理
还有关于标签的定义：
头部标签我现在已经知道的有<head> <header>
身体标签我现在已经知道的有<body> <main>
尾巴的标签我现在已经知道的有<footer> <footer>
标题的标签是<h1><h6>
段落的是<p> </p>
列表标签<dl><dt><dd><ul><ol>等等
最后自己把任务六的布局写出来了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="task6.css">
</head>
<body>
<header>
<button>找雇主</button>
<button>找护工</button>
</header>
<main>
<div>
<button>
<span>所在地</span>
<span></span>
</button>
</div>
<div>
<div>
<span></span>
<span>服务日期</span>
<p>2015-7-5 至 2015-7-12</p>
<span></span>
<span>北京.通州.果园</span>
</div>
<div>
<span>25元/小时</span>
<span></span>
</div>
</div>
<div>
<span></span>
<span>服务日期</span>
<p>2015-7-5 至 2015-7-12</p>
<span></span>
<span>北京.通州.果园</span>
</div>
<div>
<span>35元/小时</span>
<span></span>
</div>
<div>
<span></span>
<span>服务日期</span>
<p>2015-7-5 至 2015-7-12</p>
<span></span>
<span>北京.通州.果园</span>
</div>
<div>
<span>45元/小时</span>
<span></span>
</div>
<div>
<span></span>
<span>服务日期</span>
<p>2015-7-5 至 2015-7-12</p>
<span></span>
<span>北京.通州.果园</span>
</div>
<div>
<span>45元/小时</span>
<span></span>
</div>
<div>
<span></span>
<span>服务日期</span>
<p>2015-7-5 至 2015-7-12</p>
<span></span>
<span>北京.通州.果园</span>
</div>
<div>
<span>45元/小时</span>
<span></span>
</div>
<div>
<img>
<span>服务日期</span>
</div>
</main>
<footer>
<div>
<img>
<span>首页</span>
</div>
<div>
<img>
</div>
<div>
<img>
<span>我的</span>
</div>
</footer>
</body>
</html>
返回列表
评论