文章目录
- 什么是网页
- 什么是HTML
- 所谓超文本，有两层含义
- 浏览器内核
- Web标准
- HTML机构标签
- DOCTYPE和lang以及字符集的作用
- 标题标签
- 段落标签
- 换行标签
- 文本格式化标签
- div和span标签
- 图像标签
- 图像标签和路径
- 链接标签
- 表格标签
- 列表标签
- 表单标签
- CSS简介
- CSS基础选择器
- CSS字体属性
- CSS文本属性
- CSS的三种引入方式
- CSS复合选择器
- CSS元素显示模式
- CSS的背景属性
- CSS的三大特性
- CSS盒子模型
- 圆角边框
- 盒子阴影
- 文字阴影
- 传统网页布局的三种方式
- 浮动
- 常见图片的四种格式
- CSS属性书写顺序
- 页面布局整体思路
- 定位
- 定位的特殊性
- 绝对定位（固定定位）会完全压住盒子
- 网页布局总结
- 元素的显示和隐藏
- 元素溢出的显示和隐藏
- 精灵图的使用
- 字体图标的产生
- CSS三角
- 什么是用户界面
- Vertical-align属性应用
- 图片底侧空白缝隙解决方案
- 溢出的文字省略号显示
- 布局技巧
- 京东CSS初始化
什么是网页
网站是指在因特网上根据一定规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是指网站中的“一页”，通常是HTML格式的文件，它要通过浏览器起来阅读
什么是HTML
HTML指的是超文本标记语言，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。
所谓超文本，有两层含义
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
Web标准提出的最佳体验方案：结构、样式、行为相分离。
为什么需要Web标准
浏览器不同。它们显示页面或者排版就有些许差异。
Web标准的构成
主要包括结构、表现、和行为三个方面。
HTML机构标签
DOCTYPE和lang以及字符集的作用
标题标签
h1 - h6
特点：
1.加了标题标签的文字会加粗，字号也会依次变大
2.一个标题独占一行
段落标签
p
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行
2.段落和段落之间保有缝隙
换行标签
br
特点：
1.br是单标签
2.换行标签只是简单地开始新的一行，跟段落标签不一样，段落之间会插入一些垂直的间距
文本格式化标签
在网页中，有时需要给文字设置粗体、斜体、或下划线等效果。
div和span标签
div和span没有语义，它们就是一个盒子，用来装内容。
特点：
1.div标签用来布局，但是现在一行只能放一个div 大盒子
2.span标签用来布局，一行可以多个span 小盒子
图像标签
src是img标签的必须属性，它用于指定图像文件的路径和文件名
所谓属性：简单理解就是属于这个图像标签的特性
<img src="图像的URL"/>
注意点：
1.图像标签可以拥有多个属性，必须写在标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式，即key="value"的格式，属性 = “属性值”
图像标签和路径
目录文件夹：就是普通文件夹，里面只不过存放了我们页面所需要的相关素材，如html图片等。
根目录：打开目录文件夹的第一层就是根目录。
路径
页面中的图片非常多，通常我么会新建一个文件夹来存放这些图片，这时再查找图像，就需要采用"路径"的方式来指定图片文件的位置。
1.相对路径：以引用文件所在的位置为参考基础，而建立出的目录路径（简单理解就是 图片相对于html页面的位置）
2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的（或者完整的网络地址）
链接标签
链接分类：
1.外部链接，例如http://www.baidu.com
2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如href=“index.html”
3.空链接：如果当时没有确定链接目标时href="#"
4.下载链接：如果href里面的地址是一个文件或者压缩包，会下载这个文件
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6.锚点链接：我们点击链接可以迅速定位到页面中的某个位置
6.1在链接文本的href属性中，设置属性值为#名字的形式，如
<a href="#two"/>
6.2找到目标位置标签，里面添加一个id属性 = 刚才的名字如
<h3 id="two">第二集介绍</h3>
# 注释标签和特殊字符
表格标签
表格是用来显示数据的
1.table是用于定义表格的标签
2.tr标签用于定义表格中的行，必须嵌套在table标签中
3.td用于定义表格中的单元格，必须嵌套在tr标签中
4.th标签表示HTML表格的表头部分（文本内容会加粗居中显示）
表格结构标签（可以更好的分清表格结构）
1.thead标签：表示表格的头部区域
2.tbody标签：表示表格的主体区域
合并单元格
合并单元格的方式
1.跨行合并：rowspan=“合并单元格的个数”
2.跨列合并：colspan=“合并单元格的个数”
列表标签
列表是用来布局de
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便
根据不同的场景，列表可以分为三大类：无序列表、有序列表和自定义列表
无序列表
特点：
1.ul标签中只能包含li标签
2.li标签中相当于是一个容器，可以容纳其他元素
3.无序列表会带有自己的属性，但是实际使用中，我们会使用css来设置
有序列表
特点：
1.ol标签中只能包含li标签
2.li标签可以容纳其他元素
3.有序列表会带有自己的属性，但是在实际使用中，我们会使用css来设置
自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
基本语法为：dl > dt > dd
特点：
1.dl标签里面智能包含dt和dd
2.dt和dd个数没有限制，经常是一个dt对应多个dd
3.dt和dd里面可以容纳其他元素
列表总结
表单标签
使用表单的目的就是收集用户信息
在HTML中，一个表单通常是由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
表单域
表单域是一个包含表单元素的区域
在一个HTML标签中，from标签用于定义表单域，以实现用户信息的收集和传递。
from会把它范围内的表单元素信息提交给服务器
表单控件
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件
input输入表单元素
在input标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）
除type属性外，input标签还有其他很多属性，其常用属性如下
1.name和value是每个表单元素都有的属性值，主要给后台人员使用
2.name是每个表单元素的名字，要求单选按钮和复选框要有相同的name值
3.checked属性主要针对于单选按钮和复选框，主要作用一打开页面就要默认选中某个表单元素
label标签
label标签为input元素定义标注（标签）
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
select下拉表单元素
1.select中至少包含一对option
2.在option中定义selected = "selected"时，当前项为默认选中
textarea文本域表单元素
使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 textarea 标签。
在表单元素中，textarea 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
CSS简介
CSS的主要使用场景就是美化网页，布局页面的
CSS是层叠样式表的简称
CSS也是一种标记语言
CSS的主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS语法规范
CSS规则由两个主要部分构成：选择器以及一条或多条声明
CSS基础选择器
选择器分为基础选择器和复合选择器两个大类，我们这里先讲一下基础选择器
基础选择器是由单个标签组成的
基础选择器又包括 标签选择器 类选择器 id选择器 通配符选择器
标签选择器
用html标签名作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式
/* 标签选择器 : 写上标签名 */
p {
color: green;
}
div {
color: pink;
}
类选择器
/* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用*/
.red {
color: red;
}
.star-sing {
color: green;
}
.memeda {
color: pink;
}
多类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>利用类选择器画三个盒子</title>
<style>
.box {
width: 150px;
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>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础选择器之id选择器</title>
<style>
/* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">迈克尔·杰克逊</div>
<div>pink老师</div>
</body>
</html>
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础选择器之通配符选择器</title>
<style>
* {
color: red;
}
/* * 这里把 html body div span li 等等的标签都改为了红色 */
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
</html>
基础选择器总结
CSS字体属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）
font-family设置字体系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS字体属性之字体系列</title>
<style>
h2 {
font-family: '微软雅黑';
}
p {
/* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它,</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>
font-size字号大小
CSS使用font-size属性定义字体大小
谷歌浏览器默认文字大小是16px（像素），不同浏览器可能默认显示的字号大小不一样，我们尽量给一个明确的值，不要默认大小
可以给body指定整个页面文字的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS字体属性之字体大小</title>
<style>
body {
font-size: 26px;
}
/* 标题标签比较特殊,需要单独指定文字大小 */
h2 {
font-size: 16px;
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它,</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>
font-weight
CSS使用font-weight属性设置文本字体的粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS字体属性之字体大小</title>
<style>
.bold {
/* font-weight: bold; */
/* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
/* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p class="bold">拼死也要克服它,</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>
font-style字体样式
CSS使用font-style属性设置文本的风格
注意：平时我们很少给文字加斜体，反而要个斜体标签（em，i）改为不斜体字体
font复合属性
字体属性可以把以上文字样式综合来写，这样可以节约代码
使用font属性时，必须按照上面的语法格式进行书写，不能更换顺序，并且各个属性之间以空格隔开
不需要设置的属性可以省略（取默认值）但必须保留font-size和font-family属性，否则font属性将不起作用
字体属性总结
CSS文本属性
CSS文本属性可定义文本的外观，比如文本的颜色、对其文本、装饰文本、文本缩进、行间距等。
文本颜色（color）
Color属性用于定义文本的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS文本外观属性之颜色</title>
<style>
div {
/* color: deeppink; */
/* color: #cc00ff; */
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<div>听说喜欢pink色的男生,都喜欢男人</div>
</body>
</html>
对齐文本（text-align）
text-align属性用于设置元素内文本内容的水平对其方式
如果父盒子添加了text-align:center 父盒子里面的行内元素行内块元素都会水平居中对齐
装饰文本（text-decoration）
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等
text-indent（文本缩进）
属性用来指定文本的第一行缩进，通常是将段落的首行缩进
行间距（line-height）
line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
文本属性总结
CSS的三种引入方式
按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：
1.行内样式表（行内式）
2.内部样式表（嵌入式）
3.外部样式表（链接式）
内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽出来，单独放到一个style标签中
<style>
div {
color: pink;
}
</style>
style标签理论上可以放在html文档的任何地方，但一般会放在文档的head标签中
行内样式表
行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式
<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
style其实就是标签的属性
在双引号中间，写法要符合CSS规范
使用行内样式表设定CSS，通常也称为行内式引入
外部样式表
实际开发都是外部样式表，适合于样式表较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
引入外部样式表分为两步：
1.新建一个后缀为.css的样式文件，把所有CSS代码都放入此文件中。
2.在HTML中使用link标签引入这个文件。
<link rel="stylesheet" href="style.css">
CSS引入方式总结
CSS复合选择器
复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成的
1.复合选择器可以更准确、更高效的选择目标元素（标签）
2.复合选择器是由两个或多个基础选择器，通过不同的方式组合而成
3.常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器
后代选择器又称包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签卸载后面，中间再用空格分隔。当标签嵌套时，内层标签就成为外层标签的后代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>复合选择器之后代选择器</title>
<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>
<li><a href="#">不会变化的</a></li>
</ul>
</body>
</html>
子选择器
子元素选择器（子选择器）只能选择作为某元素的最近以及子元素。简单理解就是选亲儿子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>复合选择器之子元素选择器</title>
<style>
.nav>a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
</html>
并集选择器
并集选择器可以选择多标签，同时为他们定义相同的样式。通常用于集体声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>复合选择器之并集选择器</title>
<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>
</html>
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素
伪类选择器书写的最大特点是用冒号（:）表示，比如:hover、:first-child
因为伪类选择器很多，比如有链接伪类，结构伪类，所以这里先给大家讲解常用的链接伪类选择器
链接伪类选择器的注意事项：
1.为了确保生效，请按照LVHA的顺序声明:link :visited :hover :active
2.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
:focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况input类表单元素才能获取，因此这个选择器也主要针对表单元素来说
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>focus伪类选择器</title>
<style>
/* // 把获得光标的input表单元素选取出来 */
input:focus {
background-color: pink;
color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入">
<input type="text" placeholder="请输入">
<input type="text" placeholder="请输入">
</body>
</html>
复合选择器总结
CSS元素显示模式
了解元素的显示模式可以更好的让我们布局页面
1.什么是元素的显示模式
2.元素显示模式的分类
3.元素显示模式的转换
什么是元素的显示模式
作用:网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素（标签）以什么方式进行显示，比如div自己占一行，比如一行可以放多个span
HTML元素一般分为块元素和行内元素两种类型
块元素
常见的块元素有 h1-h6 p div ul ol li 等，其中div标签是典型的块元素
块元素的特点：
1.比较霸道，自己占一行
2.高度，宽度，外边距以及内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或块元素
注意：
1.文字类的元素内不能使用块级元素
2.p标签主要用于存放文字，因此p里面不能存放块级元素，特表是不能放div
3.同理h1-h6等都是文字类块级标签，里面也不能放其他块级元素
行内元素
常见的行内元素有a strong b em i del s ins u span等，其中span标签是典型的行内元素。有的地方也将行内元素称为内联元素
行内元素的特点：
1.相邻行内元素在一行上，一行可以显示多个
2.高、宽直接设置是无效的
3.默认高度是它本身内容的宽度
4.行内元素只能收纳文本或其他行内元素
注意：
1.链接里面不能再放链接
2.特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签img input td 他们同时具备块元素和行内元素的特点，有些资料称之为行内块元素
行内块元素的特点：
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙。一行可以显示多个（行内元素的特点）
2.默认宽度就是它本身内容的宽度
3.宽度、高度、行高、外边距及内边距都可以控制（块级元素的特点）
元素显示模式的总结
元素显示模式的转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性，比如我们想要增加链接a的触发范围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元素显示模式转换</title>
<style>
a {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素 a 转换为 块级元素 */
display: block;
}
div {
width: 300px;
height: 100px;
background-color: purple;
/* 把 div 块级元素转换为行内元素 */
display: inline;
}
span {
width: 300px;
height: 30px;
background-color: skyblue;
display: inline-block;
}
</style>
</head>
<body>
<a href="#">金星阿姨</a>
<a href="#">金星阿姨</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body>
</html>
CSS的背景属性
通过CSS的背景属性，可以给页面元素添加背景样式
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片的位置、背景图像固定等
背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）
背景平铺
如果在html页面上对背景图片进行平铺，可以使用background-repeat属性
背景方位名词
利用background-pository属性可以改变图片在背景中的位置
背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者跟随页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果
背景复合写法
背景色半透明
背景总结
CSS的三大特性
CSS有三个非常重要的特性：层叠性、继承性、优先级
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则：
1.样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
2.样式不冲突，不会层叠
继承性
现实中的继承：我们继承了父亲的姓
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单理解就是：子承父业
1.恰当的使用继承可以简化代码，降低CSS样式的复杂性
2.子元素可以继承父元素的样式（text-、font-、line-这些元素开头的可以继承，以及color属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS继承性</title>
<style>
div {
color: pink;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
</div>
</body>
</html>
行高的继承性
1.行高可以跟单位也可以不跟单位
2.如果子元素没有设置行高，则会继承父元素的行高为1.5
3.此时子元素的行高是：当前子元素的文字大小*1.5
4.body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行高的继承</title>
<style>
body {
color: pink;
/* font: 12px/24px 'Microsoft YaHei'; */
font: 12px/1.5 'Microsoft YaHei';
}
div {
/* 子元素继承了父元素 body 的行高 1.5 */
/* 这个1.5 就是当前元素文字大小 font-size 的1.5倍 所以当前div 的行高就是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>
</html>
优先级
当同一个元素指定多个选择器，就会产生优先级
1.选择器相同，则执行层叠性
2.选择器不同，则根据选择器权重执行
权重叠加
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
权重虽然会叠加，但是永远不会进位
CSS盒子模型
所谓盒子模型：就是把HTML页面中的布局看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容
边框（border）
border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
边框的复合写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>边框的复合写法</title>
<style>
div {
width: 300px;
height: 200px;
/* border-width: 5px;
border-style: solid;
border-color: pink; */
/* 边框的复合写法 简写: */
/* border: 5px solid pink; */
/* 上边框 */
border-top: 5px solid pink;
/* 下边框 */
border-bottom: 10px dashed purple;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
合并相邻边框（表格细线边框）
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
border-collapse：collapse;
边框会影响盒子实际大小
内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离
padding的简写
内边距会影响盒子的大小
当我们给盒子指定padding时发生了两件事：
1.内容和边框有了距离，添加了内边距
2.padding影响了盒子实际大小
padding不会撑开盒子的情况
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>padding不会影响盒子大小的情况</title>
<style>
h1 {
/* width: 100%; */
height: 200px;
background-color: pink;
padding: 30px;
}
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
padding: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>
外边距（margin）
margin属性用于设置外边距，即控制盒子和盒子之间的距离
外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件
行内元素或者行内块元素水平居中
行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内元素/行内块元素水平居中对齐</title>
<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>
<div class="header">
<img src="down.jpg" alt="">
</div>
</body>
</html>
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
主要有两种情况
1.相邻块元素垂直外边距合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外边距合并-相邻块级元素垂直外边距合并</title>
<style>
.damao, .ermao {
width: 200px;
height: 200px;
background-color: pink;
}
.damao {
margin-bottom: 100px;
}
.ermao {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</body>
</html>
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* border: 1px solid red; */
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们布局前，首先要清除下网页元素的内外边距
/* 这句话也是我们css 的第一行代码 */
* {
margin: 0;
padding: 0;
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
圆角边框
在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了
border-redius属性用于设置元素的外边框圆角
盒子阴影
CSS新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子阴影</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* box-shadow: 10px 10px; */
}
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
/* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */
</style>
</head>
<body>
<div></div>
</body>
</html>
文字阴影
在CSS3中，我们可以使用text-shadow属性将阴影应用于文本
传统网页布局的三种方式
网页布局的本质–用css来摆放盒子。把盒子摆放到相应的位置
css提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：
1.普通流（标准流）
2.浮动
3.定位
浮动
为什么需要浮动
什么是浮动
浮动特性
加了浮动之后的元素，会具有很多特性，需要我们掌握的
1.浮动元素会脱离标准流（脱标）
1.1脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
1.2浮动的盒子不再保留原先的位置
2.浮动的元素会一行内显示并且元素顶部对齐
2.1如果多个盒子都设置了浮动，则它们会按照属性值一行显示并且顶端对齐排列
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
3.浮动的元素具有行内块元素的特性
3.1任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨在一起的
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
浮动布局注意点
1.浮动和标准流的的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
注意：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动
为什么要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
清除浮动的本质
清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准了
清除浮动的策略
闭合浮动，只让浮动在父盒子内部受影响
清除浮动—额外标签法
额外标签法也称为隔墙法，是W3C推荐的做法
额外标签法会在浮动元素末尾添加一个空的标签，例如div style为clear:both，或者其他标签（如br等）（br比较特殊）
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构比较差
注意：要求这个新的空标签必须是块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动之额外标签法</title>
<style>
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
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> -->
<!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
<span class="clear"></span>
</div>
<div class="footer"></div>
</body>
</html>
#### 清除浮动---父级添加overflow 可以给父元素添加overflow属性，将其属性值设置为hidden、auto或scroll 优点：代码简洁 缺点：无法显示溢出的部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动之额外标签法</title>
<style>
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
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> -->
<!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
<span class="clear"></span>
</div>
<div class="footer"></div>
<br>
</body>
</html>
清除浮动—：after伪元素法
：after方式是额外标签法的升级版。也是给父元素添加
以下代码复制即可
优点：没有增加标签，结构简单
缺点：照顾低版本浏览器
清除浮动—：双伪元素清除浮动
也是给父元素添加
优点：代码更简洁
缺点：照顾低版本浏览器
清除浮动总结
浮动的文字环绕
浮动元素会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字
浮动之所以不会压住文字，因为浮动产生的目的最初是做文字环绕效果的，文字会围绕浮动元素
常见图片的四种格式
CSS属性书写顺序
页面布局整体思路
定位
为什么需要定位
1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他（标准流的盒子、浮动的盒子）盒子
定位组成
定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移送盒子
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式 边偏移则决定了该元素的最终位置
静态定位
相对定位
绝对定位
子绝父相
固定定位
固定定位小技巧-版心右侧固定
粘性定位 sticky
定位总结
定位叠放次序
绝对定位盒子水平居中小技巧
定位的特殊性
绝对定位（固定定位）会完全压住盒子
网页布局总结
元素的显示和隐藏
元素溢出的显示和隐藏
例如一个div里面的文字有很多
精灵图的使用
字体图标的产生
字体图标的优点
字体图标的下载
字体图标的引入
字体声明
@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;
}
字体文件的格式
字体图标的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字体图标的使用</title>
<style>
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 100px;
color:pink;
}
</style>
</head>
<body>
<span></span>
<span></span>
</body>
</html>
字体图标的追加
CSS三角
line-height和font-size是为了兼容性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS 三角制作</title>
<style>
.box1 {
width: 0;
height: 0;
/* border: 10px solid pink; */
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: pink;
margin: 100px auto;
}
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="jd">
<span></span>
</div>
</body>
</html>
CSS三角强化运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS三角强化的巧妙运用</title>
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大 */
/* border-top: 100px solid transparent;
border-right: 50px 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 ;
}
.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="box1"></div>
<div class="price">
<span class="miaosha">
¥1650
<i></i>
</span>
<span class="origin">¥5650</span>
</div>
</body>
</html>
什么是用户界面
用户界面-鼠标样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户界面样式-鼠标样式</title>
</head>
<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>
</html>
用户界面-取消表单轮廓线和防止拖拽文本域
Vertical-align属性应用
CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块有效
图片底侧空白缝隙解决方案
原因:图片默认和文字是基线对齐不是底线
溢出的文字省略号显示
单行文本溢出显示省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单行文本溢出显示省略号</title>
<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>
</html>
多行文本溢出显示省略号
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单行文本溢出显示省略号</title>
<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>
</html>
布局技巧
margin负值的巧妙运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin负值的巧妙运用</title>
<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>
</html>
文字围绕浮动元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字围绕浮动元素的妙用</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
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/img.png" alt="">
</div>
<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
</div>
</body>
</html>
行内块元素巧妙运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内块的巧妙运用</title>
<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;
font-size: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.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"><<上一页</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">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
</html>
CSS三角巧妙运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS三角强化的巧妙运用</title>
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大 */
/* border-top: 100px solid transparent;
border-right: 50px 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 ;
}
.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="box1"></div>
<div class="price">
<span class="miaosha">
¥1650
<i></i>
</span>
<span class="origin">¥5650</span>
</div>
</body>
</html>
京东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 {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
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
}
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
