Matplotlib从入门到高级4-曲线和标记的设置

D曲线绘制是Matplotlib绘图的最基本功能，也是用得最多、最重要的绘图功能之一，本文开始详细介绍Matplotlib 2D曲线绘图功能。我的介绍主要以面向对象的编码风格为主，但会在文章的末尾附上相应的pyplot风格的源代码，供大家查阅、对比。我们先看一段代码：

import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(0, 10, 100)
y = 4 + 2 * np.sin(2 * x)

fig, ax = plt.subplots()
ax.plot(x, y)

plt.show()

代码运行效果如下：

基本曲线绘图

这个绘图中我们没有作任何设置，一切交给Matplotlib处理。我们只是看到了绘制出的曲线的样子。但这与我们所想要的效果可能差异较大。所以我们还需要对图形进行一些自定义。

不管我们想生成什么样的图形，在Matplotlib当中，大致都可以总结为三步：一是构造绘图用的数据（Matplotlib推荐numpy数据，本系列介绍Matplotlib绘图，暂不涉及numpy的相关内容，留待后续有空余时吧）；二是根据数据的特点选择适当的绘图方法并绘制出数据的图形；第三步则是对绘制的图形进行自定义设置或者美化以达到满足我们获得精美的输出图形的要求。

在上面的绘图中，我们仅仅做到了第二步，下面我们来进行一些自定义，而Matplotlib为此提供了非常丰富的功能。

更改曲线颜色

你可能最想先尝试一下换个颜色看看曲线是什么样的，这有很多种方法。首先，我们可以在绘制图形的时候直接指定它，我们把绘图的代码改成下面的样子：

ax.plot(x, y,'r')

这里的 ‘r’ 是 “red”的简写，表示将曲线的颜色指定为红色。也可以写成下面的样子，这样可读性更高：

ax.plot(x, y,color='red')

这些代码都是以绘图参数的方式直接指定曲线颜色。当我们只对曲线的有限几个属性感兴趣时，使用直接参数指定的方式会让代码看起来非常简单洁明了。plot支持的参数有几十个之多，如果你关注的属性比较多，再在绘图时直接指定就不太合适。这时的最好方式是在绘图完成之后再专门指定。为此我们把代码再作修改：

line1,=ax.plot(x, y,color=’b’)
line1.set_color('r')

plot 返回一个 Line2D 对象的列表，我们使用一个带有“ line1, ”的元组来解包，随后使用 set_color() 代码设置line1 曲线的颜色，请注意这里设置的颜色会覆盖 plot 绘图函数当中指定的颜色。上面三段代码各自独立运行之后的效果是一样的。如下：

设置曲线的颜色

为了提高效率，Matplotlib模仿MATLAB支持常用颜色的单字母代码缩写。

字符	颜色
'b'	blue
'g'	green
'r'	red
'c'	cyan
'm'	magenta
'y'	yellow
'k'	black
'w'	white

你还可以使用不区分大小写的十六进制 RGB 或 RGBA 字符串（如：'#0f0f0f'），或者不区分大小写的 X11/CSS4 颜色名称（如：'aquamarine'），以及来自 xkcd color survey 的不区分大小写的颜色名称（如：'xkcd:sky blue'）等等。更为详细的颜色规范，你可以查阅官方文档。但对于Python办公而言，掌握这些应该已经足够了。

更改曲线的线型和线宽

与曲线颜色一样，线型和线宽也有多种方式来指定：

line1,=ax.plot(x, y,color='b',linestyle='--',linewidth=1)

line1.set_color('r')
line1.set_linestyle('-.')
line1.set_linewidth(2.0)

这里我们最终指定的线宽为2.0磅，绘图函数当中指定的线宽被后续指定的属性值覆盖了。而线型在这里由set_linestyle()指定，其中“--”和“-.”都是Matplotlib中支持的线型，“--”表示虚线，而“-.”则是点划线。而Matplotlib默认的线型“-”实线，除此之外，Matplotlib还支持“:”点线。

自定义曲线上的标记点

我们绘制曲线之前构造的数据点在曲线上也可以标记出来，这些标记点有不同的风格。同样可以以不同的方式来设置它：

带标记点的曲线

注意第一行代码当中的“r:o”字符串，它是一种简写形式，是将颜色、线型和标记点形状在一个字符串中同时设置的方式，其中的“r”表示红色，“:”表示点线，“o”表示标记点为大圆点。只有在颜色使用单字符代码时才可以像上面这样组合起来同时表示三个属性。默认情况下，标记点的颜色与线型颜色相同，但可以单独设置与曲线不同的颜色，不仅如此，标记点的边线颜色和中间填充颜色也都可以单独设置。上面第二行代码我们就使用set_markeredgecolor('b')将标记点边线颜色设置为了蓝色。与标记点设置相关的还有set_marker（设置标记点形状）、set_markeredgewidth（设置标记点边线宽度）、set_markerfacecolor（设置标记点中间的填充色）、set_markersize （设置标记点的大小）等。下面是我整理的Matplotlib支持的所有标记点形状。

标记marker	描述
‘o’	大圆点
‘.’	小圆点
‘,’	像素点（这个点看起来最小）
‘^’	一角朝上的三角形
‘v’	一角朝下的三角形
‘<’	一角朝左的三角形
‘>’	一角朝右的三角形
‘1’	下箭头
‘2’	上箭头（更像奔驰车标）
‘3’	左箭头
‘4’	右箭头
‘8’	八边形
0	靠左的水平刻度线
1	靠右的水平刻度线
2	靠上的垂直刻度线
3	靠下的垂直刻度线
4	左插入号（小左尖三角形）
5	右插入号（小右尖三角形）
6	上插入号（小上尖三角形）
7	下插入号（小下尖三角形）
8	左插入号（小左尖三角形）-基点为中心
9	右插入号（小右尖三角形）-基点为中心
10	上插入号（小上尖三角形）-基点为中心
11	下插入号（小下尖三角形）-基点为中心
‘s’	正方形
‘D’	菱形
‘d’	小菱形
‘*’	五角星
‘p’	五边形
‘h’	六边形1（尖头垂直）
‘H’	六边形2（尖头水平）
‘_’	水平线
‘|‘	垂直线
‘+’	加号  
‘x’	小x形
‘X’	大X形
‘$...$’	支持LaTex公式
‘None	无

本文先介绍到此，后续进一步介绍坐标轴、图例和网格线的设置。最后附上本文pyplot风格的绘图代码：

import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(0, 10, 100)
y = 4 + 2 * np.sin(2 * x)

#mec是markeredgecolor的简写，ms是markersize的简写，pyplot 模块中没有对应的 set_函数，只能在绘图函数中直接设置。
plt.plot(x, y,'r:o',linewidth=2,mec='b',ms=8)

plt.show()

显然这种简单绘图pyplot风格要简洁一些，还是很有优势的。

如果觉得我的内容对您有帮助，别忘了点赞关注加转发。您的支持是我继续写作的动力。

css实现的30种形状

圆形

.circle{
 width:100px;
 height: 100px;
 background: black;
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 border-radius: 100%;
}

椭圆形

.oval{
 width: 200px;
 height: 100px;
 background: black;
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 border-radius: 100%;
}

向上的三角形

.triangle_up{
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid black;
}

向下的三角形

.triangle_down{
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid black;
}

向左的三角形

.triangle_left{
 width: 0;
 height: 0;
 border-right: 100px solid red;
 border-top: 50px solid transparent;
 border-bottom: 50px solid transparent;
}

向右的三角形

.triangle_right{
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-bottom: 50px solid transparent;
 border-left: 100px solid red;
}

左上

.triangle_left_top{
 width: 0;
 height: 0;
 border-top: 100px solid red;
 border-right: 100px solid transparent;
}

左下

.triangle_left_bottom{
 width: 0;
 height: 0;
 border-bottom: 100px solid red;
 border-right: 100px solid transparent;
}

右上

.triangle_right_top{
 width: 0;
 height: 0;
 border-top: 100px solid red;
 border-left: 100px solid transparent;
}

右下

.triangle_right_bottom{
 width: 0;
 height: 0;
 border-bottom: 100px solid red;
 border-left: 100px solid transparent;
}

弯尾箭头

.Curved_Tail_Arrow{
 position: relative;
 width: 0;
 height: 0;
 border-top: 9px solid transparent;
 border-right: 9px solid red;
 -webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 -o-transform: rotate(10deg);
}
.Curved_Arrow:after {
 content: "";
 position: absolute;
 border: 0 solid transparent;
 border-top: 3px solid red;
 border-radius: 20px 0 0 0;
 top: -12px;
 left: -9px;
 width: 12px;
 height: 12px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
}

梯形

.trapezoid{
 border-bottom: 100px solid red;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 height: 0;
 width: 100px;
}

平行四边形

.parallelogram {
 width: 150px;
 height: 100px;
 -webkit-transform: skew(20deg);
 -moz-transform: skew(20deg);
 -o-transform: skew(20deg);
 background: red;
}

五角星

.star-five {
 margin: 50px 0;
 position: relative;
 display: block;
 color: red;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid red;
 border-left: 100px solid transparent;
 -moz-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -o-transform: rotate(35deg);
}
.star-five:before {
 border-bottom: 80px solid red;
 border-left: 30px solid transparent;
 border-right: 30px solid transparent;
 position: absolute;
 height: 0;
 width: 0;
 top: -45px;
 left: -65px;
 display: block;
 content: '';
 -webkit-transform: rotate(-35deg);
 -moz-transform: rotate(-35deg);
 -ms-transform: rotate(-35deg);
 -o-transform: rotate(-35deg);
}
.star-five:after {
 position: absolute;
 display: block;
 color: red;
 top: 3px;
 left: -105px;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid red;
 border-left: 100px solid transparent;
 -webkit-transform: rotate(-70deg);
 -moz-transform: rotate(-70deg);
 -ms-transform: rotate(-70deg);
 -o-transform: rotate(-70deg);
 content: '';
}

五边形

.pentagon {
 position: relative;
 width: 54px;
 border-width: 50px 18px 0;
 border-style: solid;
 border-color: red transparent;
}
.pentagon:before {
 content: "";
 position: absolute;
 height: 0;
 width: 0;
 top: -85px;
 left: -18px;
 border-width: 0 45px 35px;
 border-style: solid;
 border-color: transparent transparent red;
}

六边形

.hexagon {
 width: 100px;
 height: 55px;
 background: red;
 position: relative;
}
.hexagon:before {
 content: "";
 position: absolute;
 top: -25px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 25px solid red;
}
.hexagon:after {
 content: "";
 position: absolute;
 bottom: -25px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 25px solid red;
}

心形

.heart {
 position: relative;
 width: 100px;
 height: 90px;
}
.heart:before,
.heart:after {
 position: absolute;
 content: "";
 left: 50px;
 top: 0;
 width: 50px;
 height: 80px;
 background: red;
 -moz-border-radius: 50px 50px 0 0;
 border-radius: 50px 50px 0 0;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 -o-transform-origin: 0 100%;
 transform-origin: 0 100%;
}
.heart:after {
 left: 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 -ms-transform-origin: 100% 100%;
 -o-transform-origin: 100% 100%;
 transform-origin :100% 100%;
}

无限符

.infinity {
 position: relative;
 width: 212px;
 height: 100px;
}
.infinity:before,
.infinity:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 60px;
 height: 60px;
 border: 20px solid red;
 -moz-border-radius: 50px 50px 0 50px;
 border-radius: 50px 50px 0 50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
.infinity:after {
 left: auto;
 right: 0;
 -moz-border-radius: 50px 50px 50px 0;
 border-radius: 50px 50px 50px 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}

菱形

.diamond {
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-bottom-color: red;
 position: relative;
 top: -50px;
}
.diamond:after {
 content: '';
 position: absolute;
 left: -50px;
 top: 50px;
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-top-color: red;
}

钻石盾牌

.diamond-shield {
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-bottom: 20px solid red;
 position: relative;
 top: -50px;
}
.diamond-shield:after {
 content: '';
 position: absolute;
 left: -50px; top: 20px;
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-top: 70px solid red;
}

竖菱形

.diamond-narrow {
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-bottom: 70px solid red;
 position: relative;
 top: -50px;
}
.diamond-narrow:after {
 content: '';
 position: absolute;
 left: -50px; top: 70px;
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-top: 70px solid red;
}

砖石形

.cut-diamond {
 border-style: solid;
 border-color: transparent transparent red transparent;
 border-width: 0 25px 25px 25px;
 height: 0;
 width: 50px;
 position: relative;
 margin: 20px 0 50px 0;
}
.cut-diamond:after {
 content: "";
 position: absolute;
 top: 25px;
 left: -25px;
 width: 0;
 height: 0;
 border-style: solid;
 border-color: red transparent transparent transparent;
 border-width: 70px 50px 0 50px;
}

鸡蛋

.egg {
 display:block;
 width: 126px;
 height: 180px;
 background-color: red;
 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
 border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
}

吃豆人

.pacman {
 width: 0px;
 height: 0px;
 border-right: 60px solid transparent;
 border-top: 60px solid red;
 border-left: 60px solid red;
 border-bottom: 60px solid red;
 border-top-left-radius: 60px;
 border-top-right-radius: 60px;
 border-bottom-left-radius: 60px;
 border-bottom-right-radius: 60px;
}

聊天框

.talk_bubble {
 width: 120px;
 height: 80px;
 background: red;
 position: relative;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
.talk_bubble:before {
 content:"";
 position: absolute;
 right: 100%;
 top: 26px;
 width: 0;
 height: 0;
 border-top: 13px solid transparent;
 border-right: 26px solid red;
 border-bottom: 13px solid transparent;
}

爆炸形状

.burst-12 {
 background: red;
 width: 80px;
 height: 80px;
 position: relative;
 text-align: center;
}
.burst-12:before, .burst-12:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: red;
}
.burst-12:before {
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
}
.burst-12:after {
 -webkit-transform: rotate(60deg);
 -moz-transform: rotate(60deg);
 -ms-transform: rotate(60deg);
 -o-transform: rotate(60deg);
}

阴阳八卦

.yin-yang {
 width: 96px;
 height: 48px;
 background: #eee;
 border-color: red;
 border-style: solid;
 border-width: 2px 2px 50px 2px;
 border-radius: 100%;
 position: relative;
}
.yin-yang:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 background: #eee;
 border: 18px solid red;
 border-radius: 100%;
 width: 12px;
 height: 12px;
}
.yin-yang:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 background: red;
 border: 18px solid #eee;
 border-radius:100%;
 width: 12px;
 height: 12px;
}

徽章丝带

.badge-ribbon {
 position: relative;
 background: red;
 height: 100px;
 width: 100px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
}
.badge-ribbon:before,
.badge-ribbon:after {
 content: '';
 position: absolute;
 border-bottom: 70px solid red;
 border-left: 40px solid transparent;
 border-right: 40px solid transparent;
 top: 70px;
 left: -10px;
 -webkit-transform: rotate(-140deg);
 -moz-transform: rotate(-140deg);
 -ms-transform: rotate(-140deg);
 -o-transform: rotate(-140deg);
}
.badge-ribbon:after {
 left: auto;
 right: -10px;
 -webkit-transform: rotate(140deg);
 -moz-transform: rotate(140deg);
 -ms-transform: rotate(140deg);
 -o-transform: rotate(140deg);
}

搜索

.magnifying-glass{
 font-size: 10em; /* This controls the size. */
 display: inline-block;
 width: 0.4em;
 height: 0.4em;
 border: 0.1em solid red;
 position: relative;
 border-radius: 0.35em;
}
.magnifying-glass::before{
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: red;
 width: 0.35em;
 height: 0.08em;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
}

月亮

.moon {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 box-shadow: 15px 15px 0 0 red;
}

十字架

. DIV和CSS样式

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

DIV是html的一个标签 css是一个样式表

2. 样式表类型

2.1. 嵌入样式表

<!DOCTYPE html>

<html>

<head>

<style>

.demo1{

color: red;

width: 100px;

height: 100px;

background: blue;

}

</style>

</head>

<body>

demo1

</div>

</body>

</html>

2.2. 外部样式

@import url

@import url("g.css");

.demo1{

color: red;

width: 100px;

height: 100px;

background: blue;

}

2.3. 内联样式

3. 注释

/* */ 注释内容

4. 样式选择器

元素选择器 div{属性:值}

ID选择器 #id{属性:值}

class选择器 .类名{属性:值}

子选择器元数空格元素{属性:值}

后代选择器元数 > 元数{属性:值}

属性选择器元素[属性]{}

通配符选择器 *{属性:值}

群组选择器

5. 背景

background-color 规定要使用的背景颜色。

background-position 规定背景图像的位置。

background-size 规定背景图片的尺寸。

background-repeat 规定如何重复背景图像。

background-origin 规定背景图片的定位区域。

background-clip 规定背景的绘制区域。

repeat 默认。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

inherit 规定应该从父元素继承 background-repeat 属性的设置。

background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。

background-image 规定要使用的背景图像。

inherit 规定应该从父元素继承 background 属性的设置。

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

简写

background: url(images/bg.gif) no-repeat top right

背景图片的滚动

背景图片是否随着内容的滚动而滚动由background-attachment设置

background-attachment:fixed; 固定，不随内容的滚动而滚动

background-attachment:scroll; 滚动，随内容的滚动而滚动

6. 边框

边框颜色 border-color:#000

边框宽度 border-width:1px;

border-left 设置左边框，一般单独设置左边框样式使用

border-right 设置右边框，一般单独设置右边框样式使用

border-top 设置上边框，一般单独设置上边框样式使用

border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

边框样式值如下：

none : 　无边框。与任何指定的border-width值无关

hidden : 　隐藏边框。IE不支持

dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

solid : 　实线边框（常用）

double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

上右下左

groove : 　根据border-color的值画3D凹槽

ridge : 　根据border-color的值画菱形边框

inset : 　根据border-color的值画3D凹边

outset : 　根据border-color的值画3D凸边

上右下左

简写

border:5px solid red;

7. 文字属性

color:red; 文字颜色 #ffeeees

font-size:12px; 文字大小

font-weight:bolds 文字粗细(bold/normal)

font-family:”宋体”文字字体

font-variant:small-caps小写字母以大写字母显示

8. 文本属性

text-align:center; 文本对齐(right/left/center)

line-height:10px; 行间距(可通过它实现文本的垂直居中)

text-indent:20px; 首行缩进

text-decoration:none;

文本线(none/underline/overline/line-through) underline/overline/line-through; 定义文本上的下划线/上划线/中划线

letter-spacing: 字间距

9. 列表

list-style-type 设置列表项标记的类型。参阅：list-style-type 中可能的值。

list-style-position 设置在何处放置列表项标记。参阅：list-style-position 中可能的值。

list-style-image 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。

inherit 规定应该从父元素继承 list-style 属性的值

| upper-alpha | none | inherit

disc: 点

circle: 圆圈

square: 正方形

decimal: 数字

decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, ..., 98, 99

lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...

upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...

lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...

lower-latin: 小写拉丁文，例如: a, b, c, ... z

upper-latin: 大写拉丁文，例如: A, B, C, ... Z

armenian: 亚美尼亚数字

georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...

lower-alpha: 小写拉丁文，例如: a, b, c, ... z

upper-alpha: 大写拉丁文，例如: A, B, C, ... Z

none: 无(取消所有的list样式)

inherit:继承

list-style-position

inside

列表项目标记放置在文本以内，且环绕文本根据标记对齐。

outside

默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

简写

list-style:square inside url('/i/arrow.gif');

10. 超链接

a{text-decoration: none;}

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

11. 盒子模型

盒子模型的组成部分

外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性

自身的身高 width height

内边距 padding

盒子边框 border

与其他盒子的距离 margin 外边距

12. Border 边框

常见的写法 border:1px solid #foo;

单独属性:

border-widh:

border-style:

dotted 点状虚线

dashed（虚线）

solid（实线）

double（双实线）

border-color(颜色)

12.1. margin padding

padding:内边距

值：像素/厘米等长度单位、百分比

padding:10px; 上下左右

padding:10px 10px; 上下左右

padding:10px 10px 10px; 上左右下

padding:10px 10px 10px 10px; 上右下左（设置4个点-->顺时针方向）

单独属性

padding-top:

padding-right:

padding-bottom:

padding-left:

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

margin 外边距

值：与padding相同

单独属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

margin

margin:10px 上下左右都会腾出10px出来

margin:0px auto; 居中

13. float 脱离文档流浮动

left 元素向左浮动。

right 元素向右浮动

清除浮动

clear: both;

left

right

14. 块级元素、行内元素

块级元素：

他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；

块级元素可以设置width、height属性；

块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；

行内元素：

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；

行内元素的width、height属性则无效；

行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

行内元素转换

display:none; 不显示

display:block;变成块级元素

display:inline; 变成行内元素

display:inline-block;以块级元素样式展示，以行级元素样式排列

块级元素(block element）

address 地址

center 举中对齐块

div- 常用块级容易

dl 定义列表

form 交互表单（只能用来容纳其它块元素）

h标签

hr 水平分隔线

ol 无需列表

ul有序列表

p 段落

pre 格式化文本

行内元素：

a - 锚点

b - 粗体(不推荐)

br- 换行

code - 计算机代码(在引用源码的时候需要)

em - 强调

i - 斜体

img - 图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）

当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，设置img的css为{margin：0；display：block；border：0px}

input - 输入框

label - 表格标签

select - 项目选择

strong - 粗体强调

textarea - 多行文本输入框

u - 下划线

var - 定义变量

替换元素有如下：（和img一样的设置方法）

15. 溢出

overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

16. 定位

position

static静态定位（不对它的位置进行改变，在哪里就在那里）

默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者z-index 声明）。

fixed固定定位（参照物--浏览器窗口）---做弹窗广告用到

生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。

relative（相对定位）（参照物以他本身）

生成相对定位的元素，相对于其正常位置进行定位。

absolute（绝对定位）(除了static都可以，找到参照物-->与它最近的已经有定位的父元素进行定位)

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

在线咨询

上一篇：干货：网页跳转的写法大全及其用途区别
下一篇：成功利用python爬取网页html表格，链接不变，页码变，nice

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商