【HTML&CSS】简单网页布局

一、学习内容回顾

☆常用标签列举

☆元素选择器：匹配元素

1. 基本选择器：按标签名选择
   TagName{
   }

2. class类选择器
   .ClassName{
   }

3. id选择器
   #id{

   }

4. 子父元素选择器
   ul>li{
   }(直接子元素)
   ul li{
   }(所有后代元素）

5. 属性选择器
   TagName[class][id]{
   }
   TagName[class=" “][id=” "]{
   }

☆样式

• 样式的写法：属性：值；
• 样式可以分为：行内样式 内嵌样式 外部样式.
• 使用外部样式时，head标签中应用link标签导入样式文件.
• 若网页样式比较多或者复杂时，采用内嵌样式会大大降低网页的加载速度.
• 如果样式冲突：（优先级）行内样式>内嵌样式>外部样式.
• 如果样式不冲突：混合使用.
• 内嵌和外部样式有优先级之分：从上到下 id>class>元素.
• 如果要提高样式优先级：属性值后面加!important.

☆定位position

• 定位分为：绝对定位(不占位置） 相对定位(占位置） 固定定位
• 元素定位后可以使用z-index top bottom left right属性.
• 绝对定位position:absolute top bottom left right属性值是相对于浏览器定位的.
• 相对定位position:relative top bottom left right属性值是相对于元素本身的位置来定位的.
• 若想要通过绝对定位实现元素相对于其父元素移动，其父元素必须是相对定位的.

☆伪类

        /*:visited 已访问过伪类*/
        TagName:visited{
            color: blue;
        }
        /*:hover 鼠标悬停伪类*/
        TagName:hover{
            color: orange;
        }
        /*:link 未访问过伪类*/
        TagName:link{
            color: deeppink;
        }
        /*:active 鼠标激活伪类*/
        TagName:active{
            color: red;
        }

注意：

• hover必须在link 和visited之后，active必须在hover之后。
• 伪类的名称不区分大小写。

二、需要掌握的知识点

☆iframe标签的使用

淘宝首页

☆锚链接
1、锚点在其他页面

找衣服
衣服        				   

2、与锚点在同一页面

衣服
找衣服

☆多级菜单注意

• 鼠标悬停出来的子菜单，必须是当前悬停元素的子集

☆盒子模型

☆meta标签的作用

1. meta 标签是一个特殊的 html标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等，许多搜索引擎都使用 meta 标签信息。例如，要将 John 指定为作者，则使用以下 meta 标签：

2. meta的http-equiv属性用于向浏览器提供一些说明信息，从而可以根据这些说明做出相应。 http-equiv 属性可用来代替 meta 标签中的 name 属性 :

3. 表示每隔2秒，自动刷新网页：

4. meta标签指定了当前文档所使用的字符编码为gb2312，也就是中文简体字符: