2、CSS基础

已于 2024-05-15 20:42:21 修改
阅读量1.5k 收藏 11
点赞数 14
CC 4.0 BY-SA版权
分类专栏： # CSS 文章标签： css3
于 2023-08-13 18:07:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_73087260/article/details/132261323

文章目录

一、CSS 简介与基础选择器

CSS的主要使用场景就是美化网页，布局页面的

1.1 HTML 的局限性

HTML 是网友的骨架，只关注内容的语义。例如<h1>表示大标题，<p>表示段落

早期的时候，HTML 只能做一些简单的样式，网页非常丑，使 HTML 代码臃肿和繁琐

1.2 CSS-网页的美容师

CSS 是 层叠样式表（Cascading Style Sheets）的简称

有时我们也会称之为CSS样式表或级联样式表

CSS 也是一种标记语言

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式

HTML 呈现结构，CSS 决定样式，即结构与样式分离

1.2 CSS 语法规范

css语法规范

<head>
	...
	<style>
		/* 选择器 { 样式 } */
		/* 给谁改样式 { 改什么样式 } */
		p {
			color: red;
             /* 修改了文字大小为12像素 */
			font-size: 12px;
        }
	</style>
</head>
<body>
	<p>有点意思</p>
</body>
  • 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对”的形式出现
  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  • 属性和属性值之间用英文“：”分开
  • 多个“键值对”之间用英文“；”进行区分

1.3 CSS 代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式.

1.样式格式书写

①紧凑格式

h3 { color: deeppink;font-size:20px;}

②展开格式

h3 {
	color: pink;
	font-size: 20px;
}

强烈推存第二种格式，因为更直观。

2.样式大小写
h3 {
	color: pink;
   }

H3 {
	COLOR: PINK;
}

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

3.空格规范
h3 {
	color: pink;
   }

①属性值前面，冒号后面，保留一个空格

②选择器（标签）和大括号中间保留空格

2. CSS 基础选择器

2.1 选择器的作用

选择器（选择符）就是根据不同需求把不同标签选择出来。

简单来说，就是选择标签用的。

css选择器的作用

以上CSS做了两件事：

  1. 找到所有的h1标签。选择器（选对人）。

  2. 设置这些标签的样式，比如颜色为红色（做对事）。

2.2 选择器分类

选择器分为基础选择器和复合选择器两大类。

  • 基础选择器由单个选择器组成
  • 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器

2.3 标签选择器

直接用HTML 标签名称作为选择器，按标签名称分类，为页面某一类标签指定统一的 CSS 样式。

语法

标签名 {
    属性1： 属性值1;
    属性2： 属性值2;
    属性3： 属性值3;
}

<head>
	<style>
		/*标签选择器：写上标签名*/
		p {
			color:green;
        }
		div {
            color: pink;
        }
	</style>
</head>
<body>
	<p>男生</p>
	<p>男生</p>
	<p>男生</p>
	<div>女生</div>
	<div>女生</div>
	<div>女生</div>
</body>

作用：标签选择器可以把某一类标签全部选择出来，比如所有的

标签和所有的 标签。

优点:能快速为同类型标签设置统一样式。

缺点:不能设置差异化样式，只能选择全部当前标签。

2.4 类选择器⭐️

差异化选择不同标签，单独选一个或者某个标签。

类选择器在HTML中以class属性表示，在CSS中，以一个点"."号显示

语法

.类名 {
	属性1：属性值1；
	...
}

例如，将所有拥有 red 类的 HTML 元素均为红色。

.red {
	color: red;
}

结构需要用class属性来调用 ( class : 类的意思 )

<div class='red'>变红色</div>

<head>
	<style>
        /* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 */
		.red {
		color: red;
        }
        .star-sing {
            color: green;
        }
	</style>
</head>
<body>
	<ul>
		<li class="red">冰雨</li>
		<li class="red">来生缘</li>
		<1i>李香兰</1i>
		<1i>生僻字</1i>
		<li class="star-sing">江南style</li>
	</ul>
	<div class="red">我也想变红色</div>
</body>

注意

  1. 类选择器使用" . "（英文点号）进行标识，后面紧跟类名（自己命名）,可以理解为给这个标签起了一个名字来表示。

  2. 长名称或词组可以使用中横线" - " 来为选择器命名。

  3. 不要使用纯数字、中文等命名，尽量使用英文字母来表示

  4. 命名要有意义，尽量使别人一眼就知道这个类名的目的。

    命名规范：见附件（Web前端开发规范手册.doc）

2.4.1 类选择器-多类名

给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签

简单理解就是一个标签有多个名字

1.多类名使用方式

<div class="red font20">亚瑟</div>

（1）在标签class属性中写多个类名

（2）多个类名中间必须用空格隔开

（3）这个标签就可以分别具有这些类名的样式

<head>
	<style>
		.blue {
			color: blue;
         }
		.font35 {
			font-size: 35px;
         }
	</style>
</head>
<body>
	<div class="blue font35">王俊凯</div>
</body>

2.多类名开发中使用场景

（1）可以把一些标签元素相同的样式（共同的部分）放到一个类里面

（2）这些标签都可以调用这个公共的类，然后再调用自己独有的类

（3）从而节省CSS代码，统一修改也非常方便

<head>
	<style>
		.box {
			width: 100px;
             height: 100px;
             font-size: 30px;
         }
         .red {
			/*背景颜色*/
			background-color: red;
         }
		.green {
			background-color: green;
        }
	</style>
</head>
<body>
	<div class="box red">红色</div>
	<div class="box green">绿色</div>
	<div class="box red">红色</div>
</body>

2.5 id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以id 属性来设置 id 选择器，用 # 来定义。

语法：

#id名 {
    属性1: 属性值1;
    ...
}

例如，将id为nav元素中的内容设置为红色。

#nav {
	color:red;
}

注意：id属性只能在每个HTML文档中出现一次。

<head>
	<style>
		/*id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用*/
		#pink {
			color: pink;
        }
	</style>
</head>
<body>
	<div id="pink">迈克尔·杰克逊</div>
	<div> pink老师 </div>
</body>

id 选择器与类选择器的区别

  1. 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
  2. id 选择器好比人的身份证号码全中国是唯一的，不得重复。
  3. id选择器和类选择器最大的不同在于使用次数上。
  4. 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

2.6 通配符选择器

在CSS中，通配符选择器使用“ ***** ”定义，它表示选取页面中所有元素（标签）。

语法

* {
    属性1: 属性值1;
    ...
}

<head>
	...
	<style>
        * {
            color: red;
        }
		/* * 这里把 html body div span Li等等的标签都改为了红色*/
</style>
</head>
<body>
	<div>我的</div>
	<span>我的</span>
	<ul>
		<li>还是我的</li>
	</ul>
</body>
  • 通配符选择器不需要调用，自动给所有的元素使用样式
  • 特殊情况使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距后期讲)
* {
    margin: 0;
    padding: 0;
}

2.7 基础选择器总结

基础选择器作用特点使用情况用法
标签选择器选出所有相同标签不能差异化选择较多p{color:red;}
类选择器选出一个或多个标签可以根据需求选择非常多.nav {color: red;}
id 选择器一次只能选出一个标签一个 id 属性在页面中只能出现一次一般配合 js 使用#nav {color: red;}
通配符选择器选择所有标签元素选择的太多，有部分不需要特殊情况使用* {color: red; }
  • 每个选择器都有自己的使用场景，都要掌握。
  • 如果是修改样式，类选择器是使用最多的。

3. CSS 字体属性

3.1 字体系列

CSS 使用 font-family 属性定义文本字体系列。font：字体

p {
	font-family: "微软雅黑";
}
div {
    font-family: ‘Microsoft YaHei’,Arial,Helvetica,sans-serif;
}

  • 各种字体之间必须使用英文状态下的逗号隔开

  • 一般情况下，如果有空格隔开的多个单词组成的字体加引号

  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

  • 最常见的几个字体：body {font-family：‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’;}

    在实际开发里，经常把字体定义给body标签，因为页面中的主要内容都是放在body标签中。

    还可以给body指定好多个字体，在执行的时候，先看浏览器有没有第一个字体，如果有就以这个字体来显示，如果没有，就继续找下一个字体，以此类推

3.2 字体大小

CSS 使用 font-size 属性定义字体大小。

body {
  font-size: 16px;
}
/* 标题标签比较特殊，需要单独指定文字大小 */

  • px （像素）大小是我们网页常用单位

  • 谷歌浏览器默认是 16px，不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

  • 可以给 body 指定整个页面文字大小

    <head>
	<style>
		body {
			font-size: 16px;
        }
		/*标题标签比较特殊，需要单独指定文字大小*/
        h2 {
            font-size: 18px;
        }			
</style>
</head>
<body>
	<h2>pink的秘密</h2>
	<p>那一抹众人中最漂亮的颜色，</p>
	<p>优雅，淡然，又那么心中清澈.</p>
	<p>前端总是伴随着困难和犯错，</p>
	<p>静心，坦然，攻克一个又一个.</p>
	<p>拼死也要克服它，</p>
	<p>这是pink的秘密也是老师最终的嘱托.</p>

3.3 字体粗细

CSS 使用 font-weight 属性设置字体粗细

p {
    /* font-weight: bold; */
    /* 这个700 的后面不需要跟单位 它等价于 bold 都是加粗的效果 */
	font-weight: 700;
}
h2 {
    /* font-weight: normal; */
    font-weight: 400;
}
属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100~900400等同于 normal ，700等同于bold 注意这个数字后面不跟单位
  • 学会让加粗标签（比如 h 和 strong 等）不加粗，或者其他标签加粗
  • 实际开发时，我们更喜欢用数字表示粗细

3.4 文字样式

CSS 使用 font-style 属性设置文本风格。

p { 
    font-style: normal; 
}
属性值描述
normal默认值，显示标准的字体样式
italic斜体

**注意：平常很少给字体加斜体，反而要给斜体标签（em,i）改为不倾斜字体。

<head>
	<style>
        p {
            font-style: italic;
        }
		em {
			/* 让倾斜的字体不倾斜 */
			font-style: normal;
        }
	</style>
</head>
<body>
	<p>上课时候的你</p>
	<em>下课时候的你</em>
</body>

3.5 字体复合属性写法

将各种字体属性写在同一选择器下，节约代码。

body {
  font: font-style font-weight font-size/line-hight font-family;
}
  • 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
  • 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用
<head>
	...
	<style>
	/*想要div文字变倾斜加粗字号设置为16像素并且是微软雅黑*/
		div {
			/* font-style: italic;
			font-weight:700;
			font-size: 16px;
			font-family:'Microsoft yahei'; */
             /* 复合属性：简写的方式 节约代码 */
			/* font:font-style font-weight font-size/line-height font-family; */
			font: italic 700 16px 'Microsoft yahei';

        }
	</style>
</head>
<body>
	<div>三生三世十里桃花，一心一意百行代码</div>
</body>

3.6 字体属性总结

字体属性表示注意
font-size字号单位是 px，一定要跟上
font-family字体按照团队约定来写
font-weight字体粗细记住 不加粗是 400 或 normal，加粗是 700 或 bold，数字不用跟单位
font-style字体样式倾斜为 italic，不倾斜 normal，常用 normal
font属性连写顺序不能变，字体和字号属性必须有

4. CSS 文本属性

CSS Text（文本）属性定义文本外观，比如颜色、对齐、装饰、缩进、行间距等。

4.1 文本颜色

color 属性定义文本颜色。

div {
  color: red;
}
颜色表示属性值
预定义的颜色值red，green，blue，御用色pink
十六进制#FF0000，#FF6600，#29D794
RGB代码rgb(255,0,0)或rgb(100%,0%,0%)

开发中最常用的是十六进制。

4.2 对齐文本

text-align 属性用于设置元素文本内容的水平对齐方式。

div {
  text-align: center;
}
属性值解释
left左对齐（默认值）
right右对齐
center居中对齐

4.3 装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

a {
    text-decoration: none;
}
属性值描述
none默认，无装饰线（最常用）
underline下划线，a 标签自带（常用）
overline上划线。（几乎不用）
line-through删除线。（不常用）

重点记住**如何添加下划线?如何删除下划线？**其余了解即可.

4.4 文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落首行缩进

div {
  text-indent: 5px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p {
    /*  缩进当前元素 2个文字大小的距离 */
	text-indent: 2em;
}

**em**是一个相对单位，就是当前元素（font-size) 1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

4.5 行间距

line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。

p {
    line-height: 26px;
}

行间距=上间距+文本高度+下间距

css行间距

因为文字本身的高度是不会变的，所以 如果把行高改大了，真正改变的是上下两个间距的距离

测量行高的方法：从 第一行文字的最下牙 量到 第二行文字的最下牙

4.6 文本属性总结

属性表示注意
color文本颜色通常用十六进制简写
text-align文本对齐设定文字水平的对齐方式
text-indent文本缩进段落首行缩进2个字的距离 text-indent: 2em;
text-decoration文本装饰记住添加下划线 underline 和去除下划线 none
line-height行高控制行与行之间的距离

5. CSS 引用方式

按照 CSS 书写的位置（或者引入的方式）不同，CSS 样式表可以分为三大类：

  1. 行内样式表（行内式）
  2. 内部样式表（嵌入式）
  3. 外部样式表（链接式）

5.1 内部样式表

将 CSS 代码写在 HTML 页面内部，单独放在一个 <style> 标签中。

<style>
	div {
	color: red;
	font-size: 12px;
    }
</style>
  • <style> 理论上可以放在 HTML 文档中任何一个地方，但一般放在 <head> 标签中。
  • 通过此方式，方便控制整个页面中的元素样式设置。
  • 代码结构清晰，但是并没有实现结构与样式完全分离
  • 也被称为嵌入式引入，练习时使用，实际开发不用

5.2 行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合修改简单样式。

<div style="color: red; font-size: 12px">行内样式表</div>

  • style其实就是标签的属性

  • 在双引号中间，写法要符合CSS规范

  • 可以控制当前的标签设置样式

  • 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用

    <body>
<p>不能忘记你把你写在日记里</p>
<p>不能忘记你心里想的还是你</p>
<p>浪漫的夏季还有浪漫的一个你</p>
<p style="color: pink;">给我一个粉红的回忆</p>
</body>

5.3 外部样式表

实际开发中都是外部样式表，适用于样式比较多的情况。

核心：样式单独写到 CSS 文件中，再将 CSS 文件引入到 HTML 页面中使用。

引入外部样式表分为两步：

1.新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。

2.在HTML页面中，使用标签引入这个文件。

引入格式

<link rel="stylesheet" href="css文件路径" />
属性作用
rel定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
  • 使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式

5.4引入方式总结

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高样式结构混乱较少控制一个标签
内部样式表部分结构和样式分离没有彻底分离较多控制一个页面
外部样式表完全实现结构和样式相分离需要引入最多，吐血推荐控制多个页面

6.Chrome 调试工具

Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSS样式。

1.打开调试工具

打开Chrome 浏览器，按下F12键或者右击页面空白处→检查。

2.使用调试工具

①Ctrl+滚轮可以放大开发者工具代码大小。

②左边是HTML元素结构，右边是CSS样式。

③右边CSS样式可以改动数值（把光标定在数值上【不是选中数值】，按上下箭头改变数值或者直接输入）和查看颜色。

④Ctrl +0复原浏览器大小。

⑤如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。

⑥如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

二、CSS 复合选择器与特性

1. Emmet 语法

1.1快速生成 HTML 结构代码

  1. 生成标签：输入标签名后 按tab键即可， 比如 div 然后按tab键 ----><div></div>

  2. 生成多个相同标签：加上 * 就可以了 ，比如div*3 然后按tab键 ----><div></div><div></div><div></div>

  3. 父子级关系的标签：用 > ，比如ul>li 然后按tab键 ----><ul><li></li></ul>

  4. 兄弟关系的标签：用 +， 比如div+p 然后按tab键 ----><div></div><p></p>

  5. 生成带有类名：. + 类名 +tab键 ，比如 .nav 然后按tab键 ----><div class="nav"></div>

    生成 id名字的： # + id名 +tab键 ，比如 #two 然后按tab键 ----> <div id="two"></div>

    默认生成div的，要生成其他标签，在前面加标签名即可，比如 p.one 然后按tab键 ----><p class="one"></p>

  6. 生成的div类名是有顺序的：用自增符号$，比如

    /* .demo$*5 然后按tab键 */
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

  7. 生成的标签内部写内容：用 { } ，比如 p{ 王一博好帅 } 然后tab键 ----> <p>王一博好帅</p>

    /* div{$}*5 然后tab键 */
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

1.2快速生成 CSS 样式代码

CSS基本采取简写形式即可.

  1. 比如 w200 按tab 可以生成 width:200px;

  2. 比如 Ih26 按tab 可以生成 line-height:26px;

1.3 快速格式化代码

Vscode快速格式化代码：shift+alt+f

2. 复合选择器

由两个或多个基础选择器，通过不同的方式组合而成，可以更准确、更高效的选择目标元素（标签）

  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器

2.1 后代选择器⭐️

后代选择器又称为包含选择器，可以选择父元素里的子元素。

写法：将外层标签写在前面，内层标签写在后面，中间用空格分开。

语法

元素1 元素2 { 样式声明; }

上述语法表示选择元素 1 里面所有的元素 2（后代元素），如

ul li { 样式声明; } /* 选择ul 里面的所有 li标签元素 */
  • 元素1 和元素2 中间用空格隔开
  • 元素1 是父级，元素2 是子级，最终选择的是元素2
  • 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
  • 元素1 和元素2 可以是任意基础选择器
<head>
    <style>
       /* 把ol 里面的小li选出来改为pink */
        ol li {
            color: pink;
        }
        /* 中国 广东 广州 */
        ol li a {
            color: red;
        }
        .nav li a {
            color: yellow;
        }
    </style>
</head>
<body>
    <ol>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">会变化</a></li>
        <li><a href="#">会变化</a></li>
        <li><a href="#">会变化</a></li>
    </ul>
</body>

2.2 子选择器⭐️

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子。

语法

元素1 > 元素2 { 样式声明; }

上述语法表示选择元素1 里面的所有直接后代（子元素）元素2，如：

div>p { 样式声明; } /*选择div 里面所有最近一级 p 标签元素 */
  • 元素之间用大于号 > 隔开
  • 1 为父级。二为子级，最选择的是元素 2
  • 元素 2 必须是亲儿子，其孙子、重孙之类都不归它管
<head>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

2.3 并集选择器⭐️

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号 , 连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法

元素1, 元素2 { 样式声明; }

上述语法表示选择元素1和元素2，如

ul div { 样式声明; } /* 选择ul 和 div元素 */
  • 元素1 和元素2 中间用逗号隔开
  • 逗号可以理解为和 的意思
  • 并集选择器通常用于集体声明
<head>
    <style>
        /* 要求1：把熊大和熊二改为粉色 */
        div,
        p {
            color: pink;
        }
        /* 要求2：把熊大和熊二、小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
        /* 约定的语法规范，并集选择器喜欢竖着写 */
        /* 一定要注意，最后一个选择器 不需要加逗号 */
    </style>
</head>
<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大特点是用冒号 : 表示，比如 :hover、:first-child

伪类选择器种类多，比如链接伪类选择器、结构选择器等。

1.链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/

<head>
    <style>
        /* 1.未访问的链接 a:link 把没有点击过的（访问过的）链接选出来 */
        a:link {
            color: #333
            text-decration: none;
        }
        /* 2.a:visited 选择点击过的（访问过的）链接 */
        a:visited {
            color: orange;
        }
        /* 3.a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }
        /* 4.a:active 选择的是鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">小猪佩奇</a>
</body>

link ：链接 hover ：悬停

注意事项

  1. 确保样式生效，要按照** LVHA **的顺序声明：:link - :visited - :hover - :active
  2. 记忆法：love hate 或者 lv 包包 hao
  3. 因为a 链接在浏览器中有默认样式，所以实际开发中都需要给链接单独指定样式。

开发中实际写法

a {
  color: gray;
  text-decoration: none;
}
a:hover {
  color: #369;
  text-decoration: underline;
}
2. focus 伪类选择器

:focus 伪类选择器用于获取焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

input:focus {
            background-color: pink;
}

<head>
    <style>
        /* 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
3 .其他标准伪类选择器❌
  1. first-child

:first-child 是 CSS 伪类，表示父元素的第一个子元素。

  1. last-child

:last-child CSS 伪类 代表父元素的最后一个子元素。

  1. nth-child(n)
:nth-child(an+b)` 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类 `:nth-child`括号中表达式 `(an+b)` 匹配到的元素集合 `(n=0，1，2，3...)
  1. :not(p)

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

  1. ::after (:after)

CSS 伪元素 ::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

.exciting-text::after {
  content: "<- 让人兴兴兴奋!";
  color: green;
}

我们几乎可以用想要的任何方法给 content 属性里的文字和图片的加上样式.

  1. ::before (:before)

CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。 使用 ::before 伪元素的一个简单示例就是用于加入引号。

HTML

<q>一些引用</q>, 他说, <q>比没有好。</q>.

CSS

q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}

2.5 复合选择器总结

选择器作用特征使用情况隔开符号及用法
后代选择器用来选择后代元素可以是子孙后代较多符号是空格 .nav a
子代选择器选择最近一级元素只能选亲儿子较少符号是大于 .nav>p
并集选择器选择某些相同样式的元素可以用于集体声明较多符号是逗号，.nav, a
链接伪类选择器选择不同状态的链接跟链接相关较多重点记住a{}和a:hover{}
:focus 选择器选择获得光标的表单跟表单相关较少记住input:focus用法

3. 元素显示模式

3.1 什么是元素显示模式

就是元素（标签）以什么方式进行显示，比如

自己占一行，比如一行可以放多个

作用：网页的标签非常多，不同地方会使用不同的标签，了解其特点可以更好布局网页。

HTML 元素分为块元素和行内元素。

3.2 块元素

常见的块元素有 <h1-h6>、<p>、<div>、<ul>、<ol>、<li>等，其中**<div>标签是最典型的块元素**

块级元素的特点：

  1. 独占一行。
<head>
    <style>
        div  {
    		width: 200px;
    		height: 200px;
    		background-color: pink;
		}
    </style>
</head>
<body>
    /* 瑟瑟发抖 另起一行*/
    <div>比较霸道，自己独占一行</div>瑟瑟发抖
</body>
  1. 高度、宽度、外边距以及内边距都可以控制
  2. 宽度默认是容器（父级宽度）的 100%
  3. 是一个容器及盒子，里面可以方行内或块级元素

注意：

  • 文字类的标签内不能放块级元素。
  • 文字类元素有 <p>，<h1-h6>，尤其不能放 <div> 元素。

3.3 行内元素

常见行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，<span>是最典型的行内元素，行内元素也叫内联元素。

行内元素的特点：

  1. 相邻行内元素在一行上，一行可以显示多个。

    <head>
    <style>
        span {
    		width: 100px;
    		height: 100px;
    		background-color: pink;
		}
    </style>
</head>
<body>
    /* 宽度、高度无效 */
    <span>Esther</span> <strong>欣欣子</strong>
    <span>Esther</span> <strong>欣欣子</strong>
</body>

  2. 高、宽直接设置是无效的。

  3. 默认宽度就是它本身内容的宽度。

  4. 行内元素只能容纳文本或其他行内元素。

注意

  • a 链接里面不能再放链接
  • 特殊情况链接 里面可以放块级元素，但是给 转换一下块级模式最安全。

3.4 行内块元素

在行内元素中有几个特殊标签——<img>, <input>、<td>，它们同时具有块元素和行内元素的特点。

有些资料称为行内块元素。

行内块元素的特点：

  1. 和相邻元素（行内块）在一行上，之间存在空白缝隙，一行可以显示多个（行内元素特点）。

  2. 默认宽度是本身内容宽度（行内元素特点）。

  3. 高度、行高、外边距、内边距都可以控制 (块级元素特点）。

    <head>
    <style>
        div  {
    		width: 249px;
    		height: 35px;
		}
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
</body>

3.5 元素显示模式总结

元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或其他行内元素
行内块元素一行放多个行内块元素可以设置宽度高度它本身内容的宽度

3.6 元素模式转换

特殊情况下，需要将一个元素的模式转换为另外一种模式，使其具有另外一种模式的特性。 比如想要增加链接 的触发范围。

行内元素可以转换为块元素，块元素也能转换为行内元素。

行内->块级⭐️

a {
	display: block;
}

<head>
    <style>
        a  {
    		width: 150px;
    		height: 50px;
    		background-color: pink;
    		/* 把行内元素a 转换为块元素，宽度、高度起作用 */
   			 display: block;
		}

    </style>
</head>
<body>
    <a href="#">Esther</a>
</body>

块级->行内

div  {
     display: inline;
}

<head>
    <style>
        div  {
    		width: 300px;
    		height: 100px;
    		background-color: purple;
    		/* 把块元素div 转换为行内元素，两个div变成占同一行，宽度、高度无效  */
   			 display: inline;
		}

    </style>
</head>
<body>
    <div>我是块级元素</div>
	<div>我是块级元素</div>
</body>

行内/块级-> 行内块元素⭐️

<head>
    <style>
        span  {
    		width: 300px;
    		height: 30px;
    		background-color: skyblue;
    		/* 把行内元素span 转换为行块内元素，宽度、高度起效  */
   			 display: inline-block;
		}

    </style>
</head>
<body>
   	<span>行内元素转换为行内块元素</span>
	<span>行内元素转换为行内块元素</span>
</body>

display 可以理解为 转换 的意思，block ：名词为 块 的意思

3.7小米侧边栏案例

<head>
    ...
    <style>
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

​

3.8 一个小技巧——单行文字垂直居中

解决方案：让文字的行高等于盒子的高度

原理分析：行高=上空隙+文字本身高度+下空隙=盒子高度

<head>
    <style>
        div {
            width: 200px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>我要居中</div>
</body>

简单理解：行高的上下空隙把文字挤到中间了，如果是行高小于盒子高度，则文字偏上；如果行高大于盒子高度，文字偏下。

3.9小工具snipaste

Snipaste是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上.常用快捷方式：

  1. F1 可以截图.同时测量大小，设置箭头 书写文字等
  2. F3 在桌面置顶显示
  3. 点击图片，alt可以取色（按下shift可以切换取色模式）
  4. 按下esc取消图片显示

4. CSS 的背景

CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

4.1 背景颜色

background-color 属性定义了元素的背景颜色。

background-color: 颜色值;

一般而言，颜色默认值是 transparent（透明），我们也可以指定背景颜色为透明色或其他色。

4.2 背景图片

background-image 属性描述了元素的背景图像，实际开发用于 logo 或者一些装饰性开发的小图片或者是超大的背景图片，优点是便于控制位置。（精灵图也是一种运用场景）

background-image: none/url(图片url);
参数值作用
none无背景图（默认的）
url使用相对或绝对地址指定背景图像

4.3 背景平铺

若需要在 HTML 页面上对背景图进行平铺，可以使用 background-repeat 属性。

background-repeat: repeat(默认) / no-repeat / repeat-x / repeat-y;
参数值作用
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x横向平铺
repeat-y纵向平铺

页面元素·既可以添加背景图片，也可以添加背景颜色，图片会覆盖颜色。

4.4 背景图片位置

background-position 可以改变图片在背景中的位置。

background-position: x y;

参数 x 和 y 指 x 左边和 y 坐标，可以使用方位名词或者精确定位

参数值说明
length百分数 / 由浮点数字和单位字符组成的长度值
positiontop / center / bottom / left / center / right 方位名词

1.参数是方位名词

  • 若两个值都是方位名词，则两个值前后顺序无关，比如left top和top left 效果一致。
  • 若只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

2.参数是精确单位

  • 若参数是精确坐标，第一个必定是 x 坐标。第二个是 y 坐标
  • 若只指定一个数值，第一个一定是 x 坐标，另一个默认 y 轴垂直居中

3.参数是混合单位

  • 若是混合单位，则第一个值是 x 坐标，第二个值是 y 坐标。
<head>
    /* 案例 */
    <style>
        h3 {
            width: 200px;
            height: 40px;
            /* background-color: pink; */
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(../images/icon.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 4em;
        }
    </style>
</head>
<body>
    <h3>成长守护平台</h3>
</body>

4.5 背景图像固定

background-attachment 属性设置背景图像是否随着页面其余部分滚动。

background-attachment 后期可以制作视差滚动效果。

background-attachment: scroll / fixed;
参数作用
scroll背景图像随着对象内容 滚动
fixed背景图像为 固定的

4.6 背景属性复合写法

为了简化代码，将属性写在同一个属性 background 下(实际开发中提倡的写法）。 一般习惯约定顺序为：

background： 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

background: transparent url(image.jpg) no-repeat fixed top;

4.7 背景颜色半透明

CSS3 提供 background: rgba(r,g,b,a) 属性设置图片透明度。

background: rgba(0, 0, 0, 0.3);
  • 最后一个参数 alpha 是透明度，取值范围在0~1之间
  • 我们习惯把0.3 的 0 省略掉，写为background:rgba(0,0,0, .3);
  • 注意：背景半透明是指盒子背景色半透明，盒子里面的内容不受影响
  • CSS3 新增属性，IE9+版本浏览器才支持，但现在实际开发不太关注兼容性写法，可放心使用

4.8背景总结

属性作用值
background-color背景颜色预定义的颜色值/十六进制/RGB代码
background-image背景图片url(图片路径)
background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
background-position背景位置length/position 分别是x 和y 坐标
background-attachment背景附着scroll(背景滚动) / fixed(背景固定)
背景简写书写更简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明背景颜色半透明background:rgba(0,0,0, .3); 后面必须是4个值

5. CSS 的三大特性

CSS 有三个非常重要的特性：层叠性、继承性、优先级。

5.1 层叠性

相同选择器设置相同的样式，此时一个样式就会**覆盖(层叠）**另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：

  • 样式冲突：遵循的原则是就近原则，哪个样式离结构近*，就执行哪个样式

  • 样式不冲突，不会层叠

    <head>
    <style>
        div {
            color: red;
            font-size: 14px;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    /*  两个color样式，冲突，层叠；一个font-size，不冲突，不层叠 */
    /* 所以样式为：pink色，14像素大小文字 */
    <div>长江后浪推前浪，前浪死在沙滩上</div>
</body>

5.2 继承性

CSS 中子标签会继承父标签的某些样式，如文本颜色和字号。

<head>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>
        /* 继承div的样式 */
        <p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
    </div>
</body>
  • 恰当使用继承可以简化代码，降低 CSS 的复杂性
  • 子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及 color 属性）
行高的继承性
<head>
    <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /* 子元素继承了父元素body 的行高1.5 */
            /* 这个1.5 是当前元素div文字大小font-size 的1.5倍,即14*1.5=21 */
            font-size: 14px;
        }
        p {
            /* 1.5*16=24 当前的行高 */
            font-size: 16px;
        } 
        /* li 没有手动指定文字大小 则会继承父亲的文字大小 body 12px 所有li 文字大小为12px 当li 的行高就是 12 *1.5=18 */
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

body {
	font: 12px/1.5 'Microsoft YaHei';
}
  • 行高可以跟单位也可以不跟
  • 如果子元素没有设置行高，则会继承父元素的行高为 1.5
  • 此时子元素的行高是：当前子元素的文字大小*1.5
  • body 行高 1.5 这样写法最大优势就是里面的子元素可以根据文字大小自动调整行高

5.3 优先级

当一个元素指定多个选择器时，就会有优先级的产生。

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行

选择器权重如下所示。

选择器选择器权重
继承或者*0,0,0,0
元素选择器0,0,0,1
类选择器，伪类选择器0,0,1,0
ID 选择器0,1,0,0
行内样式 style=""1,0,0,0
!important∞ 无穷大
<head>
    <style>
        div {
            color: pink!important;
        }
        .test {
            color: red;
        }
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    /* 文字颜色变化：pink-red-green-purple-pink */
    <div class="test" style="color: purple">你笑起来真好看</div>
</body>

注意

  • 权重是有4组数字组成，但不会有进位

  • 行内style > id > 类、伪类 > 元素 > 继承、*（通配符）

  • 等级从左向右，如果某一位数值相同，则判断下一位

  • 继承的权重为 0，如果该元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是0，即使加了 important 权重也还是 0

    <head>
    <style>
        /* 父亲的权重是100 */
        #father {
            color: red!important
        }
        /* p继承（父亲的red ）的权重为 0 p标签本身的权重为1(>0) */
        /* 所以看标签到底执行哪个样式，就看这个标签有没有直接被选出来 */
        p {
            color: pink;
        }
        body {
            color: red;
        }
        /* a链接浏览器默认制定了一个样式：蓝色的 有下划线 相当于执行了 a {color: blue;} 不会显示继承父亲boby的red的样式（权重为0） */
    </style>
</head>
<body>
    <div id="father">
        /* 执行pink颜色 */
        <p>你还是很好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>

权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重，但是没有进位。

  • div ul li -----> 0,0,0,3
  • .nav ul li -----> 0,0,1,2
  • a:hover -----> 0,0,1,1
  • .nav a -----> 0,0,1,1
<head>
    <style>
        /* 复合选择器会有权重叠加的问题（但永远不会有进位：十个0,0,0,1相加=0,0,0,10） */
        /* li 的权重是 0,0,0,1 */
        li {
            color: red;
        }
        /* ul li 权重 0,0,0,1+0,0,0,1=0,0,0,2 */
        ul li {
            color: green;
        }
        /* .nav li 权重 0,0,1,0+0,0,0,1=0,0,1,1 */
        .nav li {
            color: pink;
        }
    </style>
</head>
<body>
    /* 颜色变化：red-green-pink */
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>

<head>
    <style>
        /* .nav li 权重是11 */
        .nav li {
            color: red;
        }
        /* li继承的.nav li 的权重为0,li本身的权重为1(>0) ,执行pink色*/
        li {
            color: pink;
        }
        /* 需求：把第一个小li 颜色改为 粉色加粗 */
        /* .pink 权重是10  .nav .pink 为 20 成功！ */
        .nav .pink {
            color: pink;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li class="pink">人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
    </ul>
</body>

三、盒子模型

1. 盒子模型

1.1 看透网页本质

网页布局过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子 box
  2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。
  3. 往盒子里装内容。

本质：利用 CSS 摆盒子。

1.2 盒子模型（Box Model）组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：边框、外边距、内边距和实际内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hh3G2DRn-1691916584425)(…/img/yilgJO.gif)]

1.3 边框（border）

border 可以设置元素边框。边框有三部分组成：边框宽度（粗细）边框样式 边框颜色

语法

/*属性可连写*/
border: border-width || border-style || border-color;
属性作用
border-width定义边框粗细，单位是 px
border-style边框样式
border-color边框颜色
<head>
	<style>
		div {
			width: 300px;
			height:200px;
			/* border-width 边框的粗细 一般情况下都用px */
			border-width: 5px;
			/* border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框 */
			border-style: solid;
			/* border-style: dashed; */
			/* border-style: dotted; */
			/* border-color 边框的颜色 */
			border-color: pink;
	</style>
</head>
<body>
    <div></div>
</body>

边框属性简写 (没有顺序)

/*习惯顺序*/
border: 5px solid pink;

边框分开写法

/*注意层叠性*/
border-top: 1px solid red; /*只设定上边框，其余同理*/

<head>
    <style>
	/*请给一个200*200的盒子，设置上边框为红色，其余边框为蓝色*/
	div {
		width: 200px;
		height: 200px;
		/* border-top: 1px solid red;
		border-bottom: 1px solid blue;
		border-left: 1px solid blue;
		border-right: 1px solid blue; */
		/*border包含四条边*/
		border: 1px solid blue;
		/*层叠性 只是层叠了 上边框  左右下没有层叠*/
		border-top: 1px solid red;
</style>
</head>
<body>
	<div></div>
</body>

1.4 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法

border-collapse: collapse;

  • collapse 是合并的意思

  • border-collapse:collapse; 表示将相邻边框合并在一起

1.5 边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此有两种方案解决:

  1. 测量盒子大小的时候，不测边框。
  2. 若测量的时候包含了边框，则需要 width/height 减去 边框宽度（两条边）。
<head>
    <style>
	/*我们需要一个200*200的盒子，但是这个盒子有10像素的红色边框（左右两边）*/
    /* 若直接把 div 的 width 设为200，则div的实际宽度为200+10*2=220 */
        /* 此时实际宽度为 180+10*2刚好=200 */
		div {
			width:180px;
			height: 18px;
			background-color: pink;
             border: 10px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>

1.6 内边距 padding

padding 属性设置内边距，即边框与内容之间的距离。

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距

padding 简写属性 可以有一到四个值 实际开发都会遇到

值得个数表达意思
padding: 5px;1个值，代表上下左右都有5像素内边距；
padding: 5px 10px;2个值，代表上下内边距是5像素 左右内边距是10像素；
padding: 5px 10px 20px;3个值，上5 左右10 下20
padding: 5px 10px 20px 30px;4个值，上5右10下20左30 顺时针
<style>
	div {
		width:200px;
		height:200px;
		background-color: pink;
		/* padding-left:5px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-right:5px; */
		/* 内边距复合写法（简写）*/
		padding: 5px;
	}
</style>
</head>
<body>
	<div>盒子内容是content</div>
</body>

padding 会影响盒子实际大小

当给盒子指定了 padding 值以后，发生了两件事情：

  1. 内容和边框有了距离，增加内边距
  2. padding 值影响了盒子实际大小

也就是说，当盒子已经有了宽度和高度，再指定内边距，会撑大盒子。

要保证盒子和效果图一样大，则让 width/height 减去 多出来的内边距大小（两边之和） 即可。与边框相同。

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小.

<head>
	<style>
		h1 {
            /* 宽度不会变，但是高度会变 200+30*2=260px */
			height: 200px;
			background-color: pink;
			padding: 30px;
             /* 若加上：
             width: 100%;
             则宽度会在原来的基础上加30*2(60)px */
        }
        div {
            width: 300px;
            height: 100px;
            backgroud-color: purple;
        }
        div p {
            /* p标签 虽然有 padding: 30px; 但是div的宽度不变 */
            padding: 30px;
            background-color: skyblue;
            /* 若加上：
             width: 100%;
             则 p标签 的宽度会在原来div的基础上加30*2=60px */
            /* p标签的宽度本身和父亲div的宽度一样宽，所有没必要加上 width 了，加上 padding值 就可以了，就不会超过父亲div的范围了 */
            
        }
	</style>
</head>
<body>
	<h1></h1>
    <div><p></p></div>
</body>

padding应用——新浪微博导航栏

<head>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        .nav a {
            /* a属于行内元素 此时必须要转换成 行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decration: none;
        }
        .nav a:hover {
            background-color:#eee;
            color: #ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>

1.7 box-sizing 属性解决方案❌

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

在设置了一个盒子的 width/height 后，再设置其 border/padding 会影响盒子实际大小。当进行响应式布局时，这个尤其烦人。

box-sizing 属性可以被用来调整这些表现。

  • content-box是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
box-sizing: content-box;

  • border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这 100px 会包含它的 border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

    box-sizing: border-box;

    尺寸计算公式：

    width = border + padding + 内容的宽度

    height = border + padding + 内容的高度

若盒子没有指定 width/height 属性，则此时 padding 不会撑开盒子大小。

1.8 外边距

margin 属性用于设置外边距，即控制盒子与盒子之间的距离。

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
<head>
    <style>
		div {
			width: 200px;
			height:200px;
			background-color: pink;
        }
		/*.one{
			margin-bottom: 20px;
		}*/
		. two {
			margin-top: 20px;
        }
        /* 两者效果相同，就看加在哪个盒子身上，站在不同盒子的角度，加外边距的方式也不同 */
</style>
<body>
	<div class="one">1{/div>
	<div class="two">2</div>
</body>
</head>

margin 简写方式与 padding 一致。

1.9 外边距典型应用

外边距可以让块级盒子 水平居中，但是必须满足两个条件：

  1. 盒子必须指定了宽度（width）

  2. 盒子左右的外边距都设置为 auto

  3. 常见的写法，以下三种都可以：

    margin-left: auto; margin-right auto;

    margin: auto;

    margin: 0 auto;

.header {
  width: 960px;
  margin: 0 auto;
}

<head>
    <style>
		.header {
			width:900px;
			height:200px;
			background-color: pink;
			margin: 0 auto;
        }
    </style>
</head>
<body>
	<div class="header"></div>
</body>

使行内元素或行内块元素水平居中：给其父亲元素添加text-align: center;

text-align: center;

<head>
    <style>
		.header {
			width:900px;
			height:200px;
			background-color: pink;
			margin: 100px auto;
             text-align: center;
        }
		/* 行内元素或行内块元素水平居中给其父亲元素添加 text-align: center; 即可 */
    </style>
</head>
<body>
	<div class="header">
		<span>里面的文字</span>
	</div>
</body>

1.10 外边距合并

1. 相邻元素垂直外边距的合并

当上下相邻块元素（兄弟关系）相遇时，若上面的元素有下外边距margin-bottotm ，下面的元素有上外边距margin-top，则他们之间的垂直间距不是 margin-bottotm 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

css外边距的合并

解决方案：尽量只给一个盒子添加 margin值。

2. 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

css外边距塌陷

<head>
    <style>
		.father {
			width: 400px;
			height: 400px;
			background-color: purple;
			margin-top: 50px;
        }
		.son {
			width: 200px;
			height:200px;
			background-color: pink;
			margin-top: 100px;
        }
</style>
</head>
<body>
	<div class="father">
	<div class="son"></div>
</div>
</body>

解决方案

  1. 为父元素定义上边框
  2. 为父元素定义上内边距
  3. 为父元素添加 overflow:hidden
.father {
	width: 400px;
	height: 400px;
	background-color: purple;
	margin-top: 50px;
	/* border: 1px solid transparent; */
	/* padding: 1px;*/
	overflow: hidden;
}

1.11 清除内外边距

网页元素很多都带有默认内外边距，而且不同浏览器默认的也不一致，因此在布局前，要先清除网页元素的内外边距。

语法

/* 这句话也是我们css 的第一行代码 */
* {
  margin: 0; /*清除外边距*/
  padding: 0; /*清除内边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以设置。

1.12综合案例

css产品结构图

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f5f5f5;
        }
        a {
            color: #333;
            text-decration: none;
        }
		.box {
			width: 298px;
			height: 415px;
			background-color: #fff;
			/*让块级的盒子水平居中对齐*/
         	margin: 100px auto;
		}
        .box img {
			/*图片的宽度和父亲一样宽*/
			width: 100%;
        }
		.review {
			height:70px;
			font-size: 14px;
			/*因为这个段落没有 width 属性 所有 padding 不会撑开盒子的宽度*/
			padding: 0 28px;
             margin-top: 30px;
        }
        .appraise {
			font-size: 12px;
			color: #b0b0b0;
			margin-top: 20px;
			padding:0 28px;
        }
        .info {
			font-size: 14px;
			margin-top: 15px;
             padding: 0 28px;
        }
        .info h4 {
			display: inline-block;
             font-weight: 400;
        }
        .info span {
             color: #ff6700;
        }
        .info em {
            font-style: normal;
            color: #eb4e0;
            margin : 0 6px 0 15px;
        }
</style>
</head>
<body>
	<div class="box">
		<img src="images/img.jpg" alt="">
		<p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
         <div class="appraise">来自于117384232的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
	</div>
</body>

案例2：快报模块

新知识点：去掉li前面的项目符号（小圆点）

语法：

list-style: none;

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        } 
        li {
            /* 去掉li前面的小圆点 */
            list-style: none;
        }
        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
            
        }
        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;
        }
        .box ul li a:hover {
            text-decration: underline;
        }
        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }
        .box ul {
            margin-top: 7px;
            
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>

1.3总结

1.布局为啥用不同盒子，我只想用div?标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p

2.为啥用辣么多类名?类名就是给每个盒子起了一个名字,可以更好的找到这个盒子，选取盒子更容易，后期维护也方便。

3.到底用margin还是padding?大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现

4.自己做没有思路？布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格。

最后同学们一定多运用辅助工具，比如屏幕画笔，ps等等

2. PS 基本操作

  • 文件->打开：打开测量的图片
  • Ctrl+R ：打开标尺，或者视图->标尺
  • 鼠标拖动标尺可将标尺移动到PS图片上
  • 右击标尺，将单位改为像素
  • **Ctrl+加号（+）**放大视图，**Ctrl+减号（-）**缩小视图
  • 按住空格键，鼠标可以拖动PS视图
  • 用选区拖动，可以测量大小
  • Ctrl+D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

3. 圆角边框

CSS3 新增了 圆角边框 属性，盒子可以变成圆角。

border-radius 属性用于设置元素的外边框圆角。

语法

border-radius: length;

radius ：圆的半径

原理：（椭）圆与边框的交集形成的圆角效果。

  • 参数值可以为数值或百分比的形式

  • 若是正方形，想要设置一个圆，则将数值修改为高度或者宽度的一半即可，或者直接写为 50%

  • 若是矩形，设置为 height 的一半就可以做

  • 该属性是简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

  • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

    <head>
    <style>
        .yuanxing {
			width: 200px;
			height: 200px;
			background-color: pink;
			/* border-radius: 100px; */
			/* 50%就是宽度和高度的一半 等价于100px 还可以省去计算 */
			border-radius: 50%;
        }
		.juxing {
			width: 300px;
			height: 100px;
			background-color: pink;
			/*圆角矩形设置为高度的一半*/
			border-radius: 50px;
        }
        .radius {
			width: 200px;
			height:200px;
			border-radius: 10px 20px 30px 40px;
            /* 如果跟两个值，就是对角线的关系 */
            /* border-rudius: 10px 40px */
            background-color: pink;
        }
    </style>
</head>
<body>
    1.圆形的做法：
	<div class="yuanxing"></div>
	2.圆角矩形的做法：
	<div class="juxing"></div>
	3.可以设置不同的圆角：
	<div class="radius"></div>

</body>

4. 盒子阴影

CSS3 新增了盒子阴影，可以使用 box-shadow 属性为盒子添加阴影。

语法

box-shadow: h-shadow v-shadow blur spread color inset;
值描述
h-shadow必需，水平阴影的位置，允许负值
v-shadow必需，垂直阴影的位置，允许负值
blur可选，模糊距离(影子是虚的还是实的)
spread可选，阴影的尺寸(影子的大小)
color可选，阴影的颜色
inset可选，将外部阴影（outset）改为内部阴影（默认是外部阴影）
<head>
    <style>
        div {
			width:200px;
			height:200px;
			background-color: pink;
			margin: 100px auto;
        }
        div:hover {
            box-shadow: 10px 10px -4px 10px rgba(0,0,0, .3);
        }
        /*原先盒子没有影子，当我们鼠标经过盒子就添加阴影效果*/
    </style>
</head>

注意：

  1. 默认是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效
  2. 盒子阴影不占空间，不会影响其他盒子排列

5. 文字阴影

CSS3 中，使用 text-shadow 属性设置文本阴影。

语法

text-shadow: h-shadow v-shadow blur color;
值描述
h-shadow必需，水平阴影位置。允许负值。
v-shadow必须，垂直阴影。允许负值。
blur可选，模糊距离。
color可选，阴影颜色。参阅CSS颜色值
<head>
    <style>
        div {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0,0,0, .3);
        }
    </style>
</head>
<body>
    <div>
        你是阴影，我是火影
    </div>
</body>

四、CSS 浮动

1. 浮动（float）

1.1 传统网页布局方式

网页布局的本质——用 CSS 来摆放盒子，把盒子放到相应位置。

CSS 提供了三种传统布局方式(简单来说，就是盒子如何进行排列顺序)：

  • 普通流(标准流)
  • 浮动
  • 定位

1.2 标准流（普通流/文档流）

所谓的标准流，就是标签按照规定好的默认方式排列

  1. 块级元素会独占一行，从上到下顺序排列 常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table
  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 常用元素：span、a、i、em

标准流是最基本的布局方式

以上三种方式都是来摆放盒子的，盒子摆到合适位置，布局自然就完成了。

实际开发中，一个页面基本包含三种布局方式(后面移动端学习新的布局方式)

1.3 为什么需要浮动？

很多布局效果，标准流没办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认排列方式。

浮动最典型应用：让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

网页布局第二准则：先设置盒子大小，再设置盒子位置。

1.4 什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。

语法

选择器 { float: 属性值; }
属性值描述
none元素不浮动
left元素向左浮动
right元素向右浮动
<head>
    <style>
		.left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>

1.5 浮动特性⭐️

加了浮动之后的元素，会具有很多特性

  1. 浮动元素会脱离标准流（脱标）
  2. 浮动元素会一行内显示并且元素顶部对齐
  3. 浮动的元素会具有行内块元素的特性

重要特性

  1. 脱离文档流的控制（浮）移动到指定位置（动），（俗称脱标） 脱离文档流的盒子，会漂浮在文档流的盒子上面，不再占用原先的位置

    <head>
    <style>
        .box1 {
			float: left;
			width:200px;
			height:200px;
			background-color: pink;
        }
		.box2{
			width: 300px;
			height:300px;
        	 background-color: rgb(0, 153, 255);
        }
    </style>
</head>
<body>
	<div class="box1">浮动的盒子</div>
	<div class="box2">标准流的盒子</div>
</body>

  2. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。 浮动的元素是相互贴在一起的（没有间隙），若父级宽度放不下盒子，多出的盒子会另起一行对齐。

    <head>
    <style>
        div {
			float: left;
			width: 200px;
			height:200px;
			background-color: pink;
        }
		.two {
			background-color: purple;
             height: 249px;
        }
		.four {
			background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>1</div>
	<div class="two">2</div>
	<div>3</div>
	<div class="four">4</div>
</body>

  3. 浮动元素具有行内块元素特性。 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。如果行内元素有了浮动，则不需要转换成块级元素 / 行内块元素就可以直接给高度和宽度

    • 若块级元素没有设置宽度，则默认和父级一样宽，但添加浮动后，它的大小根据内容来决定
    • 浮动盒子中间无间隙，紧挨着
    • 行内元素同理
    <head>
    <style>
        span,
	    div {
			float: left;
			width: 200px;
			height: 100px;
			background-color: pink;
        }
    </style>
</head>
<body>
	<span>1</span>
	<span>2</span>
	<div>div</div>
    <p>ppppp</p>
</body>

1.6 浮动元素经常和标准流父级元素搭配使用

为了约束浮动元素位置，一般采取：

先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

1.7小米布局案例

<head>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: purple;
        }
        .right {
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"><div class="left"></div>
    <div class="right"></div></div>
</body>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 1226px;
            height:285px;
            background-color: pink;
            margin: 0 auto;
        }
        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }
        /*这里必须写，box.Last 要注意权重的问题
20*/
        .box .last {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

网页布局第二准则：先设置盒子大小，之后设置盒子的位置.

<head>
    ...
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;

        }
        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }
        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px; 
        }
    </style>
</head>
<body>
    <div class="box"><div class="left">左青龙</div>
    <div class="right">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div></div></div>
    
</body>

2. 常见网页布局

css常见的网页布局1

css常见的网页布局2

<head>
    ...
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .top {
            height: 50px;
            background-color: gray;
        }
        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }
        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: pink;
        }
        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }
        .box .last {
            margin-right: 0;
        }
        /* 只要是通栏的盒子（和浏览器一样宽） 不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

浮动布局注意点：

  1. 浮动和标准流的父盒子搭配

    先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

  2. 一个元素浮动了，理论上其余兄弟元素也要浮动

    一个盒子里有多个盒子，其中一个盒子浮动，其他兄弟也应该浮动，防止引起问题

    浮动的盒子只会影响浮动盒子后面的标准流，不会引起前面的标准流

    <head>
    <style>
        /*如果一个子元素浮动了，尽量其他盒子也浮动,这样保证这些子元素一行显示
*/
        .box {
            width: 900px;
            height:300px;
            background-color:pink;
            margin: 0 auto;
        }
        .damao {
            width: 200px;
            height: 200px;
            background-color:purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height:150px;
            background-color:red;
        }
        .sanmao {
            width:300px;
            height:240px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛 标准流 自己独占一行</div>
        <div class="ermao">二毛 浮动 不再占用原来的位置</div>
        <div class="sanmao">三毛 没有浮动 站到第二个盒子的上面去了</div>
    </div>        
</body>

3. 清除浮动

3.1 为什么需要清除浮动

由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子，对后面元素排版产生影响

css盒子浮动的影响

3.2 清除浮动的本质

  • 清除浮动的本质是清除浮动元素造成的影响
  • 如果父盒子本身具有高度，则不需要清除浮动
  • 清除浮动之后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

3.3 清除浮动

语法：

选择器: {
  clear: 属性值;
}
属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动

实际工作中，只用clear:both;

清除浮动策略：闭合浮动

方法：

  1. 额外标签法（隔墙法），是 W3C 推荐的方法
  2. 父级添加 overflow 属性
  3. 父级添加 after 伪元素
  4. 父级添加双伪元素

3.4 清除浮动（1）——额外标签法

也成为隔墙法，是 W3C 推荐的方法。

额外标签法是在最后一个浮动元素末尾添加一个 空块级元素，给其赋以属性 clear:both;。

<head>
	<style>
    	.box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color:purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
        .clear {
            clear: both;
        }
	</style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛 </div>
        <div class="ermao">二毛 </div>
        <div class="ermao">二毛 </div>
        <div class="ermao">二毛 </div>
        <div class="ermao">二毛 </div>
        <!-- 这个新增的盒子要求必须是块级元素 不能是行内元素 -->
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>
  • 优点：通俗易懂，书写方便
  • 缺点：添加许多无意义的标签，结构化较差

总结

  1. 清除浮动的本质

    清除浮动的本质是清除浮动元素脱离标准流造成的影响

  2. 清除浮动的策略

    闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

  3. 使用场景

    实际开发中可能会遇到，但是不常用。

3.5 清除浮动（2）——父级添加 overflow

可以给父级添加 overflow 属性，将其属性设置为 hidden、auto或scroll。

注意是给父元素添加代码：

  • 优点：代码简洁
  • 缺点：无法显示溢出部分
<head>
    <style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color:purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛 </div>
        <div class="ermao">二毛 </div>
    </div>
    <div class="footer"></div>        
</body>

3.6 清除浮动（3）——:after 伪元素法

::after方式是额外标签法的升级版。也是给父元素添加

.clearfix::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /*IE6、7专有*/
  *zoom: 1;
}
  • 优点：没有增加标签，结构更简单
  • 缺点：照顾低版本浏览器
  • 代表网站：百度、淘宝网、网易等
<head>
    <style>
        .clearfix::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /*IE6、7专有*/
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix" >
        <div class="damao">大毛 </div>
        <div class="ermao">二毛 </div>
    </div>
    <div class="footer"></div>
</body>

3.7 清除浮动（4）——双伪元素法

也是给父元素添加

语法

.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
  • 优点：代码更简洁
  • 缺点：照顾低版本浏览器
  • 代表网站：小米、腾讯等
<head>
    <style>
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛 </div>
        <div class="ermao">二毛 </div>
    </div>
    <div class="footer"></div>
</body>

3.8 清除浮动总结

为什么需要清除浮动？

  1. 父级没高度
  2. 子盒子浮动了
  3. 影响下面布局了，就应该清除浮动。
清除浮动的方式优点缺点
额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构化较差
父级overflow:hidden;书写简单溢出隐藏
父级after伪元素结构语义化正确由于IE6-7不支持：after,兼容性问题
父级双伪元素结构语义化正确由于IE6-7不支持：after,兼容性问题

4. PS 切图

4.1 常见的图片格式

  1. jpg图像格式：JPEG（JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用到 jpg 格式的
  2. gif 图像格式，GIF 格式最多只能存储 256 色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际上经常用于一些图片小动画效果
  3. png 图像格式是一种新兴的网络图形格式，结合了 GIF 和 JPEG 的特点，具有存储形式的特点，能够保存透明背景。如果想要切成背景透明的图片，请选择 png 格式
  4. PSD 图像格式是 Photoshop 的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点是我们可以直接从上面复制文字，获得图片，还可以测量大小和距离

4.2 图层切图

最简单的切图方式：鼠标点击移动工具->右击图层->快速导出为 PNG。

4.3 合并图层

但是很多情况下，需要合并图层再导出：

  1. 按住 shift 选中需要合并的图层：图层菜单->合并图层（Ctrl+E）
  2. 右击->快速导出为 PNG

最好的方法是：与美工设计沟通。

4.4 切片切图

  1. 利用切片工具手动划出切片范围

    若要切出透明 logo.png，则需要将图层下拉至最下面，然后点击小眼睛使背景消失。

  2. 文件菜单->导出->存储为 web 设备所用格式->选择我们要的图片格式->存储。

4.5 PS Cutterman 插件切图

Cutterman 是一款在 PS 中的插件，能够自动将你需要的图层进行输出，以替代传统的手动“导出为 web 所用格式”以及使用切片工具进行挨个切图的繁琐流程。

5. 学成在线案例

5.1 准备素材和工具

5.2 结构与样式分离

5.3 CSS 属性书写顺序⭐️

  1. 布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
  2. 自身属性：width/height/ margin/ padding /border/ background
  3. 文本属性：color/ font / text-decoration/ text-align/ vertical-align/ white- space / break-word
  4. 其他属性(CSS3) : content /cursor / border-radius/ box-shadow / text-shadow/ background:inear-gradient…
.jdc {
	display: block;
	position: relative;
	float: left;
	width: 100px;
	height:100px;
	margin: 0 10px;
	padding: 20px 0;
	font-family: Arial, 'Helvetica Neue', 	Helvetica, sans-serif;
	color:#333;
	background: rgba (0,0,0,.5) ;
	border-radius: 10px;
}

5.4页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

  1. 必须确定页面的版心（可视区），我们测量可得知。
  2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
  3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置.页面布局第二准则
  4. 制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要
  5. 所以，先理清楚布局结构，再写代码尤为重要，这需要我们多写多积累

5.5头部制作

头部制作

  • 1号是版心盒子header 1200*42 的盒子水平居中对齐，上下给一个 margin 值就可以
  • 版心盒子里面包含2号盒子 logo
  • 版心盒子里面包含3号盒子 nav 导航栏
  • 版心盒子里面包含4号盒子 search 搜索框（包含2个表单：input 文本框、button 按钮）
  • 版心盒子里面包含5号盒子 user 个人信息
  • 注意：要求里面的4个盒子必须都是浮动

1.定版心

这个页面的版心是1200像素，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {
    width: 1200px;
    margin: auto;
}

2.导航栏注意点：

实际开发中，不会直接用链接 a 而是用 li 包含链接（li+a）的做法。

  1. li+a 语义更清晰，一看就是有条理的列表型内容。
  2. 如果直接用 a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。
  3. 让导航栏一行显示，给 li 加浮动，因为 li 是块级元素，需要一行显示。
  4. 这个 nav 导航栏可以不给宽度，将来可以继续添加其余文字。
  5. 因为导航栏里面文字不一样多，所以最好给链接 a 左右 padding 撑开盒子，而不是指定宽度。
  6. 浮动的盒子不会有外边距合并的问题.

5.7banner制作

banner制作

  • 1号盒子是通栏的大盒子 banner，不给宽度，给高度，给一个蓝色背景
  • 2号盒子是版心，要水平居中对齐
  • 3号盒子版心内，左对齐 subnav 侧导航栏
  • 4号盒子版心内，右对齐 course 课程

5.8精品推荐小模块

小模块制作

  • 大盒子水平居中 goods 精品，注意此处有个盒子阴影
  • 1号盒子是标题 H3 左侧浮动
  • 2号盒子里面放链接左侧浮动，goods-item 距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
  • 3号盒子右浮动 mod 修改

5.9精品推荐大模块

大模块制作

  • 1号盒子为最大的盒子，box 版心水平居中对齐
  • 2号盒子为上面部分，box-hd-- 里面左侧标题H3左浮动，右侧链接a右浮动
  • 3号盒子为底下部分，box-bd-- 里面是无序列表，有10个小li组成
  • 小li外边距的问题，这里有个小技巧：给 box-hd 宽度为1215就可以一行装开5个 li

5.10底部模块

底部制作

  • 1号盒子是通栏大盒子，底部 footer 给高度，底色是白色
  • 2号盒子版心水平居中
  • 3号盒子版权 copyright 左对齐
  • 4号盒子链接组 links 右对齐

五、定位

1. 为什么需要定位

一些固定盒子的效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：

  1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
  2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

2. 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

2.1 定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

2.2 边偏移

边偏移就是定位的盒子移动到最终位置。有 top， bottom， left 和 right 4 个属性

边偏移属性示例描述
toptop:80px顶端偏移量，定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离
leftleft： 80px左侧偏移量，定义元素相对于其父元素左边线的距离
rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距离

3. 静态定位 static (了解)

静态定位是元素的默认定位方式，无定位的意思。语法：

选择器 {
    position: static;
}

静态定位按照标准流特性摆放位置，它没有边偏移，在布局时很少用到。

4. 相对定位 relative⭐️

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

语法：

选择器 {
    position: relative;
}

**相对定位的特点：（务必记住）**自恋且霸道

  1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）

  2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它.（不脱标，继续保留原来位置)

    因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的

    <head>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

5. 绝对定位 absolute⭐️

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

语法：

选择器 {
    position: absolute;
}

绝对定位的特点： （务必记住）

  1. 如果 没有祖先元素 或者 祖先元素没有定位，则以 浏览器 为准定位（ Document 文档）。

    <head>
    <style>
        /* 没有父亲，定位以浏览器为标准 */
        .son {
            position: absolute;
            /* top: 10px; 
            left: 10px; */
            top: 100px;
            right: 200px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="son"></div>  
</body>

    <head>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        /* 有父亲，但父亲没有定位，还是以浏览器为标准 */
        .son {
            position: absolute;
            /* top: 10px; 
            left: 10px; */
            /* top: 100px; 
            right: 200px; */
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div> 
</body>

  2. 如果祖先元素有定位（相对、绝对、固定定位） ，则以最近一级的有定位祖先元素为参考点移动位置。

    <head>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        /* 父亲有了定位，以父亲为参考点移动 */
        .son {
            position: absolute;
            left: 30px;
            bottom: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div> 
</body>

    <head>
    <style>
        .grandfather {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: hotpink;
            padding: 50px;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        /* 爸爸没有定位，但爷爷有，所以 以爷爷为标准移动 */
        .son {
            position: absolute;
            left: 30px;
            bottom: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* 如果爸爸有定位，爷爷也有定位，则以爸爸为标准，因为爸爸是最近的一级 */
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div> 
    </div>   
</body>

  3. 绝对定位不再占有原先的位置。（脱标）拼爹的人都阔气

6. 子绝父相的由来

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位

  • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，就不会影响其他的兄弟盒子。

  • 父盒子需要加定位限制 子盒子 在 父盒子 内显示，不然父盒子没有定位，子盒子将以浏览器或其他为标准移动。

  • 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

    这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。 总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

    当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

案例：学成在线-hot new 模块添加

7. 固定定位 fixed⭐️

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器 {
    position: fixed;
}

固定定位的特点： （务必记住）

  1. 以浏览器的可视窗口为参照点移动元素。

    • 跟父元素没有任何关系
    • 不随滚动条滚动

  2. 固定定位不占有原先的位置。

    固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

<head>
    <style>
       .icon {
            position: fixed;
            top: 100px;
            left: 30px;
       }
    </style>
</head>
<body>
    <div class="icon">
        <img src="../images/icon.png" alt="">
    </div>
    <p>我是你大爷</p>
    <p>我是你大爷</p>
    <p>我是你大爷</p>
    ...
    /* 此处省略100句 */
</body>

固定定位小技巧：固定在版心右侧位置。

  1. 让固定定位的盒子 left： 50%，走到浏览器可视区（也可以看做版心）的一半位置。
  2. 让固定定位的盒子 margin-left：板心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对弃了
<head>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            /* 1.走浏览器宽度的一半 */
            left: 50%;
            /* 2.利用margin 走版心盒子宽度的一半距离 */
            margin-left: 400px;
            /* 不想紧贴可以加多几像素 
            margin-left: 405px; */
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>

8. 粘性定位 sticky (了解)

粘性定位可以被认为是相对定位和固定定位的混合。

Sticky: 粘性的

语法：

选择器 {
  position: sticky;
  top: 10px;
}

粘性定位的特点：

  1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）

  2. 粘性定位占有原先的位置（相对定位特点）

  3. 必须添加 top， left， right， bottom 其中一个才有效.

    跟页面滚动搭配使用。兼容性较差， IE 不支持。

<head>
    <style>
       body {
        height: 3000px;
       }
       .nav {
        /* 粘性定位 */
        position: sticky;
        /* 当我们往下滚动到 导航栏离页面顶部为 0px 时，再向下滚动导航栏则变为了固定定位(此前导航栏随滚动条滚动而滚动) */
        top: 0;
        width: 800px;
        height: 50px;
        background-color: pink;
        /* 导航栏离顶部有100px */
        margin: 100px auto;
       }
    </style>
</head>
<body>
    <div class="nav">我是导航栏</div>
</body>

9.定位总结

定位模式是否脱标移动位置是否常用
static静态定位否不能使用边偏移很少
relative相对定位否（占有位置）相对于自身移动位置常用
absolute绝对定位是（不占有位置）带有定位的父级常用
fixed固定定位是（不占有位置）浏览器可视区常用
sticky粘性定位否（占有位置）浏览器可视区当前阶段很少
  1. 一定记住相对定位、固定定位、绝对定位两个大的特点：1.是否占有位置（脱标否）2.以谁为基准点移动位置。
  2. 学习定位重点学会子绝父相。

10. 定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序（z 轴）

语法：

选择器 {
    z-index: 1;
}
  • 数值可以是正整数、负整数或 0，默认是 auto ，数值越大，盒子越靠上
  • 如果属性值相同，则按照书写顺序，后来居上
  • 数字后面不能加单位
  • 只有定位的盒子才有 z-index 属性
<head>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .xiongda {
            background-color: red;
            /* 熊二和光头强的默认为auto，熊大的为 1，最大，压住它们 */
            z-index: 1;
        }
        .xionger {
            background-color: green;
            left: 50px;
            top: 50px;
        }
        .qiangge {
            background-color: blue;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div class="box xiongda">熊大</div>
    <div class="box xionger">熊二</div>
    <div class="box qiangge">光头强</div>
</body>

11. 定位的拓展

1 .绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin：0 auto; 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

① left: 50% ：让盒子的左侧移动到父级元素的水平中心位置。

② margin-left：-100px; ：让盒子向左移动自身宽度的一半。

<head>
    <style>
        .box {
            position: absolute;
            /* 水平居中 1.left 走 50% 父容器宽度的一半 */
            left: 50%;
            /* 2.margin-left 负值 往左边走 自己盒子宽度的一半 */
            margin-left: -100px;
            /* 垂直居中 1.top 走 50% 父容器宽度的一半 */
            top: 50%;
            /* 2.margin-top 负值 往左边走 自己盒子宽度的一半 */
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 加了绝对定位的盒子不能通过 margin：0 auto; 水平居中 */
            /* margin: auto; */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

2 .定位特殊特性

绝对定位和固定定位也和浮动类似。

  1. 行内元素添加绝对或者固定定位，可以直接设置高度和完度。

    <head>
    <style>
        span {
            position: absolute;
            width: 200px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <span>123</span>
</body>

  2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

    <head>
    <style>
        div {
            position: absolute;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    /* 已经脱离标准流 div的宽度不再是100% */
    <div>abcd</div>
</body>

3 .脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素（已经脱离了标准流）都不会触发外边距合并的问题。

4. 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

<head>
    <style>
        .box {
            /* 浮动元素不会压住下面标准流的文字 */
            float: left;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
   <div class="box"></div>
   <p>阁下何不同风起，扶摇直上九万里</p>
</body>

浮动不会压住盒子

但是绝对定位（固定定位）会压住下面标准流所有的内容

<head>
    <style>
        .box {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
   <div class="box"></div>
   <p>阁下何不同风起，扶摇直上九万里</p>
</body>

绝对定位会压住盒子

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

12.综合案例

淘宝焦点图

淘宝焦点图

  1. 大盒子我们类名为：tb-promo 淘宝广告
  2. 里面先放一张图片。
  3. 左右两个按钮用链接就好了。左箭头prev 右箭头 next
  4. 底侧小圆点ul继续做。类名为promo-nav
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .tb-promo {
            position: relative;
            width: 846px;
            height: 472px;
            background-color: pink;
            margin: 100px auto;
        }
        .tb-promo img {
            width: 846px;
            height: 472px;
        }
        /* 并集选择器可以集体声明相同的样式 */
        .prev,
        .next {
            /* 子绝父相 */
            position: absolute;
            /* 绝对定位的盒子垂直居中 */
            top: 50%;
            margin-top: -15px;
            /* 加了绝对定位的盒子可以直接设置高度和宽度 */
            width: 20px;
            height: 30px;
            background: rgba(0,0,0,.3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;
        }
        .prev {
            left: 0;
            /* border-radius: 15px; */
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        .next {
            /* 如果一个盒子既有left属性也有right属性，则默认会执行left属性 同理 top 和bottom 会执行top */
            right: 0;
            /* border-radius: 15px; */
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }
        .promo-nav {
            position: absolute;
            bottom: 15px;
            /* 绝对定位的盒子水平居中 */
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background: rgba(255,255,255,.3);
            /* 圆角矩形：高度的一半 */
            border-radius: 7px;
        }
        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            /* 正方形变圆形：*/
            border-radius: 50%;
            /* 50%就是宽度和高度的一半 */
            margin: 3px;
        }
        /* 不要忘记选择器权重的问题 */
        .promo-nav .seleted {
            background-color: #ff5000;
        }
    </style>
</head>
<body>
   <div class="tb-promo">
    <img src="../images/tb.jpg" alt="">
    <!-- 左侧按钮箭头 -->
    <a href="#" class="prev">&lt;</a>
     <!-- 右侧按钮箭头 -->
     <a href="#" class="next">&gt;</a>
     <!-- 小圆点 -->
     <ul class="promo-nav">
        <li class="seleted"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
     </ul>
   </div>
</body>

13. 网页布局总结

通过盒子模型, 清楚知道大部分 html 标签是一个盒子。 通过 CSS 浮动、定位可以让每个盒子排列成为网页。 一个完整的网页, 是标准流、浮动、定位一起完成布局的, 每个都有自己的专门用法。

  1. 标准流 可以让盒子上下排列或者左右排列, 垂直的块级盒子显示就用标准流布局
  2. 浮动 可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
  3. 定位 定位最大的特点是有层叠的概念, 就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局

14. 元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

1 .display 属性⭐️

display 属性用于设置一个元素应如何显示。

  • display：none; 隐藏对象
  • display：block; 除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素（并没有删除）后，不再占有原来的位置。

<head>
    <style>
        .peppa {
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .george {
            width: 200px;
            height: 200px;
            background-color: skyblue;          
        }
    </style>
</head>
<body>
   <div class="peppa">佩奇</div>
   <div class="george">乔治</div>
</body>

后面应用及其广泛，搭配 JS 可以做很多的网页特效。

2. visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

  • visibility : visible; 元素可视
  • visibility : hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置

<head>
    <style>
        .peppa {
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .george {
            width: 200px;
            height: 200px;
            background-color: skyblue;          
        }
    </style>
</head>
<body>
   <div class="peppa">佩奇</div>
   <div class="george">乔治</div>
</body>

如果隐藏元素想要原来位置，就用 visibility：hidden

如果隐藏元素不想要原来位置，就用 display：none （用处更多重点）

3. overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

<head>
    <style>
        .peppa {
            /* 默认溢出的文字显示，加不加这句都无所谓 
            overflow: visible; */
            /* 溢出部分被隐藏，并没有被删除
            overflow: hidden; */
            /* 溢出部分显示滚动条 不溢出也显示滚动条格
            overflow: scroll; */
            /* 需要时添加滚动条：文字超出盒子大小时，加滚动条，不超出时不加 */
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>
</head>
<body>
   <div class="peppa">
    《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
Pig》，是由英国人阿斯特利（Astley）、贝克（Baker)、戴维斯（Davis)创作、导演和制作的一部
英国学前电视动画片，也是历年来最具潜力的学前儿童品牌。故事围绕小猪佩奇与家人的愉快经历，幽默
而有趣，藉此宣扬传统家庭观念与友情，鼓励小朋友们体验生活。
    </div>
</body>
属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容
scroll超出的部分隐藏掉,不管超出内容否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow: hidden; 因为它会隐藏多余的部分。

4.总结

  1. display 显示隐藏元素，但是不保留位置
  2. visibility 显示隐藏元素，但是保留原来的位置
  3. overflow 溢出显示隐藏，但是只是对于溢出的部分处理

5.案例（仿土豆网显示隐藏遮罩）

<head>
    <style>
       .Esther {
        position: relative;
            width: 480px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
       }
       .Esther img {
        width: 100%;
        height: 100%;
       }
       .mask {
        /* 隐藏遮罩层 */
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.4) url(../images/arr.png) no-repeat center;
       }
       /* 当我们鼠标经过了 Esther 这个盒子，就让里面的遮罩层显示出来 */
       .Esther:hover .mask {
        /* 不是转换成块级元素，而是显示元素 */
        display: block;
       }
    </style>
</head>
<body>
   <div class="Esther">
        <div class="mask"></div>
        <img src="../images/Esther2.webp" alt="">
   </div>    
</body>

六、CSS 高级

1.1 为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites. CSS 雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

1.2 精灵图的使用（原理）

使用精灵图核心：

  1. 精灵图主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
  2. 这个大图片也称为sprites 精灵图 或者 雪碧图
  3. 移动背景图片位置，此时可以使用 background-position
  4. 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
  5. 因为一般情况下都是往上往左移动，所以数值是负值
  6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

总结：

  1. 精灵图主要针对于小的背景图片使用。
  2. 主要借助于背景位置来实现— background-position
  3. 一般情况下精灵图都是负值。（千万注意网页中的坐标： x 轴右边走是正值，左边走是负值， y 轴同理。）

1.3精灵图的使用（代码）

<head>
    <style>
       .box1 {
        width: 60px;
        height: 60px;   
        margin: 100px auto;
        background: url(../images/sprites.png) no-repeat -182px 0;
       }
       .box2 {
        width: 27px;
        height: 25px;
        margin: 200px;
        background: url(../images/sprites.png) no-repeat -155px -106px;
       }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

2.1 字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标

精灵图是有诸多优点的，但是缺点很明显。

  1. 图片文件还是比较大的。
  2. 图片本身放大和缩小会失真。
  3. 一旦图片制作完毕想要更换非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont 。字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2.2 字体图标的优点

  • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
  • 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
  • 兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

  1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
  2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

2.3 字体图标的下载

推荐下载网站：

icomoon 字库 http://icomoon.io

IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

阿里 iconfont 字库 http://www.iconfont.cn

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 Al 制作图标上传生成。重点是，免费！

2.4 IconMoon 字体图标使用方法

  1. 选择字体并下载(下载文件名默认为icomoon，里面包含demo-files、fonts、demo.html、Read Me.txt、selection.json、style.css等文件)

  2. 将下载文件中的 fonts 文件夹复制到项目根目录下

  3. 在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。一定注意字体文件路径的问题。

    （将style.css中的字体声明的代码复制到html页面中）

    <style>
    /* 字体声明 */
    @font-face {
		font-family:'icomoon';
		src: url('fonts/icomoon.eot?7kkyc2');
		src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
			url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
			url('fonts/icomoon.woff?7kkyc2') format('woff'),
			url('fonts/icomoon.svg?7kkyc2#icomoon')format('svg');
		font-weight: normal;
		font-style: normal;
    }
</style>

  4. 打开 demo.html，复制页面中需要的字体图标的方框图标到 span中间

  5. 给 span 声明字体：

    span {
  font-family: "icomoon";
}

  6. 还可以给 spa 指定 font-size: 100px; color: pink;等字体/文本属性

如何更新/添加字体图标？

把压缩包里面的 selection.json 从新上传（点击 Import Icons 【导入新图标】 导入json 文件），然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

**字体图标加载原理：**与精灵图相同，浏览器发送请求到服务器，服务器接收请求，返回请求页面给浏览器

3. CSS 三角

把盒子的 宽度width 和 高度height 都设置为0

<head>
    <style>
        .box1 {
            width: 0;
            height: 0;
            border-top: 10px solid pink;
            border-right: 10px solid skyblue;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }
        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top-color: pink;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

案例：京东三角

<head>
    <style>
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        .jd span {
            position: absolute;
            right: 15px;
            /* border-top: 5px; + border-bottom: 5px; */
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: red;           
        }
    </style>
</head>
<body>
    <div class="jd"></div>
</body>

4. CSS 用户界面样式

4.1 鼠标样式 cursor

li {
    cursor: default | pointer | move | text | not-allowed; 
}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor [ˈkɜːrsər] n.光标

属性值描述
default小白 默认
pointer小手
move移动
text文本
not-allowed禁止
<body>
    <ul>
        <li style="cursor: default">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer">我是鼠标小手样式</li>
        <li style="cursor: move">我是鼠标移动样式</li>
        <li style="cursor: text">我是鼠标文本样式</li>
        <li style="cursor: not-allowed">我是鼠标禁止样式</li>
    </ul>
</body>

4.2轮廓线 outline

给表单添加 outline：0；或者 outline:none；样式之后，就可以去掉默认的蓝色边框。

input {
   outline: none;
}

4.3防止拖拽文本域 resize

实际开发中，文本域右下角是不可以拖拽的。

resize [ˌriːˈsaɪz] vt. 改变(尤指计算机图像等)的大小

textarea {
  resize: none;
}

<body>
    /* 尽量把文本域写在同一行，不要分行，如果分行写，就算里面没有内容，页面中光标离开头会有大的空白区域  如果想要有区域，用padding值来挤开即可*/
    <textarea name="" id="" clos="30" row="10"></textarea>
</body>

5. vertical-align 属性应用

使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

官方解释：指定 行内/行内块 元素 的 垂直对齐方式

vertical [ˈvɜːrtɪkl] adj. 竖的; 垂直的; 直立的; 纵向的; n. 垂直线; 垂直位置

语法：

vertical-align: baseline | top | middle | bottom
值描述
baseline默认。元素放置在父元素的基线上
top把元素的顶端与行中最高的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶端与行中最低的元素的顶端对齐

5.1 图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐。(文字底部会多出一点)

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

<head>
	<style>
		img {
			/* vertical-align: bottom; */
			/*让图片和文字垂直居中*/
			vertical-align: middle;
			/* vertical-align: top; */
		}
		textare {
    		vertical-align: middle;
		}
	</style>
</head>
<body>
	<img src="images/ldh.jpg"alt="">pink老师是刘德华
	<textarea name="" id="" cols="30" rows="10"></textarea>请你留言！
</body>

5.2 解决图片底部默认空白缝隙问题

图片底部默认空白缝隙

bug ：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

  1. 给图片添加 vertical—align: middle | top | bottom; 等。（提倡使用的）
  2. 因为只有 行内/行内块元素 才有 vertical-align ，把图片转换为块级元素 display: block；就没有基线对齐，就不会产生空白缝隙的问题
<head>
    <style>
        div {
            border: 2px solid blue;
        }
        img {
            /* vertical-align: bottom; */
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <img src="wjk1.jpeg" alt="" width="480px" height="320px">
    </div>    
</body>

6. 溢出的文字省略号显示

1.单行文本溢出显示省略号—必须满足三个条件

/*1·先强制一行内显示文本*/
white-space: nowrap;（默认normal 自动换行）
/*2·超出的部分隐藏*/
overflow: hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;

<head>
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /*1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3.文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }     
    </style>
</head>
<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>

2.多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）

overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

<head>
    <style>
        div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /*弹性伸缩盒子模型显示*/
            display: -webkit-box;
            /*限制在一个块元素显示的文本的行数*/
            -webkit-line-clamp: 3;
            /*设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;
        }      
    </style>
</head>
<body>
    <div>
        啥也不说，此处省略一万字，啥也不说，此处省略一万字
    </div>
</body>

7.常见布局技巧

1. margin 负值的运用

  1. 解决并排盒子之间的边框宽度加倍问题。

    原理：让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框

  2. 鼠标移动边框颜色变化效果。

    鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index)

<head>
    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
        /* ul li:hover {
            1. 如果盒子没有定位，则鼠标经过添加相对定位即可，相对定位会压住标准流或者浮动的盒子 
            position: relative;
            border: 1px solid blue; 
        } */
        ul li:hover {
            /* 2.如果li都有定位，则利用z-index提高层级 */
            z-index: 1;
            border: 1px solid blue; 
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

2. 文字围绕浮动元素

原理：浮动元素不会遮住文字。

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 75px;
            background-color: pink;
            margin: 0 auto;
            padding: 5px;
        }
        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }
        .pic img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="../images/Esther2.webp" alt="">
        </div>
        <p>虞书欣，1995年12月18日出生于上海市，中国内地女演员、歌手。</p>
    </div>
</body>

3. 行内块元素巧妙运用

行内块元素布局当前页码。只要给行内块元素的父亲添加text-align：center；那这个父盒子里面所有的行内元素和行内块元素都会水平居中对齐。且行内块元素相邻元素在一行上（不用添加浮动），之间还存在空白缝隙（不用设置margin来距离调开）

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
        }
        .box .prev,
        .box .next {
            width: 85px;
            font-size: 14px;
        }
        .box current,
        .box .elp {
            background-color: #fff;
            border: none;
        }
        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }
        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

4.css三角强化

css三角强化

代码：

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

<head>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* 把上边框宽度调大 */
            /* border-top: 100px solid transparent;
            border-right: 10px solid skyblue; */
            /* 左边和下边的边框宽度设置为0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */

            /*1.只保留右边的边框有颜色 上右下左*/
            border-color: transparent red transparent transparent;
            /*2.样式都是solid */
            border-style: solid;
            /*3.上边框宽度要大，右边框宽度稍小，其余的边框该为0*/
            border-width: 100px 50px 0  0;
        }
    </style>
</head>

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

代码实现：

<head>
    <style>
        .price {
            width: 160px;
            height: 24px;
            /* 让孩子继承垂直居中，就不用给两个孩子都写了 */
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }
        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            /* 上边框和父亲一样高 */
            border-width: 24px 10px 0 0;

        }
        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="price">
        <span class="miaosha">
            ￥299.00
            <i></i>
        </span>
        <span class="origin">￥199.00</span>
    </div>
</body>

8. CSS 初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 初始化

简单理解： CSS 初始化是指重设浏览器的样式。（也称为 CSS reset ）每个网页都必须首先进行 CSS 初始化。 这里我们以京东 css 初始化代码为例。

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过buttom 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* css3抗锯齿性，让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

Unicode 编码字体： 把中文字体的名称用相应的 Unicode 编码来代替，这样就可以有效的避免浏览器解释 CSS 代码时候出现乱码的问题。

比如： 黑体：\9ED1\4F53 宋体：\5B8B\4F53 微软雅黑：\5FAE\8F6F\96C5\9ED1

七、HTML5与CSS3新增特性

1. HTML5新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

声明：1.新特性增加了很多，但是我们专注于开发常用的新特性。2.基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。

1.1 HTML5新增语义化标签

以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的。

<div class="header"> </div>
<div class="nav"> </div>
<div class="content"> </div>
<div class="footer"> </div>

而新增的有语义：

HTML5新增语义化标签

  • <header>：头部标签
  • <nav>：导航标签
  • <article>：内容标签
  • <section>：定义文档某个区域
  • <asider>：侧边栏标签
  • <footer>：尾部标签
<head>
    <style>
        header,
        nav {
            height: 120px;
            background-color: pink;
            border-radius: 15px;
            width: 800px;
            margin: 15px auto;
        }
        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
</body>

注意：

  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中，需要把这些元素转换为块级元素
  • 其实，我们移动端更喜欢使用这些标签
  • HTML5还增加了很多其他标签，我们后面再慢慢学

1.2 HTML5新增多媒体标签

新增的多媒体标签主要包含两个：

1.音频：<audio>

2.视频：<video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash 和其他浏览器插件。

HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。

1. 视频 <video>

当前<video>元素支持三种视频格式：MP4、WebM、Ogg 。尽量使用mp4格式（所有浏览器支持）

语法：

<video src="文件地址" controls="controls"></video>

/* 了解 */
<video controls="controls"width="300">
	<source src="move.ogg" type="video/ogg">
	<source src="move.mp4" type="video/mp4">
	您的浏览器暂不支持<video>标签播放视频
</video>

<video>常见属性

属性值描述
autoplayautoplay视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controlscontrols向用户显示播放控件
widthplxels(像素)设置播放器宽度
heightplxels(像素)设置播放器高度
looploop播放完是否继续播放该视频，循环播放
preloadauto(预先加载视频) none（不应加载视频）规定是否加载视频（如果有了autoplay 就忽略该属性）
srcurl视频url地址
posterlmgurl加载等待的画面图片
mutedmuted静音播放
2. 音频 <audio>

当前<audio>元素支持三种音频格式：MP3、Wav、Ogg

所有浏览器支持 mp3 格式。

语法：

<audio src="文件地址" controls="controls"></audio>

/* 了解 */
<audio controls="controls">
	<source src="happy.mp3" type="audio/mpeg">
	<source sre="happy.ogg" type="audio/ogg">
	您的浏览器暂不支持<audio>标签。
</audio>

常见属性：

属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮
looploop如果出现该属性，则每当音频结束时重新开始播放
srcurl要播放的音频的URL
  • 谷歌浏览器把音频和视频自动播放禁止了
3.总结
  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）

1.3 HTML5 新增 input 类型

属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须为URL类型
type=“date”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month”限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数学类型
type=“tel”手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单

重点记住：number tel search 这三个

<body>
    <!-- 我们验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>邮箱：<input type="email" /></li>
            <li>网址：<input type="ur1" /></li>
            <li>日期：<input type="date" /></li>
            <li>日期：<input type="time" /></li>
            <li>数量：<input type="number" /></li>
            <li>手机号码：<input type="tel" /></li>
            <li>搜索：<input type="search" /></li>
            <li>颜色：<input type="color" /></li>
            <!-- 当我们点击提交按钮就可以验证表单了 （所谓验证就是输入不正确就会报错） -->
            <li><input type="submit" value="提交"></li>
        </ul>
    </form>
</body>

1.4 HTML5新增的表单属性

属性值说明
requiredrequired表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
autocompleteoff/on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete =“off” ，需要放在表单内，同时加上name属性，同时成功提交
multiplemultiple可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {
    color: pink;
}

<head>
    <style>
        input::placeholder {
            color: blue;
        }
    </style>
</head>

<body>
    <form action="">
         <input type="search" name="sear" required="required" placeholder="王俊凯" autofocus="autofocus">
         <input type="submit" value="提交" autocomplete="off">
         <input type="file" multiple="multiple">
    </form>
</body>

2. CSS3 新特性

CSS3的现状：

  • 新增的CSS3特性有兼容性问题，ie9+才支持
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛
  • 现阶段主要学习：新增选择器和盒子模型以及其他特性

2.1 CSS3 新增选择器

CSS3给我们新增了选择器，可以更加便捷，更加自由的选择元素。

  1. 属性选择器
  2. 结构伪类选择器
  3. 伪元素选择器

2.2 属性选择器

属性选择器可以根据元素特定的属性来选择元素。这样就可以不用借助于类或者id选择器。属性选择器用中括号[] 表示

简介简介
E[att]选择有att属性的E元素
E[att=“val”]选择有att属性且属性值等于 val 的E元素
E[att^=“val”]匹配具有att属性且值以 val 开头的E元素
E[att$=“val”]匹配具有att属性且值以 val 结尾的E元素
E[att*=“val”]匹配具有att属性且值中含有val的E元素

注意：类选择器、属性选择器、伪类选择器的权重都为 10

<head>
    <style>
        /* 必须是input 但是同时具有value这个属性 才选择这个元素 */
       /* input[value] {
            color: green;
       } */
       /* 只选择 type=text文本框 的input 选取出来 */
       input[type=text] {
            color: green;
       }
       /*选择首先是div 然后 具有class属性 并且属性值 必须是icon开头的这些元素 */
        /* 权重：div 标签选择器1+[] 属性选择器10=11*/
       div[class^=icon]{
            color: red;
       }
       section[class$=data] {
        	color: blue;
       }
        /* 权重：div 标签选择器1+. 类选择器10=11 就近原则*/
       div.icon1 {
            color:skyblue;
       }
       /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
    </style>
</head>

<body>
    <!--1.利用属性选择器就可以不用借助于类或者id选择器-->
    <!-- <input type="text"value="请输入用户名">
    <input type="text"> -->
    <!--2.属性选择器还可以选择 属性=值 的某些元素  重点 务必掌握的-->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!--3.属性选择器可以选择属性值开头的某些元素-->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!--4.属性选择器可以选择属性值结尾的某些元素-->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">那我是谁</section>
</body>

2.3 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，一般用于选择父级里面的第几个孩子。结构伪类选择器用冒号：表示

选择符简介
E: first-child匹配父元素中的第一个子元素E
E: last-child匹配父元素中最后一个E元素
E: nth-child(n)匹配父元素中的第n个子元素E
E: first-of-type指定类型E的第一个
E: last-of-type指定类型E的最后一个
E: nth-of-type(n)指定类型E的第n个
<head>
    <style>
        /* 1.选择ul 里面的第一个孩子 且第一个孩子叫小li */
        ul li:first-child {
            background-color: pink;
        }
        /* 2.选择ul 里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }
        /* 3.选择ul 里面的第2个孩子 小li */
        ul li:nth-child(2) {
            background-color: skyblue;
        }
        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>
</head>
<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>
    </ul>
</body>

nth-child(n) 选择某个父元素的一个或多个特定的子元素，在无序列表中用的多

  • n可以是数字，关键字和公式
  • n如果是数字，就是选择第n个子元素，里面数字从1开始….
  • n可以是关键字：even偶数，odd奇数
  • n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)
<head>
    <style>
        /* 1.把所有的偶数even的孩子选出来 */
       ul li:nth-child(even) {
            background-color: #ccc;
       }
        /* 2.把所有的偶数odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;
       }
       /* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里必须是n 不能是其他字母  相当于选择了所有的孩子*/
       ol li:nth-child(n) {
        background-color: pink;
       }
    </style>
</head>

<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>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>
公式取值
2n偶数，等价于2n
2n-1/2n+1奇数，等价于odd
5n5 10 15 …
n+5 6 7 8 …
n+5从第5个开始（包含第五个）到最后
-n+5前5个（包含第5个）…

关于 nth-of-type 与 nth-of-child

  1. div: nth-child 会把所有的盒子都排列序号 执行的时候首先看 :nth-child(1) 之后回去看 前面 div
  2. div: nth-of-type 会把指定元素的盒子排列序号 执行的时候首先看 div（指定的元素） 之后回去看 :nth-of-type(1) （第几个孩子）

区别：

  1. nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
  2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E找第n个孩子
<head>
    <style>
        ul li:first-of-type {
            background-color: pink;
        }
        ul li:last-of-type {
            background-color: pink;
        }
        ul li:nth-of-type(3) {
            background-color: skyblue;
        }
        /* nth-child 会把所有的盒子都排列序号 */
        /* 执行的时候首先看：:nth-child(1) 之后再去看前面：div 结果发现第一个孩子为p 而不是div 没有满足条件的孩子，所以选不出来 不执行 */
        section div:nth-child(1) {
            background-color: red;
        }
        /* nth-of-type 会把指定元素的盒子排列序号 */
        /* 执行的时候首先看 div(指定的元素) 之后再去看 :nth-of-type(1)(第几个孩子) */
        section div:nth-of-type(1) {
            background-color: gray ;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
    </ul>
    <!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

注意：结构伪类选择器的权重也为10

2.4 伪元素选择器⭐️

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

注意：

  • before 和 **after **创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法：element::before{} element可以是任何元素，element的意思就是元素。
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素， after 在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为 1
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重为2 */
        div::before {
            /* 本身为行内元素，需转换成行内元素/行内块元素才有宽高 */
            display: inline-block;
            /* 这个content是必须要写的 */
            content: '我';
            width: 30px;
            height: 40px;
            background-color: purple;
        }
        div::after {
            content: '小猪佩奇'
        }
    </style>
</head>
<body>
    <div>
        是
    </div>
</body>
1.案例一：伪元素字体图标
 <head>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?1lv3na') format('truetype'),
                url('fonts/icomoon.woff?1lv3na') format('woff'),
                url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }
        div::after {
            position: absolute;
            top:10px;
            right: 19px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
2.案例二：伪元素遮罩层
<head>
    <style>
        .Esther {
            position: relative;
            width: 480px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .Esther img {
            width: 100%;
            height: 100%;
        }

        .Esther::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(../images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了 Esther 这个盒子，就让里面的before遮罩层显示出来 */
        .Esther:hover::before {
            /* 不是转换成块级元素，而是显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="Esther">
        <img src="../images/Esther2.webp" alt="">
    </div>
</body>
3.案例三：伪元素清除浮动
.clearfix::after {
    /* 伪元素必须写的属性 */
    content: '';
    /* 插入的元素必须是块级 */
    display: block; 
    /* 不要看见这个元素 */
    height: 0;
    /* 核心代码 清除浮动 */
    clear: both;
    /* 不要看见这个元素 */
    visibility: hidden;
}

双伪元素清除浮动

.clearfix::before,
.clearfix::after {
    content: '';
    /* 转换为块级元素并且在一行显示 */
    display: table;
}
.clearfix::after {
    clear: both;
}

2.5 CSS3盒子模型

CSS3中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box，border-box ，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

  1. box-sizing：content-box 盒子大小为 width + padding + border （以前默认的）

  2. box-sizing: border-box 盒子大小为 width

    如果盒子模型我们改为了 box-sizing： border-box ，那padding 和 border就不会撑大盒子了（前提 padding 和 border 不会超过 width 宽度）

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }
        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>小猪乔治</div>
    <p>小猪佩奇</p>
</body>

2.6 CSS3 渐变

CSS 渐变是 CSS3 图像模块中添加的新类型的图像。CSS 渐变允许您在 两个或多个指定颜色之间显示平滑过渡。 浏览器支持两种类型的渐变：

  • 线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向，用 linear-gradient() 函数定义
  • 径向渐变（Radial Gradients）：由它们的中心定义，用 radial-gradient() 函数定义
1. 线性渐变

语法

background: linear-gradient(direction, color1, color2, ...);

参数

  • direction：指定了颜色过度的方向，不写默认为从上到下，值可以为 to bottom、to top、to right、to left、to bottom right 等。
  • color1：可以有多个 color 值，指定了颜色变化的范围。

2.7 CSS3过渡⭐️

过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态 可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

我们现在经常和 :hover 一起搭配使用

1. transition 的使用
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
  1. 属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
  2. 花费时间：单位是秒（必须写单位）比如 0.5s
  3. 运动曲线（可以省略）：默认是ease逐渐慢下来 ，还有linear匀速，ease-in加速，ease-out减速，ease-in-out先减速后加速
  4. 何时开始（可以省略）：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s
<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s; */
            /* 如果想要写多个属性，利用逗号进行分隔 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all 就可以了 */
            transition: all .5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>

口诀：谁做过渡给谁加

进度条案例：

<head>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

2.8 CSS3 的其特性

1.CSS3 滤镜 filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数();

例如： filter： blur(5px); blur 模糊处理数值越大越模糊

<style>
	img {
		/*blur是一个函数小括号里面数值越大，图片越模糊 注意数值要加px单位*/
		filter:blur(5px);
    }
	img:hover {
			filter: blur(0);
    }
</style>
</head>
<body>
	<img src="wjk1.jpeg" alt="" width="480px" height="320px">
</body>
</html>
2. CSS3 calc函数

此 CSS 函数让你在声明CSS属性值时执行一些计算。

/* 符号前面和后面一定一定要加空格，不加空格就是连写符号 */
width: calc(100% - 30px);
/* 子盒子永远比父盒子小30px */

括号里面可以使用 + - * / 来进行计算。

<head>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .son {
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 需求:我们的子盒子宽度永远比父盒子小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>

</body>

3. 2D 转换

转换（transform）是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

转换可以理解为变形。

  • 移动：translate
  • 旋转：rotate
  • 缩放：scale

3.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
二维坐标系

3.2 移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法

transform: translate(x, y);
/* 或者分开写 */
transform: translateX(x);
transform: translateY(y);
  • 参数 x, y 可以是百分数，为盒子自身的宽度或高度。
<head>
    <style>
        /* 移动盒子的位置： 定位  盒子的外边距  2d转换移动 */
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是x轴上移动位置，y就是y轴上移动位置 中间用逗号分隔 */
            /* transform: translate(x,y); */
            /* transform: translate(100px,100px); */
            /* 1.如果只移动x坐标 */
            /* transform: translate(100px,0); */
            /* transform: translateX(100px); */
             /* 1.如果只移动y坐标 */
            /* transform: translate(0,100px); */
            /* transform: translateY(100px); */
        }
        div:first-child {
            transform: translate(30px,30px);
        }
        div:last-child {
            background-color: purple;
        }
    </style>
</head>

<body>
   <div></div>
   <div></div>
</body>

重点

  • 定义 2D 转换中的移动，沿着X和Y轴移动元素

  • translate 最大的优点：不会影响到其他元素的位置

  • translate 中的百分比单位是相对于 自身元素 的 trainslate:(50%，50%)

    <head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 1. translate 里面的参数可以用 % */
            /* 2.如果里面的参数是 % ，那么移动的距离是 盒子自身的宽度或高度来对比的 */
            /* 这里的 50% 就是 50px 因为盒子的宽度是  100px */
            transform: translateX(50%);
        }
    </style>
</head>
<body>
   <div></div>
</body>

  • 对行内标签没有效果

    <head>
    <style>
        span {
            /* span 为行内元素，translate 对行内元素无效 */
            transform: translate(300px,300px);
        }
    </style>
</head>
<body>
   <span>123</span>
</body>

3.3 让盒子实现水平和垂直居中

<head>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%,-50%)盒子往上、往左走自己高度的一半 */
            transform: translate(-50%,-50%);
        }
    </style>
</head>

<body>
   <div>
    <p></p>
   </div>
</body>

3.4 旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法

transform: rotate(度数);

重点

  • rotate里面跟度数，单位是deg 比如rotate(45deg)
  • 角度为正时，顺时针，负时，为逆时针
  • 默认旋转的中心点是元素的中心点
<head>
    <style>
       img {
        width: 150px;
        /* 顺时针旋转45度 */
        /* transform: rotate(45deg); */
        border-radius: 50%;
        border: 5px solid red;
        /* 过渡写到本身上，谁做动画给谁加 */
        transition: all 0.3s;
       }
       img:hover {
        transform: rotate(360deg);
       }
    </style>
</head>

<body>
   <img src="../images/tb.jpg" alt="">
</body>

案例：三角形

<head>
    <title>Document</title>
    <style>
       div {
        position: relative;
        width: 249px;
        height: 35px;
        border:  1px solid #000;
       }
       div::after {
        content: '';
        position: absolute;
        top: 8px;
        right: 15px;
        width: 10px;
        height: 10px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000 ;
        transform: rotate(45deg);
       }
       /* 鼠标经过div 里面的三角旋转 */
       div:hover::after {
           /* 45+180=225 */
        transform: rotate(225deg);
        transition: all 0.2s
       }
    </style>
</head>

<body>
   <div></div>
</body>

3.5 2D 转换中心点 transform-origin

我们可以通过设置 transform-origin 设置元素转换的中心点。

语法

transform-origin: x y;

重点

  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认转换的中心点是元素的中心点（50% 50%）
  • 还可以给 x y 设置像素或者方位名词（top bottom left right center）
<head>
    <style>
        div {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.可以跟方位名词 */
            /* transform-origin: left bottom; */
            /* 2.默认的是 50% 50% 等价于 center center */
            /* 3.可以是px 像素 */
            transform-origin: 50px 50px;
        }
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

旋转案例

<head>
    <style>
        div {
            overflow: hidden;
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
            
        }
        div::before {
            content: '黑马';
            display: block;
            width: 100%; 
            height: 100%; 
            background-color: hotpink; 
            transform-origin: left bottom;         
            transform: rotate(180deg);
            transition: all 0.4s;
        }
        /* 鼠标经过div 里面的before 复原 */
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

3.6 缩放 scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法

 transform: scale(x, y);

注意：

  • 注意其中的x和y用逗号分隔

  • x, y 不跟单位，指缩放的倍数

  • 参数大于 1 则放大，小于 1 则缩小

    transform:scale(1,1)：宽和高都放大一倍，相对于没有放大

    transform:scale(2,2)：宽和高都放大了2倍

    transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)

    transform:scale(0.5,0.5)：缩小

  • 可以配合 transform-origin 使用，改变缩放中心

  • sacle 最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink; 
            margin: 100px auto; 
            /* transform-origin: left bottom; */
        }
        div:hover {
            /* 1.里面写的数字不跟单位 就是倍数的意思，1 就是1倍，2就是2倍 */
            /* transform: scale(x,y); */
            /* transform: scale(2,2); */
            /* 2.修改了宽度为原来的2倍 高度不变 */
            /* transform: scale(2,1); */
            /* 3.等比例缩放 同时修改宽度和高度，我们有简单的写法 以下是宽度修改了2倍，高度默认和第一个一样 */
            /* transform: scale(2); */
            /* 4.我们可以进行缩小，小于1 就是缩放 */
            /* transform: scale(0.5,0.5); */
            /* transform: scale(0.5); */
            /* 5. scale 的优势之处: 不会影响其他盒子 而且可以设置缩放的中心点*/
            /* width: 300px;
            height: 300px; */
            transform: scale(2);
        }
    </style>
</head>

<body>
    <div></div>
    123123
</body>

3.7图片放大案例

<head>
    <style>
        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        div img {
            transition: all 0.4s;
        }
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div><a href="#"><img src="../images/tb.jpg" alt="" width="200px" height="100px"></a></div>
    <div><a href="#"><img src="../images/tb.jpg" alt="" width="200px" height="100px"></a></div>
    <div><a href="#"><img src="../images/tb.jpg" alt="" width="200px" height="100px"></a></div>
</body>

3.8 分页按钮案例

<head>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid green;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

3.9 2D 转换综合写法

注意：

  1. 同时使用多个转换，其格式为： transform: translate() rotate() scale()
  2. 其顺序会影转换的效果。（先旋转会改变坐标轴方向）
  3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }

        div:hover {
            /* transform: rotate(180deg) translate(150px, 50px); */
            /* 同时有位移和其他属性，需要把位移放到最前面 */
            transform: translate(150px, 50px) rotate(180deg) scale(1.2);
        }
    </style>
</head>

<body>
    <div></div>
</body>

3.10 2D转换总结

  • 转换 transform 我们简单理解就是变形有2D和3D之分
  • 我们暂且学了三个 分别是 位移 旋转和缩放
  • 2D移动 translate(x,y) 最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
  • 可以分开写比如 translateX(x) 和 translateY(y)
  • 2D旋转rotate（度数）可以实现旋转元素，度数的单位是deg
  • 2D缩放sacle(x,y)里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子
  • 设置转换中心点transform-origin：x y；参数可以百分比、像素或者是方位名词
  • 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

4. 动画

动画( animation ) 是 CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

4.1 动画的基本使用

分为两步：

  1. 先定义动画 (动画序列 %α)
  2. 再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器）

@keyframes 动画名称 {
	0%{
		width:100px;
    }
	100%{
		width:200px;
    }
}

2.元素使用动画

div {
	width: 200px;
    height: 200px;
    background-color: aqua;
    margin: 100px auto;
    /* 调用动画 */
    animation-duration: 持续时间；
}

 <head>
    <style>
       /* 我们想页面一打开，一个盒子就从左边走到右边 */
       /* 1.定义动画 */
       @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
       }

       div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 2.调用动画 */
        /* 动画名称 */
        animation-name: move;
        /* 持续时间 */
        animation-duration: 2s;
       }
    </style>
</head>

<body>
    <div></div>
</body>

动画序列

  • 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

  • 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

  • 请用百分比来规定变化发生的时间，或用关键词**"from"和“to”，等同于0%和100%**。

    <head>
    <style>
        /* form 和 to 等价于 0% 和 100% */
       @keyframes move {
        from {
            transform: translate(0,0);
        }
        to {
            transform: translate(1000px,0);
        }
       }

       div {
        width: 100px;
        height: 100px;
        background-color: pink;
        animation-name: move;
        animation-duration: 2s;
       }
    </style>
</head>

<body>
    <div></div>
</body>

<head>
    <style>
        /* 动画序列 */
        /* 1.可以做多个状态的变化 ，keyframe 关键帧 */
        /* 2.里面的百分比要是整数 */
        /* 3.里面的百分比就是 总的时间(我们这个案例10s)的划分 */
       @keyframes move {
        0% {
            transform: translate(0,0);
        }
        /* 25% * 10=2.5s的时候，走到这个位置 */
        25% {
            transform: translate(1000px,0);
        }
        50% {
            transform: translate(1000px,500px);
        }
        75% {
            transform: translate(0,500px);
        }
        100% {
            transform: translate(0,0);
        }
       }

       div {
        width: 100px;
        height: 100px;
        background-color: pink;
        animation-name: move;
        animation-duration: 10s;
       }
    </style>
</head>

<body>
    <div></div>
</body>

注意:

  1. 可以做多个状态的变化 keyframes 关键帧
  2. 百分比必须是整数
  3. 百分比是总时间 animation-duration 的划分

4.2 动画常用属性

属性描述
@keyframes规定动画。
animation所有动画属性的简写属性,除了animation-play-state属性。
animation-name规定@keyframes动画的名称。(必须的)
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的)
animation-timing-function规定动画的速度曲线，默认是“ease”
animation-delay规定动画何时开始，默认是0
animation-iteration-count规定动画被播放的次数，默认是1，还有infinite无限的
animation-direction规定动画是否在下一周期逆向播放，默认是 “normal”,alternate逆播放
animation-play-state规定动画是否正在运行或暂停。默认是"running",还有"paused"
animation-fill-mode规定动画结束后状态,保持forwards回到起始backwards
<head>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(1000px, 0);

            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            /* 运动曲线 */
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数 iteration 重复的 count 次数 infinite 无限的 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 默认的是normal, 如果想要反方向 就写alternate */
            /* animation-direction: alternate; */
            /* 动画结束后的状态 默认的是 backwards 回到起始状态,我们可以让他停留在结束状态 forwards */
           animation-fill-mode: forwards; 
        }
        div:hover {
            /* 鼠标经过div让这个div停止动画，鼠标离开就继续动画 */
            animation-play-state: paused;

        }
    </style>
</head>

<body>
    <div></div>
</body>

4.3 动画简写属性

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;

<head>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(1000px, 0);

            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
           /* 简写：animation: name duration timing-function delay iteration-count direction fill-mode; */
           /* 前面2个属性 name duration 一定要写 */
           animation: move 2s linear   alternate forwards;
        }
        div:hover {
            /* 鼠标经过div让这个div停止动画，鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div></div>
</body>
  • 简写属性里面不包含 animation-play-state
  • 暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用
  • 想要动画走回来，而不是直接跳回来: animation-direction: alternate
  • 盒子动画结束后，停在结束位置: animation-fill-mode: forwards

4.4大数据热点图案例

<head>
    <style>
        body {
            background-color: #333;
        }

        .map {
            position: relative;
            width: 868px;
            height: 621px;
            background: url(../images/map.png) no-repeat;
            margin: 100px auto;
        }

        .city {
            position: absolute;
            top: 233px;
            right: 258px;
            color: #fff;
        }

        .tb {
            top: 492px;
            right: 151px;
        }

        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }

        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }

        .city div.pulse2 {
            animation-delay: 0.4s;
        }

        .city div.pulse3 {
            animation-delay: 0.8s;
        }

        @keyframes pulse {
            0% {}

            70% {
                /* transform: scale(5); 我们不要用scale 因为它会让 阴影也变大 */
                width: 40px;
                height: 40px;
                opacity: 1;
            }

            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

4.5速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

值描述
linear动画从头到尾的速度是相同的，匀速
ease默认。动画以低速开始，然后加快，在结束前变慢
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
steps()指定了时间函数中的间隔数量（步长）

步长案例

<head>
    <style>
       div {
          overflow: hidden;
          font-size: 20px;
          width: 0;
          height: 30px;
          background-color: pink;
          /* 让文字强制一行内显示 */
          white-space: nowrap;
          /* steps 就是分几步来完成我们的动画 有了steps 就不要再写ease 或者linear 了 */
          animation: w 4s steps(10) forwards;
       }
       @keyframes w {
        0% {
            width: 0;
        }
        100% {
            width: 200px;
        }
       }
    </style>
</head>

<body>
    <div>相信自己一定非常可以</div>
</body>

案例：奔跑的熊大

<head>
    <style>
        body {
            background-color: #ccc;
        }
       div {
        position: absolute;
        width: 200px;
        height: 100px;
        background: url(../images/bear.png) no-repeat;
        /* 我们元素可以添加多个动画，用逗号分隔 */
        animation: bear 1s steps(8) infinite, move 5s forwards;
       }
       @keyframes bear {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -1600px 0;
        }
       }
       @keyframes move {
        0% {
            left: 0;
        }
        100% {
            left: 50%;
            /* margin-left: -100px; */
            transform:translateX(-50%);
        }
       }
    </style>
</head>

<body>
    <div></div>
</body>

5. 3D 转换

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。

3D转换

特点：近大远小，物体后面遮挡不可见。

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

5.1三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

三维坐标系

  • x轴：水平向右 注意：x右边是正值，左边是负值
  • y轴：垂直向下 注意：y下面是正值，上面是负值
  • z轴：垂直屏幕 注意：往外面是正值，往里面是负值

5.2 3D 移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

  • translform:translateX(100px)：仅仅是在x轴上移动
  • translform:translateY(100px)：仅仅是在Y轴上移动
  • translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
  • transform:translate3d(x,y,z)：其中x、y、z分别指要移动的轴的方向的距离
<head>
    <style>
       div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 这样写 Y 会把 X 层叠掉，结果只移动 Y轴
        transform: translateX(100px);
        transform: translateY(100px); */
        /* 看不到 translateZ 的变化，要借助透视才能看到效果 */
        /* transform: translateX(100px) translateY(100px) translateZ(100px); */
        /* 1.translateZ 沿着Z轴移动 */
        /* 2.translateZ后面的单位一般跟px */
        /* 3.translateZ(100px) 向外移动100px (向我们的眼睛来移动的) */
        /* 4.3D 移动有简写的方法 */
        /* transform: translate3d(x,y,z); */
        /* transform: translate3d(100px,100px,100px); */
        /* 5.xyz是不能省略的，如果没有就写0 */
        transform: translate3d(0,100px,100px);
       }
    </style>
</head>

<body>
    <div></div>
</body>

5.3透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的

透视

  • 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
  • 模拟人类的视觉位置，可认为安排一只眼睛去看
  • 透视我们也称为视距：视距就是人的眼睛到屏幕的
  • 距离距离视觉点越近的在电脑平面成像越大，越远成像越小
  • 透视的单位是像素

透视写在被观察元素的父盒子上面的

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。

z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

<head>
    <style>
        body {
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 200px;
        }
       div {
        width: 200px;
        height: 200px;
        background-color: pink;
        transform: translate3d(400px,100px,100px);
       }
       
    </style>
</head>

<body>
    <div></div>
</body>

5.4 translateZ

translform:translateZ(100px)：仅仅是在Z轴上移动。有了透视，就能看到 translateZ 引起的变化了

**透视固定（前提）**的情况下，通过移动物体来实现物体近大远小。透视加在父亲身上，有透视，即可模拟物体近大远小，通过 translateZ 来模拟。父亲给了一个固定的 perspective 就可以给多个孩子加不同的 translateZ ，那么看到的大小不一样，看上去就有前后关系、立体关系了，也就有层次感和立体感了。

5.5 3D 旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。

语法

  • transform:rotateX(45deg)：沿着x轴正方向旋转45度
  • transform:rotateY(45deg)：沿着y轴正方向旋转
  • 45degtransform:rotateZ(45deg)：沿着Z轴正方向旋转
  • 45degtransform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg为角度（了解即可)

3D旋转

对于元素旋转的方向的判断我们需要先学习一个左手准则。

左手准则

  • 左手的手拇指指向x轴的正方向
  • 其余手指的弯曲方向就是该元素沿着x轴正方向旋转

左手准则

  • 左手的手拇指指向y轴的正方向
  • 其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）

左手准则

transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg为角度(了解即可）

xyz是表示旋转轴的矢量，是表示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

  • transform:rotate3d(1,0,0,45deg)就是沿看x轴旋转45deg
  • transform:rotate3d(1,1,0,45deg)就是沿着对角线旋转45deg
<head>
    <style>
        body {
            perspective: 300px;
        }
        img {
            width: 480px;
            height: 320px;
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        img:hover {
            /* 沿 X 轴正方向旋转 */
            /* transform: rotateX(360deg); */
            /* 沿 Y 轴正方向旋转 */
            /* transform: rotateY(180deg); */
            /* 沿 Z 轴正方向旋转 */
            /* transform: rotateZ(180deg); */
            /* transform: rotate3d(x,y,z,deg); */
            /* 只沿 X 轴旋转45度 */
            /* transform: rotate3d(1,0,0,45deg); */
            /* 只沿 Y 轴旋转45度 */
            /* transform: rotate3d(0,1,0,45deg); */
            /* 既有 X 轴，又有 Y 轴 ，取矢量，沿对角线旋转 */
            transform: rotate3d(1,1,0,45deg);
        }
    </style>
</head>

<body>
    <img src="../images/tb.jpg" alt="">
</body>

5.6 3D 呈现 transfrom-style

  • 控制子元素是否开启三维立体环境。
  • transform-style: flat; 子元素不开启3d立体空间默认的
  • transform-style: preserve-3d; 子元素开启立体空间
  • 代码写给父级，但是影响的是子盒子
  • 这个属性很重要，后面必用
<head>
    <style>
         /* body {
            perspective: 500px;
        }  */
        .box {
            perspective: 500px; 
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(60deg);
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>

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

案例：两面翻转的盒子

  1. 搭建HTML结构

    <div class="box">
    <div class="front">黑马程序员</div>
    <div class="front">pink老师等你</div>
</div>
    • box 父盒子里面包括前后两个子盒子
    • box是翻转的盒子 front是前面盒子 back是后面盒

  2. CSS样式

    ① box指定大小，切记要添加3d呈现

    ② back盒子要沿着Y轴翻转180度

    ③最后鼠标经过box沿着Y旋转180deg

<head>
    <style>
        body {
            /* 增加立体感 */
            perspective: 400px;
        }
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 让背面的紫色盒子保留立体空间 给父级添加的 */
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(180deg);
        }
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }
        .front {
            background-color: pink;
            /* z-index: 1; 不行，加下面这句？？？ */
            transform: translateZ(1px); 
        }
        .back {
            background-color: purple;
            /* 像手机一样 背靠背来旋转 */
            transform: rotateY(180deg);

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">黑马程序员</div>
        <div class="back">pink老师等你</div>
    </div>
</body>

案例：3D导航栏

  1. 搭建HTML结构

    <ul>
    <li>
        <div class="box">
            <div class="front">黑马程序员</div>
            <div class="bottom">pink老师等你</div>
        </div>
    </li>
</ul>
    • li 做导航栏
    • .box 是翻转的盒子 front是前面的盒子 bottom是底下盒子

  2. 代码实现

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px;
        }
        ul li {
            float: left;
            margin: 0 5px;
            width: 120px;
            height: 35px;
            list-style: none;
            /* 一会我们需要给box 旋转，也需要透视，干脆给li加，里面的子盒子都有透视效果 */
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }
        .box:hover {
            transform: rotateX(90deg);
        }
        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 35px;
            color: #fff;
        }
        .front {
            background-color: pink;
            z-index: 1;
            /* 立方体是沿几何中心旋转的，所以是粉色盒子往前移，而不是紫色盒子往后移 */
            transform: translateZ(17.5px);
        }
        .bottom {
            background-color: purple;
            /* 这个 X 轴一定是负值 */
            /* 如果有移动或者其他样式，必须先写移动 */
            transform: translateY(17.5px) rotateX(-90deg) ;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">黑马程序员</div>
                <div class="bottom">pink老师等你</div>
            </div>
        </li>
    </ul>
</body>

6.H5C3 综合案例——旋转木马

  1. 搭建HTML结构

    <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

  2. 代码实现

    <head>
    <style>
        /* 原本是给 section 添加，但是 section 要旋转，所以给 body 添加，让 section 和 div 都有透视效果*/
        body {
            perspective: 1000px;
        } 
        section {
            /* perspective: 1000px; */
            position: relative;
            width: 300px;
            height: 225px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
            /* 中心可再加一张 */
            /* background: url(../images/); */
        }
        section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(../images/Esther.jpg) no-repeat;
        }
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        } 
        section div:nth-child(2) {
            /* 先旋转好了 再移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3) {
            /* 先旋转好了 再移动距离 */
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4) {
            /* 先旋转好了 再移动距离 */
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5) {
            /* 先旋转好了 再移动距离 */
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6) {
            /* 先旋转好了 再移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

7. 浏览器私有属性

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

  1. 私有前缀

    • -moz-: 代表firefox浏览器私有属性
    • -ms-: 代表ie浏览器私有属性
    • -webkit-: 代表safari、chrome私有属性
    • -o-∶代表Opera私有属性

  2. 提倡的写法

    -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

8. CSS3 新特性总结

  1. 新的选择器：属性选择器、结构伪类选择器、伪元素选择器
  2. 转换transform：2D（translate-px、rotate-deg、scale-倍数）、3D（translate3d、rotateX、rotateY、rotateZ）
  3. 动画 animation：简写属性！！！
  4. 浏览器私有前缀

八、品优购项目

1.品优购项目规划

1.1网站制作流程

  1. 客户沟通，制定方案
  2. 签订合同
  3. 预付定金
  4. 初稿审核（网页美工会制作原型图和psd效果图）
  5. 前台页面设计，后台功能开发
  6. 测试验收
  7. 上线培训
  8. 后期维护

1.2品优购项目整体介绍

  • 项目名称：品优购
  • 项目描述：品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作

1.3品优购项目的学习目的

  1. 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。
  2. 品优购项目能复习、总结、提高基础班所学布局技术。
  3. 写完品优购项目，能对实际开发中制作PC端页面流程有一个整体的感知。
  4. 为后期学习移动端项目做铺垫。

1.4开发工具以及技术栈

  1. 开发工具VScode、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）
  2. 技术栈
  • 利用HTML5+CSS3手动布局，可以大量使用H5新增标签和样式
  • 采取结构与样式相分离，模块化开发
  • 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件—品优购代码规范.md）

1.5品优购项目搭建工作

  1. 需要创建如下文件夹：
名称说明
项目文件夹shopping
样式类图片文件夹images
样式文件夹css
产品类图片文件夹upload
字体类文件夹fonts
脚本文件夹js
  1. 需要创建如下文件夹：
名称说明
首页index.html
CSS初始化样式文件base.css
CSS公共样式文件commom.css

有些网站初始化的不太提倡 * {margin:0; padding:0;}

比如新浪：html,body,ul,li,ol,d,dd,dtp,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}

  1. 模块化开发

    所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响模块化开发具有重复使用、更换方便等优点

    • 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
    • 这里最典型的应用就是common.css公共样式。写好一个样式，其余的页面（首页、列表页、详情页等）用到这些相同的样式
    • 模块化开发具有重复使用、修改方便等优点

    common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。

1.6网站favicon图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。

1.制作favicon图标
  1. 把品优购图标切成png图片。
  2. 把png图片转换为ico图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
2. favicon图标放到网站根目录下
3.HTML页面引入favicon图标
  1. 在html 页面里面的<head></head>元素之间引入代码。
<link rel="shortcut" href="favicon.ico" type="image/x-icon"/>

2.品优购首页制作

网站的首页一般都是使用index命名，比如 index.html或者 index.php。我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面。

2.1常用模块类名命名

以下是我们约定的命名模块，同学们可以直接使用以下类名即可。

名称说明
快捷导航栏shortcut
头部header
标志logo
购物车shopcar
搜索search
热点词hotwords
导航nav
导航左侧dropdown 包含 .dd .dt
导航右侧navitems
页面底部footer
页面底部服务模块mod_service
页面底部帮助模块mod_help
页面底部版权模块mod_copyright

2.2快捷导航shortcut制作

快捷导航shortcut制作

  • 通栏的盒子命名为shortcut，是快捷导航的意思。注意这里的行高，可以继承给
  • 里面的子盒子里面包含版心的盒子
  • 版心盒子里面包含1号左侧盒子左浮动
  • 版心盒子里面包含2号右侧盒子右浮动

2.3 header 制作

header 制作

  1. header 盒子必须要有高度

  2. 1号盒子是logo 标志定位

  3. 2号盒子是search 搜索模块定位

    input搜索表单+button按钮

  4. 3号盒子是hotwrods 热词模块定位

  5. 4号盒子是shopcar 购物车模块

    • count 统计部分用绝对定位做
    • count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度
    • 一定注意左下角不是圆角，其余三个是圆角 写法：border-radius:7px 7px 7px 0;

2.4 nav导航制作

nav导航制作

  1. nav盒子通栏有高度，而且有个下边框
  2. 1号盒子左侧浮动，dropdown（下拉菜单）
  3. 2号盒子左侧浮动，navitems 导航栏组
  4. 1号盒子有讲究，根据相关性里面包含.dt和.dd两个盒子

nav导航制作

2.5 footer 底部制作

  • footer 页面底部盒子通栏给一个高度和灰色的背景
  • footer 里面有一个大的版心
  • 版心里面包含1号盒子，mod_service 是服务模块，mod 是模块的意思
  • 版心里面包含2号盒子，mod help是帮助模块
  • 版心里面包含3号盒子，mod_copyright是版权模块

2.6 main 主体模块制作

以前书写的就是模块化中的公共部分。main主体模块是index里面专有的，注意需要新的样式文件index.css。

  • main盒子宽度为980像素，位置距离左边220px（margin-left），给高度就不用清除浮动
  • main 里面包含左侧盒子，左浮动，focus焦点图模块
  • main 里面包含右侧盒子，右浮动，newsflash新闻快报模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9bau7jgc-1691916584433)(…/img/image-20230214100358394.png)]

newsflash新闻快报模块

  • 1号盒子为news新闻模块高度为165px
  • 2号盒子为lifeservice生活服务模块高度为209px
  • 3号盒子为bargain特价商品

news 新闻模块

  • 注意：这里我们分为上下两个模块，但是两个模块都用div
  • 1号盒子news-hd新闻头部模块，给一个高度和下边框
  • 2号盒子news-bd新闻主题部分，里面包含ul和li还有链接

news 新闻模块

2.7推荐模块制作

推荐模块制作

  • 大盒子recom 推荐模块 recommend
  • 里面包含2个盒子，浮动即可
  • 1号盒子recom-hd
  • 2号盒子recom-bd，注意里面的小竖线

2.7楼层区floor制作

注意这个floor，因为产品可能有很多，所以不要给高度，内容有多少，算多少

  • 第一楼是家用电器模块：里面包含两个盒子
  • 1号盒子box_hd，给一个高度，有个下边框，里面分为左右2个盒子
  • 2号盒子box_bd，不要给高度
  1. box_hd模块
  • 有高度可以不用清除浮动
  • 左边h3，盒子左浮动
  • 右边tab_list，右浮动，因为用到tab切换效果，所以里面要用ul和li来做

box_hd模块

  1. Tab栏原理-布局需求

Tab栏原理

3.品优购列表页制作

3.1准备工作

  1. 列表页面是新的页面，我们需要新建页面文件list.html。
  2. 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来。
  3. 头部和底部的样式也需要，因此list.html中还需要引入common.css。
  4. 需要新的 list.css 样式文件，这是列表页专门的样式文件。

3.2列表页header和nav修改

列表页header和nav修改

  • 秒杀盒子sk(second kill）定位即可
  • 1号盒子左侧浮动sk list里面包含ul和li
  • 2号盒子左侧浮动skcon里面包含ul和li

3.3列表页主体 sk _container

列表页主体

  • 1号盒子sk _container给宽度1200，不要给高度
  • 2号盒子sk_hd，插入图片即可
  • 3号盒子sk_bd，里面包含很多的ul和li

4.品优购注册页制作

4.1注册页类名命名

注册页面：register.html

注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

名称说明
注册专区registerarea
注册内容reg-form
错误的error
成功的success
默认的default

注册页类名命名

4.2registerarea 布局

registerarea 布局

5.Web 服务器

5.1什么是Web服务器

我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了。

服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。

Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。

以下服务器我们主要指的是Web服务器。

根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

5.2本地服务器

我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的同学就可以访问你的品优购网站了。就业班学ajax的时候，再进行讲解。

5.3远程服务器

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。

远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。

比如域名：www.mi.com 可以访问小米网站

总结：

  1. 服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器
  2. 服务器可以分为本地服务器和远程服务器
  3. 远程服务器是别的公司为我们提供了一台计算机。
  4. 我们可以把网站上传到远程服务器里面，别人就可以通过域名访问我们的网站了。

5.4将自己的网站上传到远程服务器

注意：一般稳定的服务器都是需要收费的。比如：阿里云

这里给大家推荐一个免费的远程服务器（免费空间）http://free.3v.do/

  1. 去免费空间网站注册账号。

  2. 第一次注册成功后要点击FTP管理，激活FTP，并记录下主机地址

  3. 记录下主机名、用户名、密码、域名（网站地址）。

  4. 利用cutftp软件上传网站到远程服务器。

  5. 在浏览器中输入域名，即可访问我们的品优购网站了。

    /* 先旋转好了 再移动距离 /
    transform: rotateY(180deg) translateZ(300px);
    }
    section div:nth-child(5) {
    /     先旋转好了 再移动距离 /
    transform: rotateY(240deg) translateZ(300px);
    }
    section div:nth-child(6) {
    /     先旋转好了 再移动距离 */
    transform: rotateY(300deg) translateZ(300px);
    }

    ```

7. 浏览器私有属性

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

  1. 私有前缀

    • -moz-: 代表firefox浏览器私有属性
    • -ms-: 代表ie浏览器私有属性
    • -webkit-: 代表safari、chrome私有属性
    • -o-∶代表Opera私有属性

  2. 提倡的写法

    -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

8. CSS3 新特性总结

  1. 新的选择器：属性选择器、结构伪类选择器、伪元素选择器
  2. 转换transform：2D（translate-px、rotate-deg、scale-倍数）、3D（translate3d、rotateX、rotateY、rotateZ）
  3. 动画 animation：简写属性！！！
  4. 浏览器私有前缀

八、品优购项目

1.品优购项目规划

1.1网站制作流程

  1. 客户沟通，制定方案
  2. 签订合同
  3. 预付定金
  4. 初稿审核（网页美工会制作原型图和psd效果图）
  5. 前台页面设计，后台功能开发
  6. 测试验收
  7. 上线培训
  8. 后期维护

1.2品优购项目整体介绍

  • 项目名称：品优购
  • 项目描述：品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作

1.3品优购项目的学习目的

  1. 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。
  2. 品优购项目能复习、总结、提高基础班所学布局技术。
  3. 写完品优购项目，能对实际开发中制作PC端页面流程有一个整体的感知。
  4. 为后期学习移动端项目做铺垫。

1.4开发工具以及技术栈

  1. 开发工具VScode、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）
  2. 技术栈
  • 利用HTML5+CSS3手动布局，可以大量使用H5新增标签和样式
  • 采取结构与样式相分离，模块化开发
  • 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件—品优购代码规范.md）

1.5品优购项目搭建工作

  1. 需要创建如下文件夹：
名称说明
项目文件夹shopping
样式类图片文件夹images
样式文件夹css
产品类图片文件夹upload
字体类文件夹fonts
脚本文件夹js
  1. 需要创建如下文件夹：
名称说明
首页index.html
CSS初始化样式文件base.css
CSS公共样式文件commom.css

有些网站初始化的不太提倡 * {margin:0; padding:0;}

比如新浪：html,body,ul,li,ol,d,dd,dtp,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}

  1. 模块化开发

    所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响模块化开发具有重复使用、更换方便等优点

    • 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
    • 这里最典型的应用就是common.css公共样式。写好一个样式，其余的页面（首页、列表页、详情页等）用到这些相同的样式
    • 模块化开发具有重复使用、修改方便等优点

    common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。

1.6网站favicon图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。

1.制作favicon图标
  1. 把品优购图标切成png图片。
  2. 把png图片转换为ico图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
2. favicon图标放到网站根目录下
3.HTML页面引入favicon图标
  1. 在html 页面里面的<head></head>元素之间引入代码。
<link rel="shortcut" href="favicon.ico" type="image/x-icon"/>

2.品优购首页制作

网站的首页一般都是使用index命名，比如 index.html或者 index.php。我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面。

2.1常用模块类名命名

以下是我们约定的命名模块，同学们可以直接使用以下类名即可。

名称说明
快捷导航栏shortcut
头部header
标志logo
购物车shopcar
搜索search
热点词hotwords
导航nav
导航左侧dropdown 包含 .dd .dt
导航右侧navitems
页面底部footer
页面底部服务模块mod_service
页面底部帮助模块mod_help
页面底部版权模块mod_copyright

2.2快捷导航shortcut制作

[外链图片转存中…(img-cCdTYQt8-1691916584433)]

  • 通栏的盒子命名为shortcut，是快捷导航的意思。注意这里的行高，可以继承给
  • 里面的子盒子里面包含版心的盒子
  • 版心盒子里面包含1号左侧盒子左浮动
  • 版心盒子里面包含2号右侧盒子右浮动

2.3 header 制作

[外链图片转存中…(img-wdv7KUju-1691916584433)]

  1. header 盒子必须要有高度

  2. 1号盒子是logo 标志定位

  3. 2号盒子是search 搜索模块定位

    input搜索表单+button按钮

  4. 3号盒子是hotwrods 热词模块定位

  5. 4号盒子是shopcar 购物车模块

    • count 统计部分用绝对定位做
    • count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度
    • 一定注意左下角不是圆角，其余三个是圆角 写法：border-radius:7px 7px 7px 0;

2.4 nav导航制作

[外链图片转存中…(img-wTcmnlUQ-1691916584433)]

  1. nav盒子通栏有高度，而且有个下边框
  2. 1号盒子左侧浮动，dropdown（下拉菜单）
  3. 2号盒子左侧浮动，navitems 导航栏组
  4. 1号盒子有讲究，根据相关性里面包含.dt和.dd两个盒子

[外链图片转存中…(img-lWEPHUCA-1691916584433)]

2.5 footer 底部制作

  • footer 页面底部盒子通栏给一个高度和灰色的背景
  • footer 里面有一个大的版心
  • 版心里面包含1号盒子，mod_service 是服务模块，mod 是模块的意思
  • 版心里面包含2号盒子，mod help是帮助模块
  • 版心里面包含3号盒子，mod_copyright是版权模块

2.6 main 主体模块制作

以前书写的就是模块化中的公共部分。main主体模块是index里面专有的，注意需要新的样式文件index.css。

  • main盒子宽度为980像素，位置距离左边220px（margin-left），给高度就不用清除浮动
  • main 里面包含左侧盒子，左浮动，focus焦点图模块
  • main 里面包含右侧盒子，右浮动，newsflash新闻快报模块

[外链图片转存中…(img-9bau7jgc-1691916584433)]

newsflash新闻快报模块

  • 1号盒子为news新闻模块高度为165px
  • 2号盒子为lifeservice生活服务模块高度为209px
  • 3号盒子为bargain特价商品

news 新闻模块

  • 注意：这里我们分为上下两个模块，但是两个模块都用div
  • 1号盒子news-hd新闻头部模块，给一个高度和下边框
  • 2号盒子news-bd新闻主题部分，里面包含ul和li还有链接

[外链图片转存中…(img-pD2ghEza-1691916584433)]

2.7推荐模块制作

[外链图片转存中…(img-97z1tSkG-1691916584434)]

  • 大盒子recom 推荐模块 recommend
  • 里面包含2个盒子，浮动即可
  • 1号盒子recom-hd
  • 2号盒子recom-bd，注意里面的小竖线

2.7楼层区floor制作

注意这个floor，因为产品可能有很多，所以不要给高度，内容有多少，算多少

  • 第一楼是家用电器模块：里面包含两个盒子
  • 1号盒子box_hd，给一个高度，有个下边框，里面分为左右2个盒子
  • 2号盒子box_bd，不要给高度
  1. box_hd模块
  • 有高度可以不用清除浮动
  • 左边h3，盒子左浮动
  • 右边tab_list，右浮动，因为用到tab切换效果，所以里面要用ul和li来做

[外链图片转存中…(img-ueO7UFUX-1691916584434)]

  1. Tab栏原理-布局需求

[外链图片转存中…(img-awpeNU6z-1691916584435)]

3.品优购列表页制作

3.1准备工作

  1. 列表页面是新的页面，我们需要新建页面文件list.html。
  2. 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来。
  3. 头部和底部的样式也需要，因此list.html中还需要引入common.css。
  4. 需要新的 list.css 样式文件，这是列表页专门的样式文件。

3.2列表页header和nav修改

[外链图片转存中…(img-21u2XMAY-1691916584435)]

  • 秒杀盒子sk(second kill）定位即可
  • 1号盒子左侧浮动sk list里面包含ul和li
  • 2号盒子左侧浮动skcon里面包含ul和li

3.3列表页主体 sk _container

[外链图片转存中…(img-0diAhpMM-1691916584435)]

  • 1号盒子sk _container给宽度1200，不要给高度
  • 2号盒子sk_hd，插入图片即可
  • 3号盒子sk_bd，里面包含很多的ul和li

4.品优购注册页制作

4.1注册页类名命名

注册页面：register.html

注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

名称说明
注册专区registerarea
注册内容reg-form
错误的error
成功的success
默认的default

[外链图片转存中…(img-57wCNoAK-1691916584436)]

4.2registerarea 布局

[外链图片转存中…(img-sVd4O59s-1691916584436)]

5.Web 服务器

5.1什么是Web服务器

我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了。

服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。

Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。

以下服务器我们主要指的是Web服务器。

根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

5.2本地服务器

我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的同学就可以访问你的品优购网站了。就业班学ajax的时候，再进行讲解。

5.3远程服务器

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。

远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。

比如域名：www.mi.com 可以访问小米网站

总结：

  1. 服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器
  2. 服务器可以分为本地服务器和远程服务器
  3. 远程服务器是别的公司为我们提供了一台计算机。
  4. 我们可以把网站上传到远程服务器里面，别人就可以通过域名访问我们的网站了。

5.4将自己的网站上传到远程服务器

注意：一般稳定的服务器都是需要收费的。比如：阿里云

这里给大家推荐一个免费的远程服务器（免费空间）http://free.3v.do/

  1. 去免费空间网站注册账号。
  2. 第一次注册成功后要点击FTP管理，激活FTP，并记录下主机地址
  3. 记录下主机名、用户名、密码、域名（网站地址）。
  4. 利用cutftp软件上传网站到远程服务器。
  5. 在浏览器中输入域名，即可访问我们的品优购网站了。
CSS基础全解析
TTKunn的博客
10-01 3533
CSS基础全解析、快速入门
CSS基础
weixin_62731214的博客
06-02 1629
本章主要介绍了CSS的基础知识，包括CSS的样式书写及CSS的常见的选择器
CSS基础知识总结
Lotus_fragrance的博客
04-29 4286
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础知识2
m0_64204485的博客
07-19 2019
本篇文章主要讲了，CSS的三大机制，以及文本的各个样式
CSS基础样式
qq_62283164的博客
07-19 1664
CSS基础样式 一、css语法规范 二、CSS选择器 1.类（class）选择器 2.id选择器 3.CSS选择器优先级 三、网页中引入css样式 1.内联（行内）样式 2.内部样式表 3.外部样式表 4.link标签引入外部样式文件 ​编辑 5.CSS样式优先级 四、字体样式 五、文本样式 六、鼠标样式 七、背景样式 八、列表样式 九、CSS伪类 十、CSS练习之美团左侧菜单栏...
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 3万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础 知识点总结
星星之火的语言c学习
08-18 3045
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
CSS基础（2）
weixin_56498069的博客
02-28 5311
css基础：复合选择器、css元素显示模式、css背景相关知识等
CSS基础知识
ashfiqa的博客
01-21 2344
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础中padding详解
ning的博客
10-09 8542
通过本文的介绍，我们深入了解了padding的基本概念、简写方法以及它对元素尺寸的影响。掌握这些知识，可以帮助我们在布局设计中更加灵活和精确地控制元素的显示效果。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSS基础：最详细 padding的 4 种用法解析。
css基础教程之CSS基础语法
09-25
CSS（层叠样式表）是用于控制网页元素外观的关键技术。在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。...为了创建美观且易于管理的网页，掌握CSS基础语法至关重要。
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
html&css入门基础知识点.pdf
10-04
HTML和CSS基础知识点 HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
HTML5+CSS3网站设计基础教程（第2版）_源代码.zip
07-03
在"HTML5+CSS3网站设计基础教程（第2版）"中，读者可以学习到如何利用这两种语言构建功能强大且视觉效果出众的网站。 HTML5作为新一代的超文本标记语言，引入了许多新的元素和属性，旨在简化网页结构，提高语义化，...
CSS基础入门总结（很详细的哟）
10-25
（1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2...
8.5 CSS3-flex弹性盒子
最新发布
2503_92841156的博客
08-05 1076
语法：justify-content：center属性值： 语法：justify-content：center属性值： flex-start（默认值）： 主轴起点对齐 flex-end主轴终点对齐 center：居中 space-between：两端对齐，项目之间的间隔都相等。space-around： 每个项目两侧的间隔相等。所以，项目之间间隔比项目与边框间隔大一倍。可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差。!!!!
8.5 CSS3多列布局
2503_92841156的博客
08-05 382
CSS3之多列布局columns CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。
html5+css3+canvas长文转长图工具支持换行
易查薪
08-02 205
朋友圈神器长文转图片工具支持自动换行.效果见图，体验见左下角原文链接，原名微博长文转长图工具。朋友圈(微博)分享文章工具，图文人必备。另：不依赖服务器，可以自行保存网页局域网浏览器打开使用。
7.31 CSS3新增选择器
2503_92841156的博客
08-01 679
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效（阴影）、多栏布局（display:flex）、2D3D和动画等模块。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值