不改變代碼的情況下，通過(guò)CSS樣式表在手機(jī)上展示表格內(nèi)容

CSS處理的主要方法是：

1. 將 table, tbody, tr 改為display: block。
2. 將td轉(zhuǎn)換為 display: inline（和span一樣的效果）
3. 這對(duì)特頂?shù)膖d，設(shè)置例如顏色、背景色、位置等來(lái)改變效果

假定table的class是 the-table，CSS示例代碼如下：

reamweaver的CSS面板分類(lèi)

type(類(lèi)型)

background(背景)

block(區(qū)塊)

box(方框) 或盒子意思

border(邊框)

list(列表)

positioning(定位)

extensions(擴(kuò)展)

共八個(gè)部分

1. type(類(lèi)型)

type面板主要是對(duì)文字的字體，大小，顏色，效果等基本樣式進(jìn)行設(shè)置。

注意：屬性名帶*號(hào)的是指樣式效果不能在編輯文檔時(shí)顯示，要用瀏覽器打開(kāi)才能看到效果。

(1)font-family：設(shè)置字體系列。什么叫字體系列呢?是指對(duì)文字設(shè)定幾個(gè)字體，當(dāng)遇到第一個(gè)字體不能顯示的文字時(shí)會(huì)自動(dòng)用系列中的第二個(gè)

字體或后面的字體顯示。

注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個(gè)系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，

也可以直接手動(dòng)在下拉框里寫(xiě)字體名，字體之間用逗號(hào)隔開(kāi)。中文網(wǎng)頁(yè)默認(rèn)字體是宋體, 一般就空著不要選取任何字體。

默認(rèn)值： not specified(取決于瀏覽器,系統(tǒng)默認(rèn)的字體, 如: 微軟雅黑)

注意：

1.如果有漢字, 那么我們要加引號(hào)

2.如果有多個(gè)英文字母組成的單詞, 我們也要加引號(hào); "microsoft yahei" 中間用空格隔開(kāi)

3.font-family:"黑體","宋體","華文隸書(shū)"; 首先找黑體, 沒(méi)有黑體找宋體...

為了避免在CSS中使用 font 或 font-family 設(shè)置中文字體時(shí)亂碼, 可以使用 Unicode 編碼來(lái)表示字體。

/* 示例:使用Unicode字體編碼設(shè)置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定義文字的大小。你可以通過(guò)選取數(shù)字和度量單位來(lái)選擇具體的字體大小，或者你也可以選擇一個(gè)相對(duì)的字體大小。

最好使用pixels作為單位，這樣不會(huì)在瀏覽器中文本變形。一般字體用比較標(biāo)準(zhǔn)的12px或14px, 默認(rèn)值為16px。

注意：CSS中長(zhǎng)度的單位分絕對(duì)長(zhǎng)度單位和相對(duì)長(zhǎng)度單位:

絕對(duì)長(zhǎng)度單位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根據(jù)顯示的實(shí)際尺寸來(lái)確定長(zhǎng)度。

此類(lèi)單位不隨顯示器的分辨率改變而改變。

相對(duì)長(zhǎng)度單位有：

px：(像素)根據(jù)顯示器的分辨率來(lái)確定長(zhǎng)度。

em：當(dāng)前文本的尺寸。例如：{font-size:2em}是指文字大小為原來(lái)的2倍。

比如自身font-size: 30px; 那么此時(shí)1em=30px;

ex：當(dāng)前字母"x"的高度，一般為字體尺寸的一半。

%：是以當(dāng)前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來(lái)的3倍。

small、large：表示比當(dāng)前小一個(gè)級(jí)別或大一個(gè)級(jí)別的尺寸。

默認(rèn)值：medium(標(biāo)準(zhǔn)大小)

(3)font-style：定義字體樣式為normal、italic、oblique。默認(rèn)設(shè)置為normal。

注意： italic 斜體 oblique 歪斜體 italic和oblique實(shí)際效果是一樣的。

默認(rèn)值:normal

(4)line-height：設(shè)置文本所在行的行高。默認(rèn)為normal。可以是行內(nèi)元素、行內(nèi)塊元素, 通常與height設(shè)置的高度值相同, 可以做到垂直居中的作用。

你也可以自己鍵入一個(gè)精確的數(shù)值并選取一個(gè)計(jì)量單位。

比較直觀(guān)的寫(xiě)法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行間距,相對(duì)數(shù)值,1.5倍行距,*/ 可有效的避免文字發(fā)生重疊

默認(rèn)值： normal

(5)text-decoration：在文本中添加underline(下劃線(xiàn))、overline(上劃線(xiàn))、line-through(中劃線(xiàn))、blink(閃爍效果)。

這些效果可以同時(shí)存在，將效果前的復(fù)選框選定即可。

注意：鏈接的默認(rèn)設(shè)置是underline，我們可以通過(guò)選none去除下劃線(xiàn)。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持

默認(rèn)值： none

(6)font-weight：給字體指定粗體字的磅值。

normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。

bold 定義粗體字符。

bolder 定義更粗的字符。

lighter 定義更細(xì)的字符。

100

200

300

400

500

600

700

800

900

inherit 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。

定義由粗到細(xì)的字符。400 等同于 normal, 而 700 等同于 bold。

默認(rèn)值: normal

(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫(xiě)字母)時(shí), 此樣式區(qū)域內(nèi)所有字母大寫(xiě)。

normal表示正常的字體, 為默認(rèn)值；

默認(rèn)值: normal

(8)text-transform：將選區(qū)中每個(gè)單詞的第一個(gè)字母轉(zhuǎn)為大寫(xiě), 或者令單詞全部大寫(xiě)或全部小寫(xiě)。

參數(shù)：capitalize(單詞首字母大寫(xiě))、uppercase(轉(zhuǎn)換成大寫(xiě))、lowercase(轉(zhuǎn)換成小寫(xiě))、none(不轉(zhuǎn)換)。

默認(rèn)值：none

(9)color：定義文字顏色。包括對(duì)表單輸入的文字顏色。

CSS中顏色的值有三種表示方法：

#RRGGBB格式，是由紅綠藍(lán)三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進(jìn)制正整數(shù)。

例如：#FF0000表示紅色，#FFFF00表示黃色。

rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。

用顏色名稱(chēng)。CSS可以使用已經(jīng)定義好的顏色名稱(chēng)。例如：red表示紅色, yellow表示黃色。

顏色值的縮寫(xiě):

p{color:#000000} 可以縮寫(xiě)為：p{color:#000}

p{color:#336699} 可以縮寫(xiě)為：p{color:#369}

默認(rèn)值： not specified

color: transparent; 透明色

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1)

注意: 如果文字的顏色通過(guò)單獨(dú)的類(lèi)選擇去設(shè)置沒(méi)有改變顏色, 則應(yīng)該通過(guò)組合選擇器(.header .top .topR .blue)去設(shè)置, 改變它的優(yōu)先級(jí)。

2. background(背景)

background面板主要是對(duì)元素的背景進(jìn)行設(shè)置，包括背景顏色、背景圖象、背景圖象的控制。

一般是對(duì)body(頁(yè)面)、table(表格)、div(區(qū)域)的設(shè)置。

(1)background-color：設(shè)置元素的背景色。包括對(duì)input表單輸入框的背景顏色;

默認(rèn)值: transparent(背景顏色為透明)

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1) 一般用于背景色

(2)background-image：設(shè)置元素的背景圖像。

默認(rèn)值:none

CSS3支持多重背景圖,只要加上一個(gè)url指定圖片路徑,并用逗號(hào)(,)將兩組url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：確定背景圖像是否以及如何重復(fù)。

repeat 默認(rèn)值。背景圖像將在垂直方向和水平方向重復(fù)。

repeat-x 背景圖像將在水平方向重復(fù)。

repeat-y 背景圖像將在垂直方向重復(fù)。

no-repeat 背景圖像將僅顯示一次。

inherit 規(guī)定應(yīng)該從父元素繼承background-repeat屬性的設(shè)置。

注意：如果定義的元素的body，可以控制頁(yè)面背景是否重復(fù)。

默認(rèn)值: repeat

(4)background-attachment：固定背景圖像或者跟隨內(nèi)容滾動(dòng)。

參數(shù)fixed表示固定背景(不隨屏幕滾動(dòng)而滾動(dòng)，決定背景圖像是否要固定在原來(lái)的位置), scroll表示跟隨內(nèi)容滾動(dòng)的背景。

注意：如果定義的元素的body, 可以使頁(yè)面背景固定。

默認(rèn)值: scroll

(5)background-position(X)：指定背景圖像的水平位置。

可以指定為left(左邊), center(居中)，right(右邊)；

也可以指定數(shù)值，如20px是指背景距離左邊20象素。

background-position(Y)：指定背景圖像的垂直位置。

可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數(shù)值。

background-position屬性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您僅規(guī)定了一個(gè)關(guān)鍵詞，那么第二個(gè)值將是"center"。

注意:采用英文單詞的水平位置和垂直位置的屬性值可以調(diào)換

x% y% 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是 50%。

xpos ypos 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是50%。

您可以混合使用 % 和 position 值。

默認(rèn)值：0% 0%