寒假第四周周报

本周完成了css和html的学习，并且制作了微博的静态页面（存在小问题），以下是本周的具体学习：

1.多栏布局

在网页上的布局比较经典的是两栏布局和三栏布局。

两栏布局:
两栏布局是主内容区为主，左（或者右）侧有一栏（eg:猫眼电影，bilibili…）;

三栏布局：
三栏布局是主内容区为主，左右侧各有一栏（eg:淘宝，微博…）;

学习了多栏布局的布局方法。

2.堆叠上下文

同一个堆叠上下文中元素在z轴上的排列顺序：

1.形成堆叠上下文环境的元素的背景与边框
2.拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
3.常规流式布局，非 inline-block，无 position 定位（static除外）的子元素
4.无 position 定位（static除外）的 float 浮动元素
5.正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
6.拥有 z-index:0 的子堆叠上下文元素
7.拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

3.样式补充

①diaplay:list-item:
      display:list-item为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。
      其效果就和ul中出现项目列表符号一样。通俗地说就是会在内容前面自动加上黑点，而display:block则不会出现黑点。
ps:清空行内盒的方法：list-style：none;(仍会占据空间，设置padding:0;)

②图片失效时的宽高问题:
     设其为行块盒；

③行盒中包含行块盒：
     行盒的高度与它内部的行块盒或可替换元素的高度无关。

④text-allgn:justify;
     justify 可以使文本的两端都对齐在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等.

⑤学会了制作一个三角形。

4.html5表单新增元素

①datalist元素;
②keygen元素;
③output元素;
④meter元素(度量器)。

5.logo的SEO(搜索引擎)优化

 logo里面首先放一个h1标签，目的是为了告诉搜索引擎，这个地方很重要

  h1里面再放一个链接，可以返回首页，把logo的背景图片给链接即可

为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来

<方法一>：text-indent 移到盒子外面（text-indent:-999px）,然后overflow:hidden,淘宝的做法
<方法二>：直接给font-size:0; ；就看不到文字了；京东的做法

最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了。

6.css3之过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果；

要实现这一点，必须规定两项内容（加在不添加伪类的选择器里）：

①规定希望把效果添加到哪个 CSS 属性上（transition-property）；
②规定效果的时长(transition-duration).

也可采用连写的属性哦>_<

本周的学习就是这些，下周要展开对css3的动画学习了，fighting!!!