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小時內與您取得聯系。

整合營銷服務商