寒假第四周周报

浅浅的花香味﹌ 2023-07-06 14:32 18阅读 0赞

本周完成了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之过渡 ##