HTML5+CSS3

Posted on 2021-08-07 In WEB前端

HTML

Hyper Text Markup Language超文本标记语言

HTML框架

<!DOCTYPE html>	
<html long="en">
		<head>
			<title>TAG</title>
			<meta charset="UTF-8">
		</head>
		<body>
		</body>
	</html>

常用标签

基础标签

<!DOCTYPE html>	
<html long="zh">
		<head>
			<title>网页标题</title>
			<meta charset="UTF-8">
		</head>
		<body>
            <h1>内容标题</h1><hr><!--此处添加水平线-->
            <p>
                此处为<br>段落内容
            </p>
		</body>
	</html>

标签	功能	应用
<DOCTYPE>	定义文档类型	<!DOCTYPE html>
<html>	定义一个HTML文档	<html long="zh">内容</html>
<title>	为文档定义一个标题	<title>标题</title>
<body>	文档的主体	<body>主体</body>
<h1>to<h6>	HTML标题	<h1>标题</h1>
<p>	一个段落	<p>内容</p>
<br>	换行	<br/>
<hr>	水平线	<hr>
<!---->	注释	<!--需要注释的内容-->

格式标签

标签	功能	应用
<abbr>	定义一个缩写	<abbr title="蹲坑">dk</abbr>
<address>	定义文档作者/所有者的联系信息	<address>地址联系信息</address>
<b>	加粗(无语义)	<b>文本</b>
<bdi>	设置一段文本，使其脱离其父元素的文本方向设置	<bdi>文本</bdi>
<bdo>	定义文本方向（rtl&ltr）	<bdo dir="rtl">文本</bdo>
<blockquote>	块引用(cite)	<blockquote cite="url">引用内容</blockquote>
<cite>	定义作品的标题（书籍、歌曲、电影等）	<cite>作品标题</cite>
<code>	定义计算机代码文本	<code>代码</code>
<del>	删除线	<del>要删除的文本</del>
<dfn>	定义项目	<dfn>项目名</dfn>
<em>	倾斜字体（语义较强）	<em>字体</em>
<i>	倾斜字体（无语义）	<i>需倾斜文本</i>
<ins>	定义删除后新插入的文本	<del>red</del><ins>blue</ins>
<mark>	高亮文本	<mark>文本</mark>
<meter>	已知最大最小值的度量 value(必须)：规定当前值 max:规定最大值；min:规定最小值 high:规定最高值；low:规定最低值 optimum:规定最优值	<meter value="2" min="0" max="10">2 out of 10</meter> <meter value="0.6">60%</meter>
<progress>	定义运行任务进度	<progress value="22" max="100"></progress>
<q>	定义短的引用	<q>引用内容</q>
<rp>	定义不支持 ruby 元素的浏览器所显示的内容	<ruby><br/>汉 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt><br/></ruby>
<rt>	定义字符（中文注音或字符）的解释或发音	<ruby><br/>汉 <rt> ㄏㄢˋ </rt><br/></ruby>
<ruby>	定义ruby注释（中文注音或字符）	<ruby><br/>汉 <rt> ㄏㄢˋ </rt><br/></ruby>
<s>	删除线	<s>文本</s>
<strong>	加粗（语义较强）	<strong>文本</strong>
<sub>	下标文本	<sub>文本</sub>
<sup>	上标文本	<sup>文本</sup>
<time>	定义公历时间（24）或日期	The concert starts at <time>20:00</time> The concert took place on May 15
<u>	下划线	<u>文本</u>

表单标签

标签	功能
<form>	定义一个表单域
<input>	定义一个输入控件 type: button:定义一个按钮。 file:选择文件 submit:提交按钮(点击后会向后台提交所选表单域中的信息) search:搜索框 password:密码框 date:选择时间框(年-月-日) text:单行文本 datetime-local:选择年月日时分 tel:电话号码 radio:单选按钮(需要给相同的name) checkbox:复选按钮 color:选择颜色 email:邮箱 number:输入数字 reset:重新输入 week:多少年的第几周
<textarea>	多行文本输入框<textarea>自定义内容</textarea>(写一行，否则光标不在左上)
<select>	下拉选择列表<select>option*N</select> size:规定下拉菜单中可见的选项数目 required="required":必须要选一个 multiple="true":可选多个选项
<optgroup>	选择列表中相关选项的组合{option*N}N
<option>	选择列表中的选项
<label>	input元素的标注(不点击控件，点链接到的文字也可以定位到控件) <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">
<fieldset>	围绕表单中元素的边框
<legend>	定义fieldset元素的标题
<datalist>	规定input元素可能的选项列表
<keygen>	用于表单的秘钥对生成器字段
<output>	定义计算的结果

图像及超链接标签

<img>

作用：向网页中嵌入一张图片

应用：<img src="url" alt="图片加载不出来时的代替文本" title="鼠标放到图片上的介绍文本">

Note:绝对路径用“”;相对路径用“/”

<a>

作用：超链接

应用：<a href="链接地址" target="_blank">连接描述</a>（内部、外部链接）

<a href="#">链接描述</a>（空链接）

<a href="文件地址、压缩包地址">下载文件</a>（文本、图片、视频、音频等均可以为超链接）

<h3 id="age">年龄详情</h3>(锚点链接)

Note:

默认为_self(当前窗口打开)
_blank(新窗口中打开)
_top(整个窗口中打开)

列表标签

标签	功能	应用
<ul>	定义一个无序列表	<ul><li><li></li></li><</ul>
<ol>	定义一个有序列表	<ol><li><li></li></li></ol>
<li>	定义列表项	<ol><li><li></li></li></ol>
<dl>	定义一个定义列表	<dl><dt>电脑</dt><dd>电脑的解释</dd></dl>
<dt>	定义列表中的项目	<dl><dt>电脑</dt><dd>电脑的解释</dd></dl>
<dd>	定义列表中的项目描述	<dl><dt>电脑</dt><dd>电脑的解释</dd></dl>

Note:

<ul><ol>里面只能放<li>标签，<li>标签里面可以放弃他标签

<dd>中的内容是<dt>中内容的说明或是包含于<dd>内容

<!DOCTYPE html>
<html long="en">
	<head>
		<meta charset="UTF-8">
		<title>列表</title>
	</head>
	<body>
		<div>
			<ul>
				<li>洗衣机</li>
				<li>冰箱</li>
				<li>空调</li>
			</ul>
			<ol>
				<li>太阳</li>
				<li>地球</li>
				<li>西安</li>
			</ol>
			<dl>
				<dt>跨栏</dt>
                <dd>是一项运动</dd>
                <dd>奥运会项目</dd>
                <dd>刘翔是冠军</dd>
			</dl>
		</div>
	</body>
</html>

表格标签

标签	功能
<table>	定义一个表格 border="num"定义边框宽度
<tr>	定义行
<td>	定义单元格 colspan:规定单元格可横跨的列数 rowspan:规定单元格可横跨的行数
<th>	定义表头单元格(使内容居中加粗)
<thead>	定义表头整行
<tbody>	定义表格主题内容
<tfoor>	定义表注（脚注）

Note:

合并单元格时，选定操作目标单元格后，需要删掉被合并单元格的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                 <th>序号</th>
                 <th>姓名</th>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张佳佳</td>
                <td>24</td>
            </tr>
            <tr>
                <td>2</td>
                <td>张亮亮</td>
                <td>33</td>
            </tr>
            <tr>
                <td rowspan="2">3</td>
                <td>张盼盼</td>
                <td>22</td>
            </tr>
            <tr>
                <td>张志荣</td>
                <td>63</td>
            </tr>  
            <tr>
                <td>4</td>
                <td colspan="2"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

样式/节标签

元信息

CSS

CSS基础知识

初识CSS

1. CSS结构

h1 {color:red; font-size:25px;} 选择器 {属性：值；属性：值；}

Note:

展开格式
小写字母书写
值前面留一个空格；选择器之后留一个空格

2. CSS三大特性

特性	原则
层叠性	1. 就近原则 2. 样式不冲突，不会层叠
继承性	1. 子元素可以继承父元素的某些样式（text、font、line-、color等属性） 2. 行高的继承性body {font:12px/1.5 Microsoft Yahei;} 行高可以跟单位也可以不跟单位如果子元素没有设置行高，则会继承父元素的行高为1.5 此时子元素的行高是：当前元素的文字大小*1.5
优先级	继承或者*：0000 元素选择器：0001 类选择器，伪类选择器：0010 ID选择器：0100 行内样式style="":1000 !important:无穷大
Note	权重相加永远不会有进位,，后者永远比前者高继承的权重永远是0 复合选择器权重会叠加

3. Emmet语法

方法	作用
写1个标签按TAB键	快速生成标签
div*3	生成多个标签
ul>li	父子级关系标签
div+p	兄弟级关系标签
.nav #foot	带有类名或者ID的标签
div$	生成的div有顺序，从1开始
div{}	生成的标签内部写内容
缩写	CSS中的快速写法
格式化	右键

4. CSS的元素显示模式（2+1）

类型	特点	Note
块元素	1. 独占一行 2. 高和宽及内边距可控制，默认宽度是容器（父级宽度）的100% 3. 是一个容器，里面可以放行内或者块元素	文字类的元素内不能使用块级元素
行内元素	1. 一行可以显示多个 2. 高和宽设置是无效的 3. 默认宽度是本身内容宽度 4. 行内元素只能容纳文本或者其他行内元素	1. 链接里面不能再放链接 2. <a>里面可以放块级元素，但最好给<a>转化成块级模式
行内块元素<img><input><td>	1. 一行可以显示多个,之间会有空隙 2. 默认宽度为本身内容宽度 3. 高和宽及内边距可控制

display: block

    <td>转换为块元素</th>
</tr>
<tr>
    <td>display: inline</td>
    <td>转换为行内元素</td>
</tr>   
<tr>
    <td>display: inline-block</td>
    <td>转换为行内块元素</td>
</tr>

5. CSS属性书写顺序

布局定位属性：display / position / float / clear / visbility / overflow(建议display第一个写)

自身属性：width / height / margin / padding / border / background

文本属性：color / font / text-decoration / text-aline / vertical-align / white-space / break-word

其他属性：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient...

6. CSS引入方式

类型	语法	note
内部样式表	<style>CSS</style>	/

| 行内样式表 |

选择器

1. 基础选择器

1.1 标签选择器

a {
	color: red;
	font-size: 25px;
}

1.2 类选择器(class)

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

Note:

多类名：<div class="red" font-size></div>(多个类名中间用空格隔开)

1.3 id选择器

#id名 {
	属性：属性值;
	......
}

1.4 通配符选择器

* {
	属性：属性值；
	......
}

2. 复合选择器

2.1 后代选择器(全部后代元素)

ol li {color: red;}

.nav li {color:red;}

1	元素1 元素2 {属性：属性值；}

Note:

元素1和元素2之间用空格隔开
元素2是元素1的所有后代li，包括儿子、孙子......
元素1、元素2可以为任意基础选择器

2.2 子选择器（亲儿子）

din>p {color: red;}

1	元素1>元素2 {属性：属性值；}

Note:

元素1和元素2之间用>隔开
元素2必须是亲儿子

2.3 并集选择器

ul，div {color：red;}

1	元素，元素 {属性：属性值；}

Note:

元素1和元素2之间用，隔开
并集选择器通常用来集体声明
任何选择器都可以作为并集选择器的一部分

2.4 伪类选择器（向某些选择器添加特殊效果）

类型	语法	Note
链接伪类	a:link 选择所有未被访问的链接 a:visited 选择已被访问的链接 a:hover 选择鼠标指针位于其上的链接 a:active 选择活动链接（鼠标按下未弹起的链接）	1. 按照LVHA顺序申明LOVE HATE 2. 链接需要单独指定样式 3.常用写法： a {color: gray;} a:hover {color:red} ：hover可以跟其他标签
表单伪类		input:focus{background: yellow;}

CSS属性

1. CSS字体属性

属性	属性值
font-family	"Microsoft YaHei", Arial, Helvetica, Sans-serif......	用逗号隔开；组合形式用引号包起来
font-size	xpx;	Google默认16px
font-weight	normal(默认)， bold(粗体)，b older(更粗的字符), lightet(更细的字符)，100-900(常用)（400：normal 700：bold 无单位)	数字无单位
font-style	normal(默认)， italic（斜体）	倾斜字体变正常
font	font-style font-weight font-size/line-height font-family;	洋醋小高字体;黄色必须有

2. CSS文本属性

属性	属性值s	Note
color	red、#fff、rgb(255,0,0)	/
text-align	center、 left、right	/
text-decoration	none、underline、overline、line-through	取消下划线（比如a）
text-indent	xpx 或者 2em	段落首行缩进
line-height	xpx	行高等于盒子高度：文字垂直居中

3. css背景

功能	语法	说明
背景颜色	background-color: 颜色值； background: rgba(0,0,0,0.3);（半透明）	颜色值（transparent透明）最后一个值是alpha透明度，取值在0-1之间，可以省去0，直接写.3
背景图片	background-image: none \| url(url);	页面可以同时添加背景颜色和图片，图片在顶部
背景平铺	background-repeat: repeat \| no-repeat \| repeat-x \| repeatj-y
背景图片位置	background-position: x y;(方位名词left \| right \| top \| bottom或者精确单位xpx ypx;混合单位)	方位名词：与顺序无关；省略其中一个则默认居中精确单位：x、y坐标不能更换位置；不指定Y值，则默认居中混合单位：第一个是X值
背景图像固定	background-attachment:scroll \| fixed;	scroll：随内容滚动 fixed:固定
复合写法	background:背景颜色背景图片背景平铺背景图像滚动背景图片位置（无顺序，习惯性写法）	颜色图片平铺滚动位置

4. 圆角边框&盒子阴影

功能	语法	Note
圆角边框	border-radius:xpx \| 百分比 border-radius:xpx ypx zpx wpx;(左上、右上、右下、左下)	高度一半或者50%是圆
盒子阴影	box-shadow:h-shadow v-shadow blur spread color inset; h-shadow:必须，水平阴影位置，允许负值 v-shadow:必须，垂直阴影位置，允许负值 blur:可选，模糊距离 spread:可选，阴影尺寸 color:可选，阴影的颜色 inset:可选，将外部阴影（outset）改为内部阴影	盒子阴影不占用空间，不会影响其他盒子排列
文字阴影	text-shadow:h-shadow v-shadow blur color; 和盒子阴影一样

5. vertical-align属性

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

语法：vertical-align:baseline（默认，基线对齐） | top（顶端对齐） | middle（中间对齐） | bottom（底端对齐）;

应用：图片于文字等垂直居中&&（清除图片下面的空隙，变成块元素也可解决）（因为默认于基线对齐，留给类似于P字母等的）

盒子模型

1. 盒子元素

包括：边框（border）、内边距(padding)、外边距(margin)、实际内容(content)

padding：容器边框到内部另一容器边框的距离；

margin：容器边框到外部另一容器边框的距离；

盒子	语法	Note
边框	border-top; border-left; border:right; bottom;(可以单独设置) border-width: xpx; border-style: solid \| dashed \| dotted； border-color: 颜色值； border: 1px solid red;(无顺序) border-collapse: collapse;(相邻边框合并在一起)	边框会影响盒子的实际大小
padding	padding-left; padding-right; padding-top; padding-bottom padding:xpx ypx zpx wpx; 1个值：上下左右均为x; 2个值：上下为x，左右为y； 3个值：上为x，左右为y，下为z； 4个值：上右下左（顺时针）	1. padding会影响盒子大小 2. 如果不指定盒子高和宽属性，则此时padding不会撑开盒子
margin	与padding一致 margin: 0 auto;(盒子居中，前提是盒子有设置宽度)	1. 行内元素或者行内块元素水平居中（给其父元素添加text-align: center） 2. 外边距合并：相邻盒子的相邻边同时设置margin，会以较大的为准，并不是两者之和(一般只设置一个) 3. 两个嵌套关系（父子）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距(1. 父元素设置边框 2.父元素定义内边距3. 添加overflow: hidden;4. 浮动、固定、绝对定位等)
content	盒子里面的内容
清楚内外边距	* {margin:0;padding:0;}

2. 浮动

语法: 选择器 {float：none | left | right;}(任何元素都可以添加浮动)

浮动特性：

浮动元素会脱离标准流（脱标）
浮动的盒子不再保留原来的位置
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性(行内元素添加了浮动，则不需要转换模式)

Note:

浮动和标准流的父盒子搭配
一个盒子浮动了，理论上其他兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

3. 清除浮动

原因：由于父盒子很多情况下不方便给高度，但浮动后不占有位置，最后父盒子高度为0，此时会影响下面的标准流盒子，清除浮动后，父级盒子会自动检测子盒子的高度。选择器{clear:left | right | both}

方法：

3.1. 额外标签法（隔墙法）

在浮动元素的末尾添加一个空标签，例如<div style="clear:both"><div>或者（br是另类）(该标签必须是块级元素)

3.2. 父级添加overflow

给父元素添加overflow属性 overflow="hidden | auto | scroll"

3.3. :after伪元素法（父级元素添加）

.clearfix:after{content:"";display: block; hingt: 0; clear: both; visibility: hidden;}

.clearfix{*zoom:1;}IE6/7兼容

3.4. 双伪元素清除浮动（父级元素添加）

.clearfix:before,.clearfix:after {content:"";display:table;}

.clearfix:after {clear:both;}

.clearfix {*zoom:1;}

定位

1. 定位=定位模式+边偏移

定位模式：

position=static（静态定位） | relative（相对定位）| absolute(绝对定位) | fixed（固定定位）

定位模式	说明
静态定位（了解）选择器 {position： static;}	默认定位（无定位）
相对定位选择器 {position：relative;}	1.相对于自己原来的位置移动 2.原来的位置继续保留（不脱标）
绝对定位选择器 {position：absolute;}	1. 相对于祖先元素来移动 2. 若没有祖先元素或祖先元素未定位，则以浏览器为准定位 3. 如果祖先元素有定位，则以最近一级的有定位的元素为参考定位 4. 绝对定位不占有原来的位置（脱标）
固定定位选择器 {position： fixed;}	1. 以浏览器的可视窗口为参考点移动元素跟父元素没任何关系不随滚动条滚动 2. 不占有原先的位置脱标 3. 固定在版心两侧位置 1）让固定位置盒子left50% 2）让固定盒子margin-left版心宽度一半距离
粘性定位（了解）选择器 {position： sticky; top:10px}	1. 以浏览器可视窗口为参考点移动元素 2. 占有原先的位置 3. 必须添加top、left、right、bottom其中一个才有效 4. 网页中常见的效果一般通过JS来设计

边偏移：

top | bottom | left | right

如果一个盒子既有left 又有right则执行左；既有top又有bottom则执行上

2. 子绝父相

子绝，不占位置，可以在父盒子里任意地方，父亲需加定位限制，因需要占有位置，故需加相对定位

3.定位叠放次序

选择器 {z-index:1;}

1)数值越大，盒子越靠上

2）属性值相同，则按照书写顺序，后来居上

3）数字后面不能加单位

4）只有定位的盒子才有该属性

4.定位拓展

加了绝对定位的盒子不能通过margin：0 auto水平居中，相对定位可以。

绝对定位的盒子居中（垂直＋水平）	1.left：50%；让盒子的左侧移动到父级元素的水平中心位置 2.margin-left：-100px;让盒子向左移动自身宽度的一半
定位的特殊性	1.行内元素添加绝对或者固定定位，可以直接设置高和宽 2. 块级元素添加绝对或者固定定位，如果不给宽高，默认是内容大小 3.浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题 4.绝对定位（固定定位）会完全压住盒子（浮动元素只会压住下面标准流盒子，但不会压住盒子内部的文字或图片）

5.元素的显示与隐藏

语法	note
display:none \| block;	1. none:隐藏对象(隐藏后不再占有原来的位置) 2. block:显示元素
visibility:visible \| hidden:	1. visible:元素可见 2. hidden元素隐藏(隐藏后继续占有原来的位置)
overflow: visible \| hidden \| scroll \| auto;	1. visible:不剪切内容也不添加滚动条 2. hidde：超出部分隐藏 3. scroll：不管超出与否，均显示滚动条 4.auto：超出显示滚动条，不超出不显示滚动条

CSS高级技巧

精灵图

目的	原理	Notes
有效的减少服务器接收和发送请求的次数，提高页面的加载速度	网页中的一些小背景图像整合到一张大图中，通过背景位置来调整位置	1. 主要针对于小的背景图片使用 2. 主要借助于背景位置来实现——background-position 3. 一般情况下都是负值

字体图标

目的	使用步骤	Notes
对工作中图标部分技术的提升和优化，减小服务器的负荷	1. 字体图标下载 2. 字体图标引入 3. 字体图标追加	1. 主要用于显示网页中通用、常用的一些小图标 2. 展示的是图标，本质属于字体，具有相同的属性,

一、下载：

http://icomoon.io & http://www.iconfont

二、引入：(以icomoon为例)

把下载包里面的fonts文件夹放入页面根目录下
在CSS样式中全局声明字体：通过CSS引入到页面中，一定注意字体文件路径问题。

复制style.css文件中开头到font-display:blokc;}

image-20210224005157708
html标签内添加小图标(复制Demo中对应图标后面的小框)

<span>复制过来</span>
span {font-family:"icomoon";}

三、字体图标的追加

把压缩包里的selection.json从新上传，选中自己想要的图标，从新下载压缩包，并替换原来的文件——icomoon.io→icomoon app→import icons(选择selection.json)→Generate font

CSS三角做法

div {
	width: 0;
	height: 0;
	line-height: 0;<!--兼容性，高版本可不写-->
	font-size: 0;<!--兼容性，高版本可不写-->
	border: 50px solid transparent;
	border-left-color: pink:
}

CSS用户界面样式

属性	属性值	描述
cursor	default: 小白，默认 pointer：小手 move: 移动 text: 文本 not-allowde: 禁止	更改用户鼠标样式
outline	0或者none	取消表单的轮廓线
resize	none	防止拖拽文本域

溢出的文字省略号显示

(单行如下，多行了解即可，此处省略)
white-sapce: nowrap;(强制一行显示)
overfolw: hidden;（溢出隐藏）
text-overflow: ellipsis;（溢出部分省略号代替）

常见布局技巧

margin负值应用

margin：-1px；（取消盒子细线边框重叠的问题）

鼠标经过某个盒子时显示四个边框，可以通过提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
文字围绕浮动元素

文字不会环绕浮动的图片，而不会被压住。
行内块巧妙运用

image-20210301222027830

HTML

HTML框架

常用标签

基础标签

格式标签

表单标签

图像及超链接标签

列表标签

表格标签

样式/节标签

元信息

CSS

CSS基础知识

初识CSS

1. CSS结构

2. CSS三大特性

3. Emmet语法

4. CSS的元素显示模式（2+1）

5. CSS属性书写顺序

6. CSS引入方式

选择器

1. 基础选择器

1.1 标签选择器

1.2 类选择器(class)

1.3 id选择器

1.4 通配符选择器

2. 复合选择器

2.1 后 代选择器(全部后代元素)

2.2 子选择器（亲儿子）

2.3 并集选择器

2.4 伪类选择器（向某些选择器添加特殊效果）

CSS属性

1. CSS字体属性

2. CSS文本属性

3. css背景

4. 圆角边框&盒子阴影

5. vertical-align属性

盒子模型

1. 盒子元素

2. 浮动

3. 清除浮动

3.1. 额外标签法（隔墙法）

3.2. 父级添加overflow

3.3. :after伪元素法（父级元素添加）

3.4. 双伪元素清除浮动（父级元素添加）

定位

1. 定位=定位模式+边偏移

2. 子绝父相

3.定位叠放次序

4.定位拓展

5.元素的显示与隐藏

CSS高级技巧

精灵图

字体图标

CSS三角做法

CSS用户界面样式

溢出的文字省略号显示

常见布局技巧

2.1 后代选择器(全部后代元素)