整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
D曲線繪制是Matplotlib繪圖的最基本功能，也是用得最多、最重要的繪圖功能之一，本文開始詳細(xì)介紹Matplotlib 2D曲線繪圖功能。我的介紹主要以面向?qū)ο蟮木幋a風(fēng)格為主，但會(huì)在文章的末尾附上相應(yīng)的pyplot風(fēng)格的源代碼，供大家查閱、對(duì)比。我們先看一段代碼：
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()代碼運(yùn)行效果如下：
基本曲線繪圖
這個(gè)繪圖中我們沒有作任何設(shè)置，一切交給Matplotlib處理。我們只是看到了繪制出的曲線的樣子。但這與我們所想要的效果可能差異較大。所以我們還需要對(duì)圖形進(jìn)行一些自定義。
不管我們想生成什么樣的圖形，在Matplotlib當(dāng)中，大致都可以總結(jié)為三步：一是構(gòu)造繪圖用的數(shù)據(jù)（Matplotlib推薦numpy數(shù)據(jù)，本系列介紹Matplotlib繪圖，暫不涉及numpy的相關(guān)內(nèi)容，留待后續(xù)有空余時(shí)吧）；二是根據(jù)數(shù)據(jù)的特點(diǎn)選擇適當(dāng)?shù)睦L圖方法并繪制出數(shù)據(jù)的圖形；第三步則是對(duì)繪制的圖形進(jìn)行自定義設(shè)置或者美化以達(dá)到滿足我們獲得精美的輸出圖形的要求。
在上面的繪圖中，我們僅僅做到了第二步，下面我們來進(jìn)行一些自定義，而Matplotlib為此提供了非常豐富的功能。
你可能最想先嘗試一下?lián)Q個(gè)顏色看看曲線是什么樣的，這有很多種方法。首先，我們可以在繪制圖形的時(shí)候直接指定它，我們把繪圖的代碼改成下面的樣子：
ax.plot(x, y,'r')這里的 ‘r’ 是 “red”的簡(jiǎn)寫，表示將曲線的顏色指定為紅色。也可以寫成下面的樣子，這樣可讀性更高：
ax.plot(x, y,color='red')這些代碼都是以繪圖參數(shù)的方式直接指定曲線顏色。當(dāng)我們只對(duì)曲線的有限幾個(gè)屬性感興趣時(shí)，使用直接參數(shù)指定的方式會(huì)讓代碼看起來非常簡(jiǎn)單潔明了。plot支持的參數(shù)有幾十個(gè)之多，如果你關(guān)注的屬性比較多，再在繪圖時(shí)直接指定就不太合適。這時(shí)的最好方式是在繪圖完成之后再專門指定。為此我們把代碼再作修改：
line1,=ax.plot(x, y,color=’b’)
line1.set_color('r')plot 返回一個(gè) Line2D 對(duì)象的列表，我們使用一個(gè)帶有“ line1, ”的元組來解包，隨后使用 set_color() 代碼設(shè)置line1 曲線的顏色，請(qǐng)注意這里設(shè)置的顏色會(huì)覆蓋 plot 繪圖函數(shù)當(dāng)中指定的顏色。上面三段代碼各自獨(dú)立運(yùn)行之后的效果是一樣的。如下：
設(shè)置曲線的顏色
為了提高效率，Matplotlib模仿MATLAB支持常用顏色的單字母代碼縮寫。
字符 顏色
'b' blue
'g' green
'r' red
'c' cyan
'm' magenta
'y' yellow
'k' black
'w' white你還可以使用不區(qū)分大小寫的十六進(jìn)制 RGB 或 RGBA 字符串（如：'#0f0f0f'），或者不區(qū)分大小寫的 X11/CSS4 顏色名稱（如：'aquamarine'），以及來自 xkcd color survey 的不區(qū)分大小寫的顏色名稱（如：'xkcd:sky blue'）等等。更為詳細(xì)的顏色規(guī)范，你可以查閱官方文檔。但對(duì)于Python辦公而言，掌握這些應(yīng)該已經(jīng)足夠了。
與曲線顏色一樣，線型和線寬也有多種方式來指定：
line1,=ax.plot(x, y,color='b',linestyle='--',linewidth=1)
line1.set_color('r')
line1.set_linestyle('-.')
line1.set_linewidth(2.0)這里我們最終指定的線寬為2.0磅，繪圖函數(shù)當(dāng)中指定的線寬被后續(xù)指定的屬性值覆蓋了。而線型在這里由set_linestyle()指定，其中“--”和“-.”都是Matplotlib中支持的線型，“--”表示虛線，而“-.”則是點(diǎn)劃線。而Matplotlib默認(rèn)的線型“-”實(shí)線，除此之外，Matplotlib還支持“:”點(diǎn)線。
我們繪制曲線之前構(gòu)造的數(shù)據(jù)點(diǎn)在曲線上也可以標(biāo)記出來，這些標(biāo)記點(diǎn)有不同的風(fēng)格。同樣可以以不同的方式來設(shè)置它：
帶標(biāo)記點(diǎn)的曲線
注意第一行代碼當(dāng)中的“r:o”字符串，它是一種簡(jiǎn)寫形式，是將顏色、線型和標(biāo)記點(diǎn)形狀在一個(gè)字符串中同時(shí)設(shè)置的方式，其中的“r”表示紅色，“:”表示點(diǎn)線，“o”表示標(biāo)記點(diǎn)為大圓點(diǎn)。只有在顏色使用單字符代碼時(shí)才可以像上面這樣組合起來同時(shí)表示三個(gè)屬性。默認(rèn)情況下，標(biāo)記點(diǎn)的顏色與線型顏色相同，但可以單獨(dú)設(shè)置與曲線不同的顏色，不僅如此，標(biāo)記點(diǎn)的邊線顏色和中間填充顏色也都可以單獨(dú)設(shè)置。上面第二行代碼我們就使用set_markeredgecolor('b')將標(biāo)記點(diǎn)邊線顏色設(shè)置為了藍(lán)色。與標(biāo)記點(diǎn)設(shè)置相關(guān)的還有set_marker（設(shè)置標(biāo)記點(diǎn)形狀）、set_markeredgewidth（設(shè)置標(biāo)記點(diǎn)邊線寬度）、set_markerfacecolor（設(shè)置標(biāo)記點(diǎn)中間的填充色）、set_markersize （設(shè)置標(biāo)記點(diǎn)的大小）等。下面是我整理的Matplotlib支持的所有標(biāo)記點(diǎn)形狀。
標(biāo)記marker 描述
‘o’ 大圓點(diǎn)
‘.’ 小圓點(diǎn)
‘,’ 像素點(diǎn)（這個(gè)點(diǎn)看起來最小）
‘^’ 一角朝上的三角形
‘v’ 一角朝下的三角形
‘<’ 一角朝左的三角形
‘>’ 一角朝右的三角形
‘1’ 下箭頭
‘2’ 上箭頭（更像奔馳車標(biāo)）
‘3’ 左箭頭
‘4’ 右箭頭
‘8’ 八邊形
0 靠左的水平刻度線
1 靠右的水平刻度線
2 靠上的垂直刻度線
3 靠下的垂直刻度線
4 左插入號(hào)（小左尖三角形）
5 右插入號(hào)（小右尖三角形）
6 上插入號(hào)（小上尖三角形）
7 下插入號(hào)（小下尖三角形）
8 左插入號(hào)（小左尖三角形）-基點(diǎn)為中心
9 右插入號(hào)（小右尖三角形）-基點(diǎn)為中心
10 上插入號(hào)（小上尖三角形）-基點(diǎn)為中心
11 下插入號(hào)（小下尖三角形）-基點(diǎn)為中心
‘s’ 正方形
‘D’ 菱形
‘d’ 小菱形
‘*’ 五角星
‘p’ 五邊形
‘h’ 六邊形1（尖頭垂直）
‘H’ 六邊形2（尖頭水平）
‘_’ 水平線
‘|‘ 垂直線
‘+’ 加號(hào)
‘x’ 小x形
‘X’ 大X形
‘$...$’ 支持LaTex公式
‘None 無 本文先介紹到此，后續(xù)進(jìn)一步介紹坐標(biāo)軸、圖例和網(wǎng)格線的設(shè)置。最后附上本文pyplot風(fēng)格的繪圖代碼：
import matplotlib.pyplot as plt
import numpy as np
x = np.linspace(0, 10, 100)
y = 4 + 2 * np.sin(2 * x)
#mec是markeredgecolor的簡(jiǎn)寫，ms是markersize的簡(jiǎn)寫，pyplot 模塊中沒有對(duì)應(yīng)的 set_函數(shù)，只能在繪圖函數(shù)中直接設(shè)置。
plt.plot(x, y,'r:o',linewidth=2,mec='b',ms=8)
plt.show()顯然這種簡(jiǎn)單繪圖pyplot風(fēng)格要簡(jiǎn)潔一些，還是很有優(yōu)勢(shì)的。
如果覺得我的內(nèi)容對(duì)您有幫助，別忘了點(diǎn)贊關(guān)注加轉(zhuǎn)發(fā)。您的支持是我繼續(xù)寫作的動(dòng)力。
css實(shí)現(xiàn)的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;
}
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。 [1]
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力。
DIV是html的一個(gè)標(biāo)簽 css是一個(gè)樣式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo1{
color: red;
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="demo1">
demo1
</div>
</body>
</html>
<link rel="stylesheet" href="css/style.css"/>
@import url
@import url("g.css");
.demo1{
color: red;
width: 100px;
height: 100px;
background: blue;
}
<div style="color: blue;width: 100px;height: 100px; background: black;">demo2</div>
/* */ 注釋內(nèi)容
元素選擇器 div{屬性:值}
ID選擇器 #id{屬性:值}
class選擇器 .類名{屬性:值}
子選擇器 元數(shù) 空格 元素{屬性:值}
后代選擇器 元數(shù) > 元數(shù){屬性:值}
屬性選擇器 元素[屬性]{}
通配符選擇器 *{屬性:值}
群組選擇器
background-color 規(guī)定要使用的背景顏色。
background-position 規(guī)定背景圖像的位置。
background-size 規(guī)定背景圖片的尺寸。
background-repeat 規(guī)定如何重復(fù)背景圖像。
background-origin 規(guī)定背景圖片的定位區(qū)域。
background-clip 規(guī)定背景的繪制區(qū)域。
repeat 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。
repeat-x 背景圖像將在水平方向重復(fù)。
repeat-y 背景圖像將在垂直方向重復(fù)。
no-repeat 背景圖像將僅顯示一次。
inherit 規(guī)定應(yīng)該從父元素繼承 background-repeat 屬性的設(shè)置。
background-attachment 規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。
background-image 規(guī)定要使用的背景圖像。
inherit 規(guī)定應(yīng)該從父元素繼承 background 屬性的設(shè)置。
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
簡(jiǎn)寫
background: url(images/bg.gif) no-repeat top right
背景圖片的滾動(dòng)
背景圖片是否隨著內(nèi)容的滾動(dòng)而滾動(dòng)由background-attachment設(shè)置
background-attachment:fixed; 固定，不隨內(nèi)容的滾動(dòng)而滾動(dòng)
background-attachment:scroll; 滾動(dòng)，隨內(nèi)容的滾動(dòng)而滾動(dòng)
邊框顏色 border-color:#000
邊框?qū)挾?border-width:1px;
border-left 設(shè)置左邊框，一般單獨(dú)設(shè)置左邊框樣式使用
border-right 設(shè)置右邊框，一般單獨(dú)設(shè)置右邊框樣式使用
border-top 設(shè)置上邊框，一般單獨(dú)設(shè)置上邊框樣式使用
border-bottom 設(shè)置下邊框，一般單獨(dú)設(shè)置下邊框樣式使用,有時(shí)可將下邊框樣式作為css下劃線效果應(yīng)用。
邊框樣式值如下：
none : 無邊框。與任何指定的border-width值無關(guān)
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線（常用）
dashed : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線（常用）
solid : 實(shí)線邊框（常用）
double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值
上 右 下左
groove : 根據(jù)border-color的值畫3D凹槽
ridge : 根據(jù)border-color的值畫菱形邊框
inset : 根據(jù)border-color的值畫3D凹邊
outset : 根據(jù)border-color的值畫3D凸邊
上 右 下左
簡(jiǎn)寫
border:5px solid red;
color:red; 文字顏色 #ffeeees
font-size:12px; 文字大小
font-weight:bolds 文字粗細(xì)(bold/normal)
font-family:”宋體”文字字體
font-variant:small-caps小寫字母以大寫字母顯示
text-align:center; 文本對(duì)齊(right/left/center)
line-height:10px; 行間距(可通過它實(shí)現(xiàn)文本的垂直居中)
text-indent:20px; 首行縮進(jìn)
text-decoration:none;
文本線(none/underline/overline/line-through) underline/overline/line-through; 定義文本上的下劃線/上劃線/中劃線
letter-spacing: 字間距
list-style-type 設(shè)置列表項(xiàng)標(biāo)記的類型。參閱：list-style-type 中可能的值。
list-style-position 設(shè)置在何處放置列表項(xiàng)標(biāo)記。參閱：list-style-position 中可能的值。
list-style-image 使用圖像來替換列表項(xiàng)的標(biāo)記。參閱：list-style-image 中可能的值。
inherit 規(guī)定應(yīng)該從父元素繼承 list-style 屬性的值
取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha
| upper-alpha | none | inherit
disc: 點(diǎn)
circle: 圓圈
square: 正方形
decimal: 數(shù)字
decimal-leading-zero: 十進(jìn)制數(shù)，不足兩位的補(bǔ)齊前導(dǎo)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: 亞美尼亞數(shù)字
georgian: 喬治亞數(shù)字，例如: 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
列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊。
outside
默認(rèn)值。保持標(biāo)記位于文本的左側(cè)。列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊。
簡(jiǎn)寫
list-style:square inside url('/i/arrow.gif');
a{text-decoration: none;}
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標(biāo)劃過鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */
盒子模型的組成部分
外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）四個(gè)屬性
自身的身高 width height
內(nèi)邊距 padding
盒子邊框 border
與其他盒子的距離 margin 外邊距
常見的寫法 border:1px solid #foo;
單獨(dú)屬性:
border-widh:
border-style:
dotted 點(diǎn)狀虛線
dashed（虛線）
solid（實(shí)線）
double（雙實(shí)線）
border-color(顏色)
padding:內(nèi)邊距
值：像素/厘米等長(zhǎng)度單位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（設(shè)置4個(gè)點(diǎn)-->順時(shí)針方向）
單獨(dú)屬性
padding-top:
padding-right:
padding-bottom:
padding-left:
當(dāng)設(shè)置內(nèi)邊距的時(shí)候會(huì)把盒子撐大，為了保持盒子原來的大小，應(yīng)該高度和寬度進(jìn)行減小，根據(jù)width和height減小
margin 外邊距
值：與padding相同
單獨(dú)屬性：與padding相同
外邊距合并：兩個(gè)盒子同時(shí)設(shè)置了外邊距，會(huì)進(jìn)行一個(gè)外邊距合并
margin
margin:10px 上下左右都會(huì)騰出10px出來
margin:0px auto; 居中
left 元素向左浮動(dòng)。
right 元素向右浮動(dòng)
清除浮動(dòng)
clear: both;
left
right
塊級(jí)元素：
他會(huì)獨(dú)占一行，在默認(rèn)情況下，其寬度自動(dòng)填滿其父元素的寬度；
塊級(jí)元素可以設(shè)置width、height屬性；
塊級(jí)元素即使設(shè)置了寬度也是獨(dú)占一行，塊級(jí)元素可以設(shè)置margin、padding屬性；
行內(nèi)元素：
行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到行排不下，就自動(dòng)換行，其寬度隨內(nèi)容而變化；
行內(nèi)元素的width、height屬性則無效；
行內(nèi)元素的margin、padding屬性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都會(huì)產(chǎn)生邊距效果，但是豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不產(chǎn)生邊距效果。
行內(nèi)元素轉(zhuǎn)換
display:none; 不顯示
display:block;變成塊級(jí)元素
display:inline; 變成行內(nèi)元素
display:inline-block;以塊級(jí)元素樣式展示，以行級(jí)元素樣式排列
塊級(jí)元素(block element）
address 地址
center 舉中對(duì)齊塊
div- 常用塊級(jí)容易
dl 定義列表
form 交互表單 （只能用來容納其它塊元素）
h標(biāo)簽
hr 水平分隔線
ol 無需列表
ul有序列表
p 段落
pre 格式化文本
行內(nèi)元素：
a - 錨點(diǎn)
b - 粗體(不推薦)
br- 換行
code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
em - 強(qiáng)調(diào)
i - 斜體
img - 圖片（特殊的內(nèi)聯(lián)元素，同時(shí)是內(nèi)聯(lián)替換元素，替換元素可以設(shè)置寬高）
當(dāng)圖片和DIV在一起時(shí)，圖片周圍會(huì)出現(xiàn)margin現(xiàn)象，即元素不重合貼在一起，為了解決這個(gè)問題，設(shè)置img的css為{margin：0；display：block；border：0px}
input - 輸入框
label - 表格標(biāo)簽
select - 項(xiàng)目選擇
strong - 粗體強(qiáng)調(diào)
textarea - 多行文本輸入框
u - 下劃線
var - 定義變量
替換元素有如下：（和img一樣的設(shè)置方法）
<img>、<input>、<textarea>、<select>
<object>都是替換元素，這些元素都沒有實(shí)際的內(nèi)容
15. 溢出
overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。
visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。
scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
16. 定位
position
static靜態(tài)定位（不對(duì)它的位置進(jìn)行改變，在哪里就在那里）
默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top,bottom, left, right 或者z-index 聲明）。
fixed固定定位（參照物--瀏覽器窗口）---做 彈窗廣告用到
生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。 元素的位置通過 "left", "top", "right"以及 "bottom"屬性進(jìn)行規(guī)定。
relative（相對(duì)定位 ）（參照物以他本身）
生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
absolute（絕對(duì)定位）(除了static都可以，找到參照物-->與它最近的已經(jīng)有定位的父元素進(jìn)行定位)
生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定
z-index
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
定位的基本思想: 它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
