定位

用不同的定位方式，控制标签具体的显示位置。
position：static | relative | fixed | absolute;
static定位是默认值，即没有定位，遵循正常的文档流对象。

1、absolute绝对定位

基本语法：position：absolute；
功能：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于HTML。
例：

<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">
      /* 正文内容 */
      .mainDiv{
    width:900px;
          height:500px;
          background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png");
          background-size:cover;
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%,-50%);
      }
    </style>
</head>
<body>
    <!-- 正文内容 -->
<div class="mainDiv">
      <img src="http://www.yyfun001.com/res/htmlclassics/full/images/infinity.png" />
</div>
</body>
</html>

效果图：
2021.09.28（标签定位显示，响应式布局） - 图1
代码讲解：

2、relative相对定位

基本语法：position：relative；
功能：相对定位元素的定位是相对其正常位置。
例题：

<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">
      /* 正文内容 */
      .mainDiv{
        width:900px;
          height:500px;
                   background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png");
          background-size:cover;

          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%,-50%);
      }
      .img1{
         position:relative;
           left:50%;
           top:50%;
           transform:translate(-50%,-50%);
      }
    </style>
</head>
<body>

    <!-- 正文内容 -->
<div class="mainDiv">
      <img class="img1" src="http://www.yyfun001.com/res/htmlclassics/full/images/infinity.png" />
</div>

</body>
</html>

效果图：
2021.09.28（标签定位显示，响应式布局） - 图3
代码讲解：

3、固定定位

基本语法：position：fixed；
功能：元素的位置相对于浏览器窗口是固定位置。
例题：

<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">

      /* 右侧的浮动按扭 */
      .btn_list{
        position:fixed;
          right:50px;
          top:40%;
          transform:translatey(-50%);
      }
      .btn_list div{
        width:20px;
          height:20px;
          margin-top:10px;
          border-radius:50px;
          background-color:#3D3D3D;
          cursor:pointer;
      }
      #cur{
          background-color:#10508D;
      }
      /* 返回顶部 */
      .backtop{
          position:fixed;
          right:40px;
          bottom:50px;
          width:50px;
      }
</style>

</head>
<body>

    <!-- 右侧浮动按扭 -->
<div class="btn_list">
<div id="cur"></div>
<div></div>
<div></div>
<div></div>
</div>

    <!-- 返回顶部 -->
    <img class="backtop" src="http://www.yyfun001.com/res/htmlclassics/images/backtop.jpg" />

</body>
</html>

效果图
2021.09.28（标签定位显示，响应式布局） - 图5
代码讲解：

标签定位常用样式

单位	值	作用
position	static \| absolute \| relative \| fixed	设置标签定位方式
left	auto \| 长度	设置标签左边距
right	auto \| 长度	设置标签右边距
top	auto \| 长度	设置标签上边距
bottom	auto \| 长度	设置标签下边距
z-index	auto \| 数字	设置标签层叠顺序

响应式布局

1、网页布局介绍

网页布局，指的是网页中标签的排列方式。常见布局如下：
标签正文型布局：左右框架型布局：

T字型布局：国字型布局：

国字型布局代码：

<!DOCTYPE html>
<html>
<head>
<title>网页布局属性功能</title>
<meta charset="utf-8" />
<style type="text/css">
      .header{
        width:1000px;
        height:100px;
        line-height:100px;
        border:1px solid black;
        margin:0px auto;
        text-align:center;
      }
      .main{
        width:1000px;
        margin:20px auto;
        height:500px;
      }
      .menu{
        width:300px;
        height:500px;
        line-height:500px;
        text-align:center;
        border:1px solid black;
        float:left;
      }
      .content{
        width:680px;
        height:500px;
        line-height:500px;
        text-align:center;
        border:1px solid black;
        float:right;
      }
      .footer{
        width:1000px;
        height:50px;
        line-height:50px;
        text-align:center;
        border:1px solid black;
        margin:0px auto;
      }
    </style>
</head>
<body>

<div class="header">Logo、Banner、其他</div>

<div class="main">
<div class="menu">左侧导航菜单或其他</div>
<div class="content">网页正文内容</div>
</div>

<div class="footer">版权信息</div>

</body>
</html>

布局常用样式：

单位	值	作用
float	none \| left \| right	设置标签浮动
clear	none \| left \| right \| both	清除浮动
display	none \| block \| inline \| list-item \| inline-block…	设置标签显示方式
overflow	visible \| auto \| hidden \| scroll	设置内容超出标签时的处理方式
overflow-x	visible \| auto \| hidden \| scroll	设置内容超出标签宽度时的处理方式
overflow-y	visible \| auto \| hidden \| scroll	设置内容超出标签高度时的处理方式
visibility	inherit \| visible \| hidden \| collapse	设置标签是否可见

2、display样式

css块区介绍

HTML中所有标签，可以划分为：块级元素、非块级元素。

块级元素

1、默认，从新的一行开始。
2、高度、宽度都是可控的。
3、宽度没有设置时，默认为100%。
常见块级元素：div、p、h、ul、ol、dl、table……

非块级元素

1、默认，不会从新的一行开始
2、高度、宽度以及内边距都是不可控的
3、宽高就是内容的高度，不可以改变的
常见非块级元素：span、b、i、u、a……
基本语法：

display:none | block | inline | list-item | inline-block;

属性：

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
list-item	此元素会作为列表显示。

display：block（将非块级元素转换成块元素，占用一行）
display：inline-block（将非块级元素转换成块元素，不占用一行）
display：none（将页面上的元素影藏，消失在页面上）
功能：将元素显示为块级元素或内联元素。
例：

<!DOCTYPE html>
<html>
<head>
<title>CSS区块</title>
<meta charset="utf-8" />
<style type="text/css">
      .div1{
        width:900px;
        height:50px;
        line-height:50px;
        border:1px solid red;
        margin:0px auto;
        padding-left:50px;
      }
      .span1{
        display:block;
        width:900px;
        height:200px;
        border:1px solid blue;
        padding-left:50px;
        margin:0px auto;
      }
    </style>
</head>
<body>

<div class="div1">导航菜单</div>

    <span class="span1">正文内容1</span>
    <span>正文内容2</span><span>正文内容3</span><span>正文内容4</span>
</body>
</html>

效果显示
2021.09.28（标签定位显示，响应式布局） - 图11
代码讲解

3、弹性布局

基本语法：display：flex；
功能：弹性盒子是css3的一种新的布局模式。
css3弹性盒子，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性盒子由弹性容器和弹性子元素组成。
弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性元素。
例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>

</head>
<body>

<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>

</body>
</html>

效果显示
2021.09.28（标签定位显示，响应式布局） - 图13
代码讲解：

弹性盒子中常用到的属性：

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

4、响应式布局

功能：@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面

第一步：设置viewpoint

在head标签中添加
2021.09.28（标签定位显示，响应式布局） - 图15

第二部：媒体查询

基本语法：

@media mediatype and|not|only (media feature) {
        CSS-Code;
    }

媒体类型
2021.09.28（标签定位显示，响应式布局） - 图16
not：not是用来排除某些特定的设备的。
only：用来定某种特别的媒体类型
例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<style>
  body {
      background-color: red;
  }
  @media screen and (min-width: 800px) {
      body {
          background-color: lightgreen;
      }
  }
</style>
</head>
<body>

</body>
</html>

效果显示：
2021.09.28（标签定位显示，响应式布局） - 图17
代码讲解

常用媒体功能

值	描述
height	定义输出设备中的页面可见区域高度。
max-height	定义输出设备中的页面最大可见区域高度。
max-width	定义输出设备中的页面最大可见区域宽度。
min-height	定义输出设备中的页面最小可见区域高度。
min-width	定义输出设备中的页面最小可见区域宽度。
width	定义输出设备中的页面可见区域宽度。

任务单

1、请说明常见的页面布局类型有哪些？以及每种类型的布局，都适用于哪种类型的网站页面？

标签正文型布局、左右框架型布局、T字型布局、国字型布局

2、请简单说明viewpoint的作用？

可以针对不同的屏幕尺寸设置不同的样式。

3、请简单说明块级元素与内联元素（行内元素）的区别？

行内元素不形成新内容块，即在其左右可以有其他元素，块级元素在其左右两边没有其他元素，即块级元素默认是独占一行的。

4、请说明display样式值none、block、inline、inline-block的作用区别？

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
list-item	此元素会作为列表显示。

5、请写出弹性布局（伸缩盒）的常用样式？（至少写出5个）

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

6、请说明响应式布局的作用及特点？以及响应式布局的实现方式？

可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<style>
  body {
      background-color: red;
  }
  @media screen and (min-width: 800px) {
      body {
          background-color: lightgreen;
      }
  }
</style>
</head>
<body>

</body>
</html>

HTML5 CSS3

2021.09.28（标签定位显示，响应式布局）

定位

1、absolute绝对定位

2、relative相对定位

3、固定定位

标签定位常用样式

响应式布局

1、网页布局介绍

2、display样式

css块区介绍

块级元素

非块级元素

3、弹性布局

4、响应式布局

第一步：设置viewpoint

第二部：媒体查询

任务单

1、请说明常见的页面布局类型有哪些？以及每种类型的布局，都适用于哪种类型的网站页面？

2、请简单说明viewpoint的作用？

3、请简单说明块级元素与内联元素（行内元素）的区别？

4、请说明display样式值none、block、inline、inline-block的作用区别？

5、请写出弹性布局（伸缩盒）的常用样式？（至少写出5个）

6、请说明响应式布局的作用及特点？以及响应式布局的实现方式？

7、请说明超链接标签target属性的作用，并列出target常用属性值？

8、请写出去掉超链接文字下划线的样式？

9、给超链接标签，添加鼠标悬停效果，使用的是哪一个伪类选择器？

10、请写出列表标签的常用样式？（至少写出3个）

11、请写出，通过CSS实现列表选项，全部横向排序的样式？

12、请写出CSS中常用的伪类选择器？（至少写出5个）

13、请写出HTML中video标签的常用属性及作用？（至少写出8个）

14、请简单说明HTML中表单的作用及特点？

15、请写出HTML中常用的表单元素都有哪些？（至少写出10个）

16、请写出HTML中常用的表单元素属性都有哪些？（至少写出8个）

17、请写出与表单元素相关的CSS样式都有哪些？（至少写出10个）