WEB前端阶段性总结：第一阶段（HTML 和 CSS篇）

其他 2019-05-12 19:25:04 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/actionActivity/article/details/89457430

本文不会阐述基本的概念性的东西，只会总结一下重要的知识点。

文章目录

HTML 部分

1. HTML的基本格式

<!DOCTYPE html>
<html>
<head>
	<!-- 指定编码 -->
    <meta charset="UTF-8">  
    <title>我是网页的标题</title>
</head>

<body>
	在这里编写网页的内容...
</body>

</html>

2. HTML 中的注释

<!-- 在这里编写html的注释 -->

特点：
1. 注释中的内容不会再页面中显示，但是可以在源代码中查看。
2. 可以通过编写注释来对代码进行描述，从而帮助其他开发人员阅读代码。
3. 有利于以后的维护。

一定要养成编写注释的习惯，注释要简单明了。

3. H5的文档声明

<!DOCTYPE html>

声明当前的网页是按照 HTML5 的标准编写的。

4. 标签的属性

“属性” 可以写在开始标签中 ，可以通过 “属性” 来设置如何处理标签中的内容

<!-- 在实际开发中不推荐使用 font 标签，为了演示标签的属性才使用的 -->
<font color="red"></font>

color 就是一个属性，而 red 是属性值。

5. 实体

在HTML中，如 < > 特殊字符是不能直接使用的，我们需要使用一些特殊的符号来表示这些特殊字符。这些特殊符号我们成为实体或者转义字符。

&nbsp 表示空格
&lt 表示小于号 <
&gt 表示大于号 >

更多实体请点我查看

6. 常用的标签

  1. 标题
<body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
</body>
  1. 段落
<p>我是一个段落...</p>
  1. 换行和水平线
<!-- br是换行 -->
<br /> 
<!-- hr是水平线 -->
<hr />
  1. 图片
    <img />有四个常用属性如下：
    src表示要引用的图片的路径。
    alt图片的表述信息，如果图片加载失败的话会提示的文字。
    width设置图片的宽度
    height设置图片的高度
<img src="../imgs/test1.jpg" alt="这是一张图片" width="100" height="100" />
  1. meta 标签
    <meta>标签可以设置网页的一些信息，如：字符编码、网页的关键字、描述信息、还可以做网页的重定向。
<!-- 设置网页的字符编码 -->
<meta charset="UTF-8">
<!-- 设置网页的关键词 -->
<meta name="keywords" content="HTML5,CSS3,web前端,Javascript">
<!-- 设置网页的描述信息 -->
<meta name="desoription" content="发布 H5 、JS 等前端的信息" />
<!--设置网页5秒后重定向到百度 -->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
  1. 超链接
    <a></a>有2个常用的属性
    href 指向链接跳转的目标地址，可以写相对路径，也可以写绝对路径(完整的地址)
    terget可以用来指定打开链接的位置。
    terget属性有2个可选值分别是_black(在新窗口打开) , self(默认值，在当前窗口打开)
<a href="http://www.baidu.com"> 我是一个超链接 </a>
  1. 列表
    列表之间可以互相嵌套，并且列表都是块级元素。

– 有序列表

<ol>
    <li>我是第一个选项</li>
    <li>我是第二个选项</li>
    <li>我是第三个选项</li>
    <li>我是第四个选项</li>
</ol>

运行结果
– 无序列表

<ul>
    <li>我是第一个选项</li>
    <li>我是第二个选项</li>
    <li>我是第三个选项</li>
    <li>我是第四个选项</li>
</ul>

运行结果
– 定义列表
定义列表用来对一些词汇或者内容进行定义。

<dl>
    <dt>兔子</dt>
    <dd>两只兔子，两只兔子，跑的块，跑的块，一只没有耳朵，一直没有尾巴，真可爱，真可爱..</dd>
    <dt>名称2</dt>
    <dd>描述2</dd>
</dl>

运行结果

7. HTML语法规范

  1. HTML 中不区分大小写，但是一般小写。
  2. HTML 中的注释不能嵌套。
<!-- 
	注释的正确写法
-->

<!-- 
	<!-- 错误写法 -->
-->
  1. HTML 中标签必须结构完整。
<!-- 1. 要么成对出现 -->
<p>  我是一个正确的p标签 </p>

<!-- 2. 要么自结束标签 -->
<br />

<p>  我是一个错误的p标签
  1. HTML 中的标签可以嵌套，但是不能交叉嵌套。
<!-- 正确写法：-->
<p> 我是一个p<font>标签</font> </p>

<!-- 错误写法：-->
<p> 我是一个p<font>标签 </p></font>
  1. 标签的属性值必须有，并且必须加引号。
<!-- 正确写法：-->
<font color="red">我是一个 font</font>
<font color='red'>我是一个 font</font>
<!-- 双引号单引号都可以~ -->

<!-- 错误写法: -->
<font color>我是一个错误的写法</font>
<font color=red>我是一个错误的写法</font>

8. 图片的格式

JPEG
特点：
支持的颜色比较多，图片可以压缩，但是 JPEG不支持透明，一般使用 JPEG 来保存照片。

GIF
特点：
GIF支持的颜色少，只支持简单的透明。支持动态图。
图片颜色单一或者动态图时可以使用 GIF。

PNG
特点：
PNG 支持的颜色多，支持复杂的透明，可以用来显示颜色复杂的透明图片。

图片的使用原则：
效果不一致，使用效果好的。
效果一致，使用小的。

CSS 部分

CSS 简称 Cascading Style Sheets (层叠样式表)

1. 编写 CSS 的位置有三个

  1. 内联样式
<!-- 第一种写法 -->
<p style="color:red;">我是一个段落，我的颜色是红色的</p>
  1. 写在 <style></style> 标签中
<style>
    p {
        color: red;
    }
</style>
  1. 外部样式表
    第一步新建外部样式表名为index.css的文件
p{
	color:red;
}

第二步在页面中引入 index.css

<!-- href 表示要引入的样式表所在的位置 -->
<link rel="stylesheet" href="index.css">

##2. CSS 中的注释

/* 在这里编写 CSS 的注释 */

3. CSS 的组成部分

CSS 是由选择器和声明块组成。
通过选择器可以选中页面中的指定元素，并且将声明块中的样式应用到元素上。
声明块仅跟在选择器后，使用一对{}括起来。
声明块中实际上是一组一组的明值对结构，这一组一组的明值对称为声明。
在一个声明块中可以写多个声明，多个声明之间用 ； 隔开，声明的样式名和样式值之间用 ： 来连接。

4. CSS 选择器

CSS 选择器有很多，总结几个常用的选择器，如果想了解更多选择器请点击我查看或者如果英文好得情况下点击我查看也是可以的哦~

  • 通配符选择器
  • 元素选择器
  • ID选择器
  • 类选择器
  • 并集选择器(选择器分组)
  • 交集选择器
  • 子元素选择器
  • 后代元素选择器
  • 兄弟元素选择器
  • 伪类选择器
  • 子元素的伪类
  • 伪元素选择器
  • 属性选择器
  • 否定伪类
4.1 通配符选择器

* 可以选中所有的元素

<style>
    * {
        color: deeppink;
    }
</style>

<body>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>

运行结果

4.2 元素选择器

元素就是标签，可以直接使用标签的名称来选择页面中的元素。

<style>
    a {
        color: deepskyblue;
    }
</style>

<body>
    <p>我是一个段落</p>
    <a href="#">我是一个a标签</a>
    <p>我是一个段落</p>
    <a href="#">我是一个a标签</a>
    <p>我是一个段落</p>
</body>

运行结果

4.3 ID 选择器

通过元素的#id来选中符合条件的元素，同一个页面中，id值不能重复。

<style>
    #p1 {
        color: greenyellow;
    }
</style>

<body>
    <p>我是一个段落</p>
    <a href="#">我是一个a标签</a>
    <p id="p1">看我的样式不一样哦~</p>
    <a href="#">我是一个a标签</a>
    <p>我是一个段落</p>
</body>

运行结果

4.4 类选择器

可以为元素设置 class 属性，class 属性和 id 类似，但是class可以重复。
拥有相同class属性值的元素称为一组。
还可以为同一个元素设置多个class 属性值，属性值之间用空格分隔。

<style>
    .p1 {
        color: deepskyblue;
    }

    .test {
        font-size: 20px;
    }
</style>

<body>
    <p class="p1">我的样式比较好看</p>
    <p class="p1">我的样式比较好看</p>
    <p class="p1">我的样式比较好看</p>
    <p class="p1 test">与众不同</p>
    <p>我么有样式</p>
    <p>我么有样式</p>
</body>

运行结果

4.5 并集选择器(选择器分组)

选择器分组可以选中多个选择器所对应的元素，每个选择器之间用,分隔。

<style>
    #test,
    .p1,
    a {
        color: deeppink;
    }
</style>

<body>
    <p id="test">与众不同</p>
    <p class="p1">我的样式比较好看</p>
    <a href="#">其实设置的样式都是一样的</a>
</body>

</html>

运行结果

4.6 交集选择器

可以同时选中同时满足多个选择器的元素，选择器之间不需要分隔符，直接写到一起就行。

<style>
    p.p1 {  /* 这样代码的意思是：选中 class 为 p1 的 p 元素。 */
        color: darkgreen;
    }
</style>

<body>
    <a class="p1">与众不同</a>
    <p class="p1">我的样式比较好看</p>
    <a href="#">其实设置的样式都是一样的</a>
</body>

运行结果

4.7 直接子元素选择器

使用 >来选择直接子元素， 直接子元素是指的儿子元素，不包括孙子元素。

IE6 以下版本不支持直接子元素选择器

<style>
    .box>p {
        color: deeppink;
    }
</style>

<body>
    <div class="box">
        <p>我是儿子元素</p>
        <p>我是儿子元素</p>
        <div>
            <p>emmm我是孙子元素..</p>
            <p>emmm我是孙子元素..</p>
        </div>
    </div>
</body>

运行结果

4.8 后代元素选择器

使用空格来选中后代元素，后代元素指的是所有的后代元素，包括儿子元素和孙子元素重孙子元素…

<style>
    .box p {
        color: goldenrod;
    }
</style>

<body>
    <div class="box">
        <p>我是儿子元素</p>
        <p>我是儿子元素</p>
        <div>
            <p>emmm我是孙子元素..</p>
            <p>emmm我是孙子元素..</p>
        </div>
    </div>
</body>

运行结果

4.9 兄弟元素选择器

使用+来选择紧挨着我的兄弟
使用~来选择我后边的所有兄弟

<style>
    .gege~.didi {
        color: deeppink;
    }

    .gege+.didi {
        color: deepskyblue;
    }
</style>

<body>
    <ul>
        <li class="gege">我是老大</li>
        <li class="didi">我是老二</li>
        <li class="didi">我是老三</li>
        <li class="didi">我是老四</li>
        <li class="didi">我是老五</li>
        <li class="didi">我是老六</li>
    </ul>
</body>

运行结果

4.10 伪类选择器

伪类：专门用来表示元素的一种特殊的状态，
比如：访问过的超链接，没有访问过的超链接，获取焦点的文本框。
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。

:link 表示一个普通的没有访问过的链接
:visited 表示已访问过的链接。由于涉及到用户的隐私，visited 伪类只能设置字体的颜色。
:hover 表示鼠标移入时的效果
:active 表示元素被点击时的状态。
:focus 表示获取焦点时，通常用于文本框。
::selection 设置当 p 标签中的文字被选中时的样式。大部分浏览器可以直接使用::selection，而火狐浏览器 需要加 -moz 前缀 ::-moz-selection 这样写才可以生效。
链接伪类的顺序

<style>
    /* 初始化 连接样式，默认的有点难看 */
    a {
        text-decoration: none;
        color: #999999;
    }

    /* 未访问的连接样式 */
    a:link {
        color: goldenrod;
    }

    /* 已访问的连接样式 */
    a:visited {
        color: deeppink;
    }

    /* 鼠标移入效果 */
    a:hover {
        color: darkgreen;
    }

    /* 鼠标点击效果 */
    a:active {
        color: rebeccapurple;
    }

    /* 获取焦点事件 */
    input:focus {
        background: green;
    }

    /* 文字被选中时的状态 */
    p::selection {
        background-color: pink;
    }
    
    /* 兼容火狐 */
    p::-moz-selection {
        background-color: pink;
    }
</style>

<body>
    <a href="http://www.baidu.com">已访问的连接</a><br>
    <a href="http://www.asdasdasdasd.com">未访问过的连接</a>
    <input type="text">
    <p>运行结果将会以 GIF 的形式展示给大家呢~</p>
</body>

运行结果图

4.11 子元素的伪类

以下的参数 n 从 1 开始

first-child 系列是从大分类里找符合条件的元素。例如：一家里有三个男孩，三个女孩。它是从 “所有孩子”中进行选择。

:first-child 选中第一个子元素
:last-child 选中最后一个子元素
:nth-child(n) 从前往后选择第n个子元素
:nth-last-child(n) 从后往前选择第n个子元素
:only-child 选择唯一的子元素

<style>
	/* 设置第一个子元素，并且子元素必须得是 li 标签 */
    ul li:first-child {
        color: red;
    }

    /* 设置最后一个为li的子元素 */
    ul li:last-child {
        color: green;
    }

    /* 设置第三个为 li 的子元素 */
    ul li:nth-child(3) {
        color: deeppink;
    }

    /* 设置倒数第三个为 li  的子元素 */
    ul li:nth-last-child(3) {
        color: deepskyblue;
    }

    /* 设置唯一的 li 子元素 */
    ul li:only-child {
        color: tomato;
    }
</style>

<body>
    <ul>
        <li>我是子元素1</li>
        <li>我是子元素2</li>
        <li>我是子元素3</li>
        <li>我是子元素4</li>
        <li>我是子元素5</li>
        <li>我是子元素6</li>
        <li>我是子元素7</li>
        <li>我是子元素8</li>
        <li>我是子元素9</li>
    </ul>
    <ul>
        <li>我是独生子</li>
    </ul>
</body>

在这里插入图片描述

nth-of-type 系列是从小分类里查找。例如：男孩一个分类，女孩一个分类。

:first-of-type 选择第一个子元素
:last-of-type 选择最后一个子元素
:nth-of-type(n) 从前往后选择第n个子元素
:nth-last-of-type(n) 从后往前选择第n个子元素
:only-of-type 选择唯一的子元素

<style>
	/* 设置第一个为 p 的子元素 */
    ul p:first-of-type {
        color: red;
    }

    /* 设置最后一个为 p 的子元素 */
    ul p:last-of-type {
        color: green;
    }

    /* 设置第三个为 li 的子元素 */
    ul li:nth-of-type(3) {
        color: deeppink;
    }

    /* 设置倒数第三个为 li  的子元素 */
    ul li:nth-last-of-type(3) {
        color: deepskyblue;
    }

    /* 设置唯一的 li 子元素 */
    ul a:only-of-type {
        color: tomato;
    }
</style>
<body>
    <ul>
        <p>我才是老大</p>
        <li>我是子元素1</li>
        <li>我是子元素2</li>
        <li>我是子元素3</li>
        <li>我是子元素4</li>
        <li>我是子元素5</li>
        <a href="#">我长得比较奇怪</a>
        <li>我是子元素6</li>
        <li>我是子元素7</li>
        <li>我是子元素8</li>
        <li>我是子元素9</li>
        <p>我才是老小</p>
    </ul>
</body>

运行结果
注意：如果子元素的类型相同，使用 first-child 和 first-of-type 都可以，如果子元素的类型不同的话，使用first-child

:empty 选择为空的元素

<style>
    /* 设置为空的 div 元素的样式 */
    div:empty {
        width: 100px;
        height: 100px;
        background-color: deeppink;
    }
</style>

<body>
    <div>我是一个有内容的div元素</div>
    <div></div>
</body>

运行结果

4.12 伪元素

使用为元素来表示元素中的一些特殊的位置。
:first-letter 表示选中第一个字符
:first-line 表示选中第一行
:before 表示元素的最前边
:after 表示元素的最后边

<style>
    /* 设置第一个字符 */
    p::first-letter {
        color: deeppink;
    }

    /* 设置第一行 */
    p::first-line {
        background-color: deepskyblue;
    }

</style>
</head>

<body>
    <p>
        hello，我是一个p标签<br>
        我是第二行啦啦啦.
    </p>
</body>

运行结果
before 和 after 一般配合content使用，通过 content 可以向 before 或 after 的位置添加一些内容。

<style>
    p::before {
        content: "start ";
        color: darkcyan;
    }

    p::after {
        content: "end.";
        color: darkcyan;
    }
</style>

<body>
    <p>我是一个p标签哦~</p>
</body>

运行结果

4.13 属性选择器

属性选择器 可以根据元素中的属性或者属性值来选择元素。
[name] 表示选择包含name 属性名的元素
[name=val]表示选择包含 name 属性，且属性值为 val 的元素
[name^=val] 表示选择包含 name 属性，且属性值以val 开头的元素
[name$=val] 表示选择包含 name 属性，且属性值以val 结尾的元素
[name*=val] 表示选择包含 name 属性，且属性值包含val 的所有元素

<style>
    /* 选择包含 class 属性的 p 元素 */
    p[class] {
        color: deeppink;
    }

    /* 选择包含 class 属性的 p 元素，并且 属性值为 p3 */
    p[class="p3"] {
        background-color: darkcyan;
    }

    /* 选择以 字符ip 开头的 p 元素 */
    p[class^="ip"] {
        color: darkgreen;
    }

    /* 选择以字符 1 结尾的 p 的元素 */
    p[class$="1"] {
        background-color: deepskyblue;
    }

    /* 设置class 包含字符 p2 的所有元素 */
    p[class*="p2"] {
        background-color: yellowgreen;
    }
</style>
</head>

<body>
    <p class="p1 p2">大家好，我是 p1</p>
    <p>大家好，我是 p2</p>
    <p class="p3">大家好，我是 p3</p>
    <p>大家好我是 p4</p>
    <p class="ip1">大家好，我是 ip1</p>
    <p class="ip2">大家好，我是 ip2</p>
</body>

运行结果

4.14 否定伪类

not()可以从已选中的元素中剔除某些元素

<style>
    /* 设置所有的p元素，除了第三个 */
    p:not(:nth-child(3)){
        color: deeppink;
    }
</style>
</head>

<body>
    <p>大家好，我是 p1</p>
    <p>大家好，我是 p2</p>
    <p>大家好，我是 p3</p>
    <p>大家好，我是 p4</p>
    <p>大家好，我是 p5</p>
    <p>大家好，我是 p6</p>
</body>

运行结果
以上内容就是CSS选择器相关的内容啦，最后通关选择器小游戏就说明 CSS 选择器掌握的差不多啦。

5. CSS 中表示颜色的三种方式

  • 使用对应的单词来表示
    red 红色
    bule蓝色
    green 绿色
    ...
<style>
    p {
        color: deeppink;
    }
</style>

<body>
    <p>我是一个p标签</p>
</body>

运行结果

  • 使用 RGB 值来表示颜色
    rgb(255,0,0) 表示红色
    rgb(0,255,0) 表示绿色
    rgb(0,0,255) 表示蓝色
    ...
<style>
    p {
        color: rgb(70, 150, 150);
    }
</style>

<body>
    <p>我是一个p标签</p>
</body>

运行结果

  • 使用两位十六进制的数值来表示
    #FF0000表示红色
    #00FF00表示绿色
    #0000FF表示蓝色
    ...
<style>
    p {
        color: #FF8500;
    }
</style>

<body>
    <p>我是一个p标签</p>
</body>

运行结果
2位如果相同的话也可以缩写
#FF0000 = #F00
#00FF00 = #0F0
#0000FF = #00F

<style>
    p {
        color: #F70;
    }
</style>

<body>
    <p>我是一个p标签</p>
</body>

运行结果

6. 长度单位

  • px 像素
  • % 百分比
    当父元素的属性值发生变化，子元素也会按照比例发生改变。
    在创建一个自适应的页面时，经常使用百分比作为单位。
  • em
    em和%类似，它是相当于元素的字体大小来进行计算的。
    1em = 1font-size
    使用 em 时，当字体大小发生改变，em 的值也会发生改变
    当设置字体相关的样式 时经常会使用 em.

7. 字体样式

  • color设置字体的颜色

  • font-size设置字体的大小
    浏览器的默认字体大小是16px，但是设置的不是文字本身的大小，在页面中每个文字都处在一个看不见的框中，我们设置的 font-size实际上是设置的框的高度，并不是字体的大小。一般情况下文字都要比框小一点。根据字体的不同，显示效果也不同。

  • font-family 设置字体
    font-family:'微软雅黑';

    • 当采用某种字体时，如果字体支持文字，则使用字体，否则使用默认字体。
    • 该样式可以同时指定多个字体
      多个字体之间使用 , 分开，当设置多个字体，浏览器会优先使用第一个字体，如果第一个字体没有，则使用第二个字体，如果第二个字体也没有则使用第三个字体。以此类推…如果都没有的话则使用浏览器默认字体。

  • chrome, IE 默认字体为 宋体

  • 火狐：默认为微软雅黑

  • font-style 设置字体的样式

    • serif 衬线字体
    • sans-serif 非衬线字体
    • monospace 等宽字体
    • cursive 草书字体
    • fantasy 虚幻字体

  • font-weigth设置字体的粗细

    • blod 加粗

  • font简写属性
    CSS 还为我们提供了一种样式叫做 font
    使用该font 可以同时设置字体的所有样式。
    可以将样式值统一写在font 样式中，然后不同的样式用空格分隔。
    顺序规则
    使用font设置字体样式时，斜体，加粗，大小写字母没有顺序的要求，甚至可写可不写，如果不写则使用默认值。
    但是要求 文字的大小和字体必须写。而且字体必须是最后一个样式，文字的大小必须是倒数第二个样式。
    实际上使用简写属性也可会有一个比较好的性能。

<style>
    p {
        font-size: 25px; /*设置字体大小*/
        color: deeppink; /*设置颜色*/
        font-weight: bold;/*设置加粗*/
        font-family: 'Courier New', Courier, monospace; /*设置字体*/
    }
</style>

<body>
    <p>This is a p Tag.</p>
</body>

运行结果

简写

<style>
    p { 
    	/*简写 font 设置所有的样式*/
        font: bold 25px 'Courier New';
        color: deeppink;
    }
</style>

<body>
    <p>This is a p Tag.</p>
</body>

8. 行间距和行高

line-height用来设置行高
可以接受的值：
1. 直接接受一个大小line-height:10px;
2. 可以指定一个百分数，则会相对于字体去计算行高。line-height:10%;
3. 可以直接传一个数值，则行高会设置相应的倍数。line-height:3;
行间距 = 行高 - 字体大小
小技巧：对于单行文本，可以将行高和父元素的高度一致，这样可以使单行文本相对于父元素垂直居中

<style>
    /* 2倍行高 */
    .p1 {
        line-height: 2;
        color: deeppink;
    }

    /* 行高 20px */
    .p2 {
        line-height: 20px;
        color: deepskyblue;
    }

    /* 三倍行高 */
    .p3 {
        line-height: 300%;
        color: green;
    }
</style>

<body>
    <p class="p1">
        “既然如此，”那么怎么能说家里所有的财产都要被查封呢？你还有一个支持你的妻子以及一群有希望的孩子，而且你有丰富的经验，还拥有上天赐予的健康的身体和灵活的头脑。至于丢掉的财富，就当是过去白忙一场算了！以后还可以再赚回来的，不是吗？

        　　三年后，他的公司再发展为《财富》杂志评选的五大企业之一。这一切成就仅靠他妻子的几话而已。

        　　在你感到沮丧的时候，请列出一张详细的生命资产表——

        　　你有没有完好的双手双脚？有没有一个会思考的大脑和健康的身体？有没有亲人、朋友、伴侣、孩子？有没有某方面的知识和特长？把注意力放在你所拥有的，而不是没有的或是失去的部分，你将会发现，原来自己已经够幸福了！
    </p>
    <p class="p2">
        “既然如此，”那么怎么能说家里所有的财产都要被查封呢？你还有一个支持你的妻子以及一群有希望的孩子，而且你有丰富的经验，还拥有上天赐予的健康的身体和灵活的头脑。至于丢掉的财富，就当是过去白忙一场算了！以后还可以再赚回来的，不是吗？

        　　三年后，他的公司再发展为《财富》杂志评选的五大企业之一。这一切成就仅靠他妻子的几话而已。

        　　在你感到沮丧的时候，请列出一张详细的生命资产表——

        　　你有没有完好的双手双脚？有没有一个会思考的大脑和健康的身体？有没有亲人、朋友、伴侣、孩子？有没有某方面的知识和特长？把注意力放在你所拥有的，而不是没有的或是失去的部分，你将会发现，原来自己已经够幸福了！
    </p>
    <p class="p3">
        “既然如此，”那么怎么能说家里所有的财产都要被查封呢？你还有一个支持你的妻子以及一群有希望的孩子，而且你有丰富的经验，还拥有上天赐予的健康的身体和灵活的头脑。至于丢掉的财富，就当是过去白忙一场算了！以后还可以再赚回来的，不是吗？

        　　三年后，他的公司再发展为《财富》杂志评选的五大企业之一。这一切成就仅靠他妻子的几话而已。

        　　在你感到沮丧的时候，请列出一张详细的生命资产表——

        　　你有没有完好的双手双脚？有没有一个会思考的大脑和健康的身体？有没有亲人、朋友、伴侣、孩子？有没有某方面的知识和特长？把注意力放在你所拥有的，而不是没有的或是失去的部分，你将会发现，原来自己已经够幸福了！
    </p>
</body>

运行结果

9. 盒子模型

9.1 内联元素和块元素

内联元素的特点：占自身大小，不会独占一整行。
常用的标签：
<a>我是一个内联元素</a>
<span>我也是一个内联元素</span>
块级元素的特点： 内容多少都会独占一行。
常用的标签：
<div>我是一个块元素</div>
<p>我是一个p标签，也是一个块元素哦~</p>
<h1>我也是一个块级元素</h1>

<style>
	/*设置块级元素的样式*/
    p,div{
        background: deeppink;
    }
    /*设置内联元素的样式*/
    a,span{
        background: #439999;
    }
</style>

<body>
    <p>我是一个块元素</p>
    <div>我也是一个块元素</div><br>
    <a>我是一个内联元素</a>
    <span>我也是一个内联元素</span>
</body>

运行结果

9.2 盒子分为以下几个部分

盒子的整个大小由内容区、边框、内边距共同决定。而外边距是确定当前盒子和其他盒子的距离。

一个盒子包括四个部分

  1. 内容区(content)
  2. 内边距(padding)
  3. 边框(border)
  4. 外边距(margin)
    盒子模型
9.2.1 内容区(content)

width 可以用来设置内容区的宽度
height可以用来设置内容区的高度
注意：width 和 height 仅设置盒子内容区的大小，而不是整个盒子的大小。

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: darkcyan;
    }
</style>

<body>
    <div>我是一个小盒子</div>
</body>

运行结果

9.2.2 边框(border)

border-width 设置边框的宽度

  • 如果 border-width 设置4个值
    则：分别给 上、右、下、左设置边框的宽度

  • 如果 border-width 设置3个值
    则：会分别设置给 上、左右、下。

  • 如果 border-width 设置2个值
    则：会分别设置给 上下、左右。

  • 如果 border-width 设置1个值
    则：会分别设置给四条边的边框宽度。

在CSS中，除了border-width ，还提供了

– border-top-width
设置上边框的宽度
– border-left-width
设置左边框的宽度
–border-right-width
设置有边框的宽度
– border-bottom-width
设置下边框的宽度

以上规则适用于：
– border-color
– border-style
– padding
– margin
border-color设置边框的颜色

  • 同样可以分别设置四个边框的颜色，规则和 border-width的规则一样，请参考 border-width
    的规则说明。

border-style 设置边框的样式

  • 同样可以分别设置四个边框的样式，规则和 border-width 的规则一样，请参考 border-width
    的规则说明。

可选值：

  • solid : 实线
  • dotted：点状边框
  • dashed：虚线
  • double：双线
<style>
    .box {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: burlywood;
        border-color: deeppink;
        border-width: 2px;
        border-style: solid;
    }
</style>

<body>
    <div class="box">box</div>
</body>

运行结果
简写 border

在大部分浏览器中，边框的宽度和颜色都是有默认值的，️而边框的默认样式都是 none。

border 的简写样式：

通过简写样式可以同时设置边框的宽度、颜色、样式，而且没有任何的顺序要求。

  • border:10px solid red;

同样可以单独设置每条边框的样式

  • border-top
  • border-left
  • border-right
  • border-bottom
<style>
    .box {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: burlywood;
        /*border 简写*/
        border: 2px solid deepskyblue;
    }
</style>
</head>

<body>
    <div class="box">box</div>
</body>

运行结构

<style>
    .box {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: burlywood;
        /*分别设置四个边的边框样式*/
        border-top: 2px solid deeppink;
        border-left: 2px dashed darkcyan;
        border-right: 2px dotted darkgoldenrod;
        border-bottom: 2px dotted darkolivegreen;
    }
</style>

<body>
    <div class="box">box</div>
</body>

运行结果

9.2.3 内边距(padding)

内边距(padding)指的是盒子的内容区与盒子边框之间的距离。

一共有四个方向的内边距，可以通过四个属性来分别指定四个方向的内边距。

  • padding-top
    设置上内边距
  • padding-left
    设置左内边距
  • padding-right
    设置右内边距
  • padding-bottom
    设置下内边距
<style>
	a {
        background: #fba;
     }
    .box {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
        padding-left: 10px;
    }
</style>

<body>
    <div class="box">
        <a>我是一段文字</a>
    </div>
</body>

设置padding前
设置padding后
简写和 border-width 的规则一样，请参考 border-width 的规则。

  • 内边距会影响盒子可见框的大小。
  • 元素背景会延伸到内边距
    – 背景图片
    – 背景颜色
<style>
    a {
        background: #fba;
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
        padding: 20px;
    }
</style>
<body>
    <div class="box">
        <a>我是一段文字</a>
    </div>
</body>

在这里插入图片描述
注意：当元素的宽度值为 auto 时，此时指定 padding 不会影响可见框的大小，而是会自动修改宽度，以适应内边距。

9.2.4 外边距(margin)

外边距(margin)指的是：当前盒子与其他盒子的距离，不会影响可变框的大小，而是会影响到盒子的位置。

盒子有四个方向的 外边距(margin)
-margin-top
设置盒子的上外边距

  • margin-left
    设置盒子的左外边距
  • margin-right
    设置盒子的右外边距
  • margin-bottom
    设置盒子的下外边距
<style>
    .box1 {
        width: 200px;
        height: 200px;
        float: left;/*设置左浮动*/
        background-color: darkcyan;
        margin-right: 20px;
    }

    .box2 {
        width: 200px;
        height: 200px;
        float: left;/*设置左浮动*/
        background-color: darkgoldenrod;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

在这里插入图片描述

注意：

  • 由于页面中的元素都是靠左靠上摆放的，当设置上、左外边距时，会导致盒子自身的位置发生改变。

  • 而如果是设置右、下外边距会改变其他盒子的位置。

外边距也可以指定为 负值，如果外边距设置的是负值，则元素会向反方向移动。

margin-right: -80px;

在这里插入图片描述

margin 还可以设置为 auto .

auto 一般只设置给水平方向的margin

  • 如果只指定左外边距，或右外边距的 auto，则会将外边距设置为最大值。
  • 垂直方向的外边距如果设置成auto，则外边距默认就是0
  • 如果将做外边距和右外边距同时设置为 auto ，则会将两侧的外边距设置为相同的值。(水平居中)
    • margin:0 auto; 水平居中
<style>
        
    .box1 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
        margin: 0 auto;
    }
</style>

<body>
    <div class="box1"></div>
</body>

水平居中

margin 也可以使用简写
例如：

  • 分别设置 上、右、下、左的外边距
    margin : 10px 20px 30px 40px;
  • 分别设置 上、左右、下的外边距
    margin : 10px 20px 30px;
  • 分别设置 上下、左右的外边距
    margin : 10px 20px;
  • 分别设置上下左右的外边距
    margin : 10px;
    问题1
9.2.5 外边距重叠的问题

问题1

  • 在网页中，垂直方向的相邻外边距会发生外边距的重叠。
  • 所谓的外边距重叠，指的是兄弟元素之间相邻的外边距会取最大值而不是取和。
<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
        margin-bottom: 20px;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: darkgoldenrod;
        margin-top: 20px;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

运行结果
问题2

  • 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。
<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: darkgoldenrod;
        margin-top: 40px;
    }
</style>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

运行结果

完美解决办法：

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: darkgoldenrod;
        margin-top: 40px;
    }

	/* 使用伪元素在元素的前后添加一个空的内容 */
    .clearFix::before,
    .clearFix::after {
        content: ""; /*内容为空*/
        display: table; /*设置为块级元素*/
        clear: both;/*清除浮动*/
    }
</style>

<body>
    <div class="box1 clearFix">
        <div class="box2"></div>
    </div>
</body>

运行结果

9.3 内联元素的盒子模型

  1. 内联元素不能设置宽度和高度

  2. 内联元素可以设置水平方向的内边距

  3. 内联元素可以设置垂直方向的内边距，但是它不会影响页面的布局。

  4. 内联元素可以设置边框，垂直方向的边框不会影响到页面的布局。

  5. 内联元素支持水平方向的外边距，水平方向的外边距不会重叠，而是会求和。

  6. 内联元素不支持垂直外边距。

代码略...

10. 浏览器的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了默认的 margin 和 padding，而它的这些默认样式正常情况下我们不需要使用。

所以我们往往在编写样式之前，需要将浏览器的默认 margin 和 padding 给清除。

/* 清除浏览器的默认样式 */
*{
	padding:0;
	margin:0;
}

11. display 和 visibility

display 和 visibility 都是设置元素的显示与隐藏

display 有以下几个属性

  • inline 默认值，可以将一个元素设置为内联元素
  • block 可以将一个元素设置为块元素
  • inline-block将一个元素转换为行内块 (它可以使一个元素既有行内元素的特点，又有块级元素的特点)
  • none 不显示元素，并且元素不会在页面中占用位置
<style>
    a {
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
</style>

<body>
    <a>我是一个a标签</a>
</body>

运行结果
这时 a 还是内联元素，添加 display:block属性后a就会变成块级元素。

display:block;

运行结果
隐藏元素：

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: darkgoldenrod;
        display: none;  /*设置元素隐藏*/
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
</style>

<body>
    <div class="box1 "></div>
    <div class="box2 "></div>
    <div class="box3 "></div>
</body>

运行结果

visibility有两个属性
visible默认值，元素默认会在页面中显示
hidden元素会隐藏，但是会在页面中占用着位置

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: darkgoldenrod;
        visibility: hidden;  /*设置元素隐藏*/
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
</style>

<body>
    <div class="box1 "></div>
    <div class="box2 "></div>
    <div class="box3 "></div>
</body>

运行结果

12. overflow

子元素默认是存在于父元素的内容区中的，理论上讲子元素最大可以等于父元素内容区大小。
如果子元素的大小超过了父元素的内容区，则超出的部分会在父元素以外的位置显示。
超出父元素内容的称为 溢出的内容
父元素默认是将溢出的内容在父元素外边显示。

通过overflow 可以设置父元素如何处理溢出的内容。
overflow有以下几个可选值
visible默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
hidden溢出的内容会被修剪，不会显示
scroll会为父元素添加滚动条，通过拖动滚动条可以查看完整内容。
该属性无论内容是否溢出，都会添加垂直和水平双方向的滚动条。
auto 会根据需求自动添加滚动条，水平方向超出了就添加水平的滚动条，垂直方向超出了就添加垂直方向的滚动条。

<style>
    .box1 {
        width: 200px;
        height: 200px;
        margin: 50px auto;
        background-color: #780;
    }
</style>

<body>
    <div class="box1">

        <p>All around the world this time of year,
            Love Is Everything - Ariana Grande
            It's time for us to all give something,
            As a matter of fact it won't cost you much,
            It's in your heart you got it right there,
            You got it right there
            The truth is,
            Your heart is the biggest gift you can give anyone,
            I know we can do it cause when I look around,
            There's enough for everyone
            If you spend a little time,
            look deep inside, search your heart,
            And I'm sure you'll find
            that the best gift you can give this christmas
            All we need is love,
            Love is all we need,
            Love underneath the tree,
            Love is everything
            All we need is love,
            Love is all we need,
            Let your heart believe,
            Love is everything
            Give it all cause it's the season,
            Spread lots of joy and lots of cheer,
            If you need a cost, if you need a reason,
            Its the gift that just won't disappear, won't disappear
            The truth is,
            Your heart is the biggest gift you can give anyone,
            I know we can do it cause when I look around,
            There's enough for everyone
            If you spend a little time,</p>
    </div>
</body>

不处理溢出内容

overflow: hidden;

隐藏溢出内容

overflow: scroll;

双向显示滚动条

overflow: auto;

自动选择滚动太哦

13. 文档流

文档流处在网页的最底层，它表示的是一个页面的位置。我们所创建的元素默认都处在文档流中。

元素在文档流中的特点

  • 块级元素
    1. 块元素在文档流中会独占一行，块元素会自上向下排列
    2. 块元素在文档流中默认宽度是父元素的100%
    3. 块元素在文档流中的高度默认被内容(子元素)撑开
  • 内联元素
    1. 内联元素在文档流中只占自身的大小，会默认从左向右排列。如果一样中不足以容纳所有的内联元素，则会换到下一行，下一行也是从左向右排列。
    2. 内联元素的宽度和高度默认都被内容撑开，前提是在文档流中。

14. 浮动

14.1 浮动的特点
  1. 当为一个元素设置浮动以后，float 属性是一个非 none 的值，元素会立即脱离文档流。
  2. 元素脱离文档流以后，它下边的元素会立即向上移动。
  3. 元素浮动以后，会尽量向页面的左上或者右上漂浮，直到遇到父元素的边框或者其他的浮动元素。
  4. 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。
  5. 如果在一行中不能容下所有的浮动元素，则其他的浮动元素会自动换行。
  6. 浮动的元素不会超过它上边的兄弟元素，最多一边齐。
  7. 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以通过浮动来设置文字环绕图片的效果。
  8. 块元素脱离文档流后，宽度和高度都被内容撑开。
  9. 内联元素脱离文档流以后会变成块元素。
  10. 浮动元素会比文档流高一层。
14.2 float 属性

float 属性有三个常用值
none 默认值，不浮动，默认垂直排列
left 元素会立即脱离文档流，向页面左侧浮动。
right 元素会立即脱离文档流，向页面右侧浮动。

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

初始状态

.box1 {
	width: 200px;
	height: 200px;
	background-color: deeppink;
	float: left;  /* box1 左浮动*/
}

左浮动

.box2,.box3{
	float: left;
}

全部左浮动

.box1,.box2,.box3{
	float: left;
}

全部向右浮动

14.3 浮动带来的问题（高度塌陷）

关于网页中的元素高度塌陷的问题请查看解决网页中的元素高度塌陷的问题

14.4 清除浮动

有时希望清除其他元素浮动对当前元素所产生的影响，这时可以使用clear来完成功能。

clear可以用来清除其它浮动元素对当前元素的影响。

可选值：

  • left：清除左侧浮动元素对当前元素的影响
  • right：清除右侧浮动元素对当前元素的影响。
  • both：清除两侧浮动元素对当前元素的影响。（清除对他影响最大的那个元素）
  • none :默认值，不清除浮动

清除浮动以后，元素会回到其他元素浮动之前的位置。

<style>
.box1 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        float: right;  /* 设置 box2 向右浮动*/
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
        clear: right;  /*清除box2右浮动对box3 的影响*/
   }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

清除浮动前
清除浮动前
清除浮动后
清除浮动后

15. 定位

定位指的就是将指定的元素摆放到页面的任意位置。

通过定位可以任意摆放元素。通过 position 属性来设置元素的定位类型。

当开启了元素的定位(position 的属性值是一个非 static的值）时，可以通过 left、right、top、bottom 四个属性来设置元素的偏移量。

left 元素相对于其定位位置的左侧偏移量。
right 元素相对于其定位位置的右侧的偏移量。
top 元素相对于其定位位置上边的偏移量。
bottom 元素相对于其定位置止下边的偏移量。

通常偏移量只需要使用2个就可以对元素进行定位了。一般会选择一个水平方向的偏移量和垂直方向的偏移量来进行定位。

position 的可选值
static 默认值，表示元素没有开启定位
relative 表示开启了元素的相对定位
相对定位的特点：

  • 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化。
  • 相对定位是相对于元素在文档流中原来的位置进行定位。
  • 相对定位的元素不会脱离文档流。
  • 相对定位会提升一个层级。
  • 相对定位不会改变元素的性质，块还是块，内联还是内联。
<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
	}
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body

定位前
运行结果

.box2{
	position: relative;
	top: 50px;
	left: 50px;
}

在这里插入图片描述
absolute 表示开启了元素的绝对定位
绝对定位的特点：

  • 开启绝对定位会使元素脱离文档流
  • 开启绝对对位以后，如果不设置偏移量，则元素的位置不会发生变化。
  • 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的。
    如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
  • 绝对定位会使元素提升一个层级。
  • 绝对定位会改变元素的性质
    - 内联元素变成块元素，
    - 块元素的宽高被默认被内容撑开。
.box2{
	position: absolute;
	top: 50px;
	left: 50px;
}

运行结果
fixed 表示开启了元素的固定定位

固定定位也是一种绝对定位。它的大部分特点都和绝对定位一样。

不同的是：

  • 固定定位永远都会相对于浏览器窗口进行定位的。
  • 固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动。

修改 style 标签中的代码

body {
	height: 5000px;
}

.box1 {
	width: 200px;
    height: 200px;
    background-color: deeppink;
    position: fixed;
    top: 100px;
}

固定定位
IE6不支持固定定位。

16 元素的层级

如果定位元素的层级是一样的，在结构上，下边的元素会盖住上边的。

通过 z-index 属性可以用来设置元素的层级。
可以为 z-indx 指定一个正整数作为值，该值将会作为当前元素的层级。层级越高，元素越优先显示。

注意：父元素的层级再高，也不会盖住子元素。

对于没有开启定位的元素，z-index无效。

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: darkgoldenrod;
        position: absolute;
        top: 100px;
        left: 100px;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
        position: absolute;
        top: 200px;
        left: 200px;
            
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
        position: absolute;
	}
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

初始状态
初始状态
提升 box1 的层级

.box1{
	z-index:3;
}

运行结果
提升 box2 的层级

.box2{
	z-index:6;
}

运行结果

17. opacity

设置元素的背景透明，它需要一个 0~1之间的值。

0 表示完全透明
1 表示完全不透明
0.5 表示半透明

注意：

  • opacity 属性在 IE8及以下浏览器中不支持。

  • IE8 及以下浏览器需要使用以下属性代替：

    filter:alpha(opacity=50);
    透明度需要0~100之间的值
    0 表示完全透明
    100表示完全不透明
    50表示半透明

<style>
    .box {
        width: 200px;
        height: 200px;
		background: #ff78ff;
		opacity: .5;
		/*兼容 IE*/
		filter: alpha(opacity=50);
	}
</style>

<body>
    <div class="box">123</div>
</body>

半透明效果

18. 背景相关的样式

background-color 设置背景颜色
background-img 设置背景图片

  • 语法：background-img:url(图片的相对路径)

    • 如果背景图片大于元素大小，默认会显示图片的左上角。
    • 如果背景图片和元素一样大，则会将背景图片全部显示。
    • 如果背景图片小于元素大小，则会默认将背景图片以平铺的方式充满元素。

  • 可以同时为一个元素指定背景图片和背景颜色，这样背景颜色将会作为背景图片的底色。

  • 一般情况下设置背景图片时，都会指定一个背景颜色。

<style>
    .box {
        width: 3000px;
        height: 1000px;
        background: url("bg-1.jpg");
    }
</style>

<body>
    <div class="box"></div>
</body>

默认

background-repeat用于设置背景图片的重复方式

  • 可选值
    • repeat ： 双方向重复
    • no-repeat：背景图片不会重复，有多大就显示多大。
    • repeat-x：背景图片水平方向重复。
    • repeat-y: 背景图片垂直方向重复。
background-repeat: no-repeat;

不平铺

background-repeat: repeat-x;

在这里插入图片描述

background-repeat: repeat-y;

在这里插入图片描述

background-position设置背景图片在元素中的位置
可选值：

  • 该属性可以使用 top、left、right、bottom、center 中的两个值来指定一个背景图片的位置

例如：
top,left表示左上
bottom,right表示右下
centet,center表示居中

如果只给出一个值，第二个值默认是 center。

background-position: center;

在这里插入图片描述

  • 也可以直接指定2个偏移量
    • 第一个值是水平偏移量，
      • 如果指定一个正值，则向右移动指定的像素。
      • 如果指定一个负值，则向左移动指定的像素。
    • 第二个值是垂直偏移量。
      • 如果指定一个正值，则向下移动指定的像素。
      • 如果指定一个负值，则向上移动指定的像素。
<style>
    .box {
        width: 1000px;
        height: 1000px;
        background: url("bg-1.jpg");
        background-color: deeppink;
        background-repeat: no-repeat;
        background-position: 100px 100px;
    }
</style>

<body>
    <div class="box"></div>
</body>

在这里插入图片描述

background-position: -100px -100px;

在这里插入图片描述
background-attachment用来设置背景图片是否随页面一起滚动。

  • 可选值：
    scroll：默认值，背景图片随着窗口滚动。
    fixed：背景图片会固定在某一位置，不随页面滚动。
    当背景图片的设置为 fixed 时，背景图片的定位永远相对于窗口。
    不随窗口滚动的图片，一般都会设置给 body，而不设置给其他元素。
<style>
	.body{
	height:5000px;
	}
    .box {
        width: 1000px;
        height: 5000px;
        background: url("bg-1.jpg");
        background-color: deeppink;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
</style>

<body>
    <div class="box">填充内容</div>
</body>

运行结果

19. 表格

在 HTML 中，使用 table 标签创建一个表格。表格也是一个块级元素

19.1 基本语法

<tr>表示表格中的一行，有几行就有几个 <tr>
<td>在<tr>中需要使用 <td>来创建单元格，有几个单元格就创建几个 <td>
<th>可以使用<th>标签来表示表头的内容，它的用法和 <td> 一样，不同的是有一个默认的样式，加粗并且居中

<body>
	<!-- table 表示一个表格-->
    <table>
    	<!-- tr 代表一行 -->
        <tr>
        	<!-- td 代表一列 -->
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

运行结果

19.2 合并单元格

rowspan 跨行合并单元格

<body>
    <table border="1">
        <tr>
            <td rowspan="2">我占2行</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

运行结果
colspan 跨列合并单元格

<body>
    <table border="1">
        <tr>
            <td colspan="2">我横跨2列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

运行结果

19.3 表格的样式

border-spacing table 和 td 之间默认有一个距离，通过 border-spacing 属性可以设置这个距离.

例如：
border-spacing:0px; 设置table和 td之间没有距离。

<style>
    table {
        border: 1px solid deeppink;
        border-spacing: 0;
    }

    td {
        border: 1px solid deeppink;
    }
</style>

<body>
    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

运行结果
border-collapse可以用来设置用来设置表格的边框合并

  • 可选值：
    collapse 表示合并

注意：设置了 border-collapse 以后，则 border-spacing 自动失效。

<style>
	table {
        border: 1px solid deeppink;
        border-spacing: 0;  /* 自动失效 */
        border-collapse: collapse;
 	}

    td {
        border: 1px solid deeppink;
    }
</style>

运行结果
隔行变色的效果

<style>
	table {
        border: 1px solid deeppink;
        border-collapse: collapse;
 	}

    td {
        border: 1px solid deeppink;
    }
    /* 设置偶数行背景颜色 */
    tr:nth-child(even) {
    	background: deepskyblue;
    }
    /* 设置奇数行背景颜色 */
    tr:nth-child(even) {
    	background: yellowgreen;
    }
</style>
<body>
    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
        <tr>
            <td>第四行第一列</td>
            <td>第四行第二列</td>
            <td>第四行第三列</td>
        </tr>
        <tr>
            <td>第五行第一列</td>
            <td>第五行第二列</td>
            <td>第五行第三列</td>
        </tr>
        <tr>
            <td>第六行第一列</td>
            <td>第六行第二列</td>
            <td>第六行第三列</td>
        </tr>
        <tr>
            <td>第七行第一列</td>
            <td>第七行第二列</td>
            <td>第七行第三列</td>
        </tr>
    </table>
</body>

运行结果

19.4 长表格

有一些情况下，表格非常的长。这时，就需要将表格分为3个部分【表头、主体、底部】。

在HTML中，提供了三个标签：
<thead></thead> 中的内容永远会显示在表格的头部。
<tbody></tbody> 中的额内容永远都会显示在表格的中间。
<tfoot><tfoot> 中的内容永远都会显示在表格的底部。

这三个标签的作用就是用来区分表格的不同部分，他们都是table的子标签，都需要直接写到 table 中。
如果表格中没有写tbody 浏览器会自动在表格中添加 tbody，并且将所有的 tr放到 tbody 里边。
所以注意：tr 不是 table 的子元素，而是tbody的子元素。

<style>
    table {
        border: 1px solid deeppink;
        border-collapse: collapse;
    }

    td {
        border: 1px solid deeppink;
        text-align: center;  /* 设置文字居中 */
    }
</style>
<body>
    <table>
    	<!-- 表头 -->
        <thead>
            <tr>
                <th colspan="4">编程语言</th>
            </tr>
        </thead>
        <!-- 表格主要内容 -->
        <tbody>
            <tr>
                <td>Java</td>
                <td>PHP</td>
                <td>Python</td>
                <td>web前端</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>Node.Js</td>
                <td>Vue.js</td>
                <td>React</td>
            </tr>
        </tbody>
        <!-- 底部 -->
        <tfoot>
            <tr>
                <td>世界上最优雅的语言是:</td>
                <td colspan="3">Python</td>
            </tr>
        </tfoot>
    </table>
</body>

运行结果

19.5 表格布局

以前表格更多的情况是对页面进行布局的，但是这种方式早已被CSS淘汰了。

  • 表格的列数由td最多的那行决定。
  • 表格可以嵌套，可以在 td中再放置一个table

20.表单

表单的作用就是将用户的信息提交给远程服务器的。比如：注册、登录、百度的搜索框

20.1 创建表单

使用 <form action="#"></form>标签创建一个表单，form 标签中必须指定一个 action 属性，该属性指向的是一个服务器的地址，当提交表单的时候，会提交到action属性所对应的地址。

20.2 表单项

如果希望表单项中的内容提交到服务器中，还必须给表单项指定一个 name 属性，表示提交内容的名字。

用户填写的信息会附在 URL 字符串的后边，以查询字符串的形式发送给服务器。
格式：
url地址?属性名=属性值&属性名=属性值&...

  • 文本框
    使用<input />来创建一个文本框，<input /> 是一个行内块元素，可以通过 value 属性设置文本框的默认值。
    例如：
<body>
	<form action="#">
	    <input type="text" name="user-name" value="这是文本框的默认值">
	</form>
</body>

文本框

  • 密码框
    使用 <input /> 创建一个密码框，它的 type 属性值是 password
    例如：
<body>
    <form action="#">
        <input type="password" name="user-pwd" />
    </form>
</body>

密码框

  • 按钮
    创建按钮有2中方式
  1. 使用 <input /> 标签来创建，它的 type 属性有三个值分别是botton 普通按钮、submit 提交按钮、reset重置按钮
<body>
    <form action="#">
        <input type="button" value="普通按钮" />
        <input type="submit" value="提交按钮" />
        <input type="reset" value="重置按钮" />
    </form>
</body>

运行结果

  1. 使用 <botton></botton>标签来创建， 它的 type 属性有三个值分别是botton 普通按钮、submit 提交按钮、reset重置按钮
<body>
    <form action="#">
        <button type="button">普通按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
    </form>
</body>

运行结果

  • 单选按钮
    使用 <input /> 来创建一个单选按钮，它的 type 属性值使用 radio

– 单选按钮通过 name 属性进行分组，name 属性相同的是一组按钮。
– 像这种用户选择的但不需要用户直接填写内容的表单项，还必须指定一个 value 属性，这样被选中的表单项的 value 值，将会被提交到服务器。

<body>
    <form action="#">
        <input type="radio" name="gender" value="man"> 男
        <input type="radio" name="gender" value="woman"> 女
    </form>
</body>

单选按钮

  • 多选框
    使用 <input> 创建一个多选框，它的 type 属性使用 checkbox ，用法和 单选按钮类似。
<body>
    <form action="#">
        <input type="checkbox" name="hobby" value="lq" />篮球
        <input type="checkbox" name="hobby" value="zq" />篮球
        <input type="checkbox" name="hobby" value="ppq" />乒乓球
    </form>
</body>

多选按钮

  • 下拉列表
    使用 select 来创建一个下拉列表，在下拉列表中，使用 option 创建列表项。
    下拉列表的 name 属性需要指定给 select，value属性指定给 option
<body>
    <form action="#">
        <select name="star">
            <option value="fbb">范冰冰</option>
            <option value="zbs">赵本山</option>
            <option value="fw">范伟</option>
        </select>
    </form>
</body>

默认值
选择
可以通过在 option 中通过添加 selected = "selected"将选项设置为默认选中状态。

<body>
    <form action="#">
        <select name="star">
            <option value="fbb">范冰冰</option>
            <!-- 默认选中 赵本山 -->
            <option value="zbs" selected="selected">赵本山</option>
            <option value="fw">范伟</option>
        </select>
    </form>
</body>

默认选中赵本山
当给下拉列表 select 添加一个 multiple="multiple" ，则下拉列表变为一个多选的下拉列表。

<body>
    <form action="#">
        <select name="star" multiple="multiple">
            <option value="fbb">范冰冰</option>
            <option value="zbs">赵本山</option>
            <option value="fw">范伟</option>
        </select>
    </form>
</body>

多选
可以通过 optgroup对选项进行分组，同一个optgroup中的选项是一组。在optgroup中可以通过 lable 属性来指定分组的名字。

<body>
    <form action="#">
        <select name="star">
            <optgroup label="男孩">
                <option value="zs">张三</option>
                <option value="ls">李四</option>
                <option value="ww">王五</option>
            </optgroup>
            <optgroup label="女孩">
                <option value="zs">小红</option>
                <option value="ls">小兰</option>
                <option value="ww">小张</option>
            </optgroup>
        </select>
    </form>
</body>

运行结果

  • 文本域
    使用 textarea 创建一个文本域。
    cols 设置列数
    rows 设置行数
<body>
    <form action="#">
        <textarea name="test" cols="30" rows="10"></textarea>
    </form>
</body>

运行结果

  • label 标签
    <label></label> 标签专门用来选中表单中的提示文字。
    该标签可以指定一个 for 属性，该属性的值需要指定一个表单项的 ID 值，这样再选中文字的时候可以选择相应的表单项。
<body>
    <form action="#">
        <label for="lq"><input id="lq" type="checkbox" name="hobby" value="lq" />篮球</label>
        <label for="zq"><input id="zq" type="checkbox" name="hobby" value="zq" />足球</label>
        <label for="ppq"><input id="ppq" type="checkbox" name="hobby" value="ppq" />乒乓球</label>
    </form>
</body>

label

  • 表单项分组

在表单中可以使用 <fieldset></fieldset> 来对表单项进行分组。可以将表单项中的同一组放到 <fieldset></fieldset> 中。
在<fieldset>中可以使用 <legend> 子标签来指定组名。

<body>
    <form action="#">
        <fieldset>
            <legend>用户信息</legend>
            用户名:<input type="text">
            密码:<input type="password">
        </fieldset>
        <fieldset>
            <legend>爱好</legend>
            <label for="lq"><input id="lq" type="checkbox" name="hobby" value="lq" />篮球</label>
            <label for="zq"><input id="zq" type="checkbox" name="hobby" value="zq" />足球</label>
            <label for="ppq"><input id="ppq" type="checkbox" name="hobby" value="ppq" />乒乓球</label>
        </fieldset>
        <fieldset>
            <legend>提交</legend>
            <button type="submit">提交按钮</button>
            <button type="reset">重置按钮</button>
            <button type="button">普通按钮</button>
        </fieldset>
    </form>
</body>

运行结果
【完】

猜你喜欢

转载自blog.csdn.net/actionActivity/article/details/89457430
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022