用場景：

接到任務，需要在WEB ERP系統上，實現一個核對平臺與ERP訂單數量的問題，

大概的結構是，左邊是顯示ERP訂單數據，右邊是顯示平臺訂單數據，顯示的效果如下：

通過核對兩邊數據，進行相應的保存操作。

那么我們如何通過HTML+CSS實現這樣的顯示呢？

首先，說CSS，要實現這樣的顯示，我們可以用float來處理。

我們共定義三個樣式：

1）per70 表示 70%左右的寬度比例。

2）per1 表示 表示1%的空隙，寬度比例。

3）per30 表示 30%左右的寬度比例。

代碼如下：

這樣，就可以讓它把一定的比例分左右兩邊顯示。

接著，我們寫HTML,只需要用DIV加上相應的樣式即可，如下圖。

記住：最后還要加個樣式.cl_b{clear:both}，把左右兩側浮動取消，這樣就可以把“保存”按鈕擺在兩者的下面了。

以上是一個比較簡單的顯示。

接下來，我們再看一個稍為數據情況多一點的。這個也是實際工作中涉及的業務：

業務是這樣的：我們需要在左側顯示多組數據，在右側顯示一組數據，比如，我們需要在左側顯示ERP發貨情況

ERP換貨情況，ERP退貨情況；右側不變，仍然顯示平臺訂單情況。要實現的表格如下：

要實現上面的表格也很簡單：

左側顯示三組數組，右側不變，CSS也可以不變

原結構保存不變，只是把原來左側的內容，變成三個DIV，放在per30里面即可。

好了，分享到此，大家有任何想法，都可留言，一起學習。

學習一門編程語言之前，了解它的特性，帶著對特性的好奇和疑問去學習是最快最好的學習方法。就像你知道某個地方有很多寶藏，帶著藏寶圖去尋找寶藏，你一定會大有收獲的。

編程語言就是人與計算機進行溝通的語言，在現實生活中，見什么人說什么話我們都很清楚，那在與計算機溝通的世界中，做什么事用什么編程語言溝通也是同樣的道理，前提就是我們要了解這些編程語言，在你需要選擇的時候做出正確的判斷，這也正是我寫此篇文章的意義。

什么是 HTML？

HTML的英文全稱是 Hyper Text Marked Language，中文意思為超文本標記語言。

什么是超文本標記語言？我們先對超文本標記這五個字進行一一的拆分，然后去更好的理解它的意思。在理解超文本時，我們先來理解一下文本在我們的日常生活中代指的是什么東西?

文本包含了比如說你新建的一個Word文檔，一個txt文件，甚至一個Html文件。這三個文件有相同的地方， 也有不同的地方。

相同的地方在于不論是Word文檔，還是txt文件或者是Html文件，我們都能編寫文本的內容。Word文檔的不同在于我們可以在Word文檔中設置一些超鏈接，放一些圖片等操作。

txt文件就有一定的局限性，比如你放一張圖片或者設置超鏈接等這些行為都是不行。在Html文件中，可以存放文本、圖片、音頻、視頻等，甚至在網頁中見到的一些很炫酷的小游戲，都可以在Html文件中去編寫。

那接下來解釋下超文本。我們在Html文件中編寫代碼，其實編寫的是超文本。所謂超文本，大家應該能聯想到超，即超出文本，超文本比文本更高一級，它包含了我們常見的音頻、視頻以及超鏈接等。

這些被我們稱為超文本，在Html文件里面既能存放這些內容，也能存放文本內容，甚至是文章里的一級標題、二級標題、列表、選項等，都可以通過HTML代碼去編寫，這些內容我們就稱為超文本。

那么這些內容到底用哪些來去展現或展示呢？標記。

什么是標記呢？

用百度官網來分析一下“標記”，在網頁頁面上存放很多的內容，有超鏈接、圖片、輸入框等。我們先看看右上角的新聞字樣，這是一個超鏈接，我們看下源碼，打開后的樣子是這樣的：

我們把藍色的新聞部分，也就是我用紅框標記的部分復制一下，其他代碼刪除：

“新聞”被左邊和右邊的“a”包裹起來了，這就構成了超鏈接，這就像我們常見的書名號。如果我們單是輸出紅樓夢字樣，就是一個文本，但如果用《》書名號包裹起來，《紅樓夢》，大家都能知道這是一本書。

把包裹在“新聞”兩邊的a標簽對應包裹在紅樓夢兩邊的書名號來看很類似。用書名號這個標記把紅樓夢給包裹起來，就叫做書名，同理，用帶尖括號的a這個標記把新聞這個文本內容給包裹起來，在網頁中稱為超鏈接，這對帶尖括號的a就叫做標記。

標記是用HTML自己的語法規則把文本內容給包裹起來，這就叫做標記。這種標記的書寫也非常簡單，包裹在文本左邊的叫開始標記，包裹在文本右邊的叫結束標記。我們看到的網頁中顯示的一級標題、二級標題、超鏈接、圖片、音頻等內容其實學習它們所對應的標記就可以了。

HTML的歷史發展過程

接著我們來看下HTML從最原始到現在至今整個HTML語言的歷史發展過程。

• HTML 1.0：在1993年6月作為互聯網工程工作小組(IETF)工作草案發布,由此超文本標記語言第一版誕生。
• HTML 2.0：1995年1 1月作為RFC 1866發布，于2000年6月發布之后被宣布已經過時。
• HTML 3.2：1997年1月14日，HTML3.2版本誕生，成為W3C的推薦標準。
• HTML 4.0：1997年12月18日，HTML4.0版本誕生，由此成為了W3C的推薦標準。
• HTML 4.01（微小改進）：1999年12月24日，HTML4.01版本誕生，成為W3C的推薦標準。
• HTML 5：2014年10月28日，HTML5版本誕生，H5成為W3C推薦的標準。

HTML5的誕生，標記著互聯網時代的發展。比如在HTML5里面誕生的音頻、視頻、圖像、動畫等都做了新的標準，它對于瀏覽器的兼容也是得到了一定的處理，由此可見，HTML的整個歷史發展目前為止我們所使用的版本主要是99年誕生的HTML 4.01以及2014年誕生的HTML5。

HTML的應用

時代在進步，科技在發展，這個超文本標記語言從HTML1.0版本發展到如今的HTML5版本，已經有了極大的改善。

在以前的HTML版本中，常用的是對文本的編輯、超鏈接、圖片等，其用途很廣泛，許多公司用來創建和發布消息，比如布告、技術手冊、各種信函等，都能用它來描述。

HTML是一門嚴謹的編程語言，有組織性、模塊化、規范化的。不過對于開發者而言，不同瀏覽器HTML的兼容性是考慮的問題。隨著HTML5的誕生，我們迎來了一個新的網絡世紀，各種動畫、音頻、視頻、圖像等炫酷的東西都可以做。還有各種小程序、小游戲以及App的開發應用數不勝數，其兼容性也得到了很大的改善，這意味著對前端的需求以及重視程度都有了極大的改變。

HTML是前端很重要的一環，我們學好它才能在前端大軍中齊頭并進，在各種應用小程序的使用中游刃有余，未來的美好生活就掌握在你的手中。

【END】

reamweaver的CSS面板分類

type(類型)

background(背景)

block(區塊)

box(方框) 或盒子意思

border(邊框)

list(列表)

positioning(定位)

extensions(擴展)

共八個部分

1. type(類型)

type面板主要是對文字的字體，大小，顏色，效果等基本樣式進行設置。

注意：屬性名帶*號的是指樣式效果不能在編輯文檔時顯示，要用瀏覽器打開才能看到效果。

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

字體或后面的字體顯示。

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

也可以直接手動在下拉框里寫字體名，字體之間用逗號隔開。中文網頁默認字體是宋體, 一般就空著不要選取任何字體。

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

注意：

1.如果有漢字, 那么我們要加引號

2.如果有多個英文字母組成的單詞, 我們也要加引號; "microsoft yahei" 中間用空格隔開

3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...

為了避免在CSS中使用 font 或 font-family 設置中文字體時亂碼, 可以使用 Unicode 編碼來表示字體。

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

(2)font-size：定義文字的大小。你可以通過選取數字和度量單位來選擇具體的字體大小，或者你也可以選擇一個相對的字體大小。

最好使用pixels作為單位，這樣不會在瀏覽器中文本變形。一般字體用比較標準的12px或14px, 默認值為16px。

注意：CSS中長度的單位分絕對長度單位和相對長度單位:

絕對長度單位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根據顯示的實際尺寸來確定長度。

此類單位不隨顯示器的分辨率改變而改變。

相對長度單位有：

px：(像素)根據顯示器的分辨率來確定長度。

em：當前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。

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

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

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

small、large：表示比當前小一個級別或大一個級別的尺寸。

默認值：medium(標準大小)

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

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

默認值:normal

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

你也可以自己鍵入一個精確的數值并選取一個計量單位。

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

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

默認值： normal

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

這些效果可以同時存在，將效果前的復選框選定即可。

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

默認值： none

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

normal 默認值。定義標準的字符。

bold 定義粗體字符。

bolder 定義更粗的字符。

lighter 定義更細的字符。

100

200

300

400

500

600

700

800

900

inherit 規定應該從父元素繼承字體的粗細。

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

默認值: normal

(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時, 此樣式區域內所有字母大寫。

normal表示正常的字體, 為默認值；

默認值: normal

(8)text-transform：將選區中每個單詞的第一個字母轉為大寫, 或者令單詞全部大寫或全部小寫。

參數：capitalize(單詞首字母大寫)、uppercase(轉換成大寫)、lowercase(轉換成小寫)、none(不轉換)。

默認值：none

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

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

#RRGGBB格式，是由紅綠藍三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進制正整數。

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

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

用顏色名稱。CSS可以使用已經定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。

顏色值的縮寫:

p{color:#000000} 可以縮寫為：p{color:#000}

p{color:#336699} 可以縮寫為：p{color:#369}

默認值： not specified

color: transparent; 透明色

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

注意: 如果文字的顏色通過單獨的類選擇去設置沒有改變顏色, 則應該通過組合選擇器(.header .top .topR .blue)去設置, 改變它的優先級。

2. background(背景)

background面板主要是對元素的背景進行設置，包括背景顏色、背景圖象、背景圖象的控制。

一般是對body(頁面)、table(表格)、div(區域)的設置。

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

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

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

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

默認值:none

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

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

base64使用

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

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

repeat 默認值。背景圖像將在垂直方向和水平方向重復。

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

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

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

inherit 規定應該從父元素繼承background-repeat屬性的設置。

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

默認值: repeat

(4)background-attachment：固定背景圖像或者跟隨內容滾動。

參數fixed表示固定背景(不隨屏幕滾動而滾動，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內容滾動的背景。

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

默認值: scroll

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

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

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

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

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

background-position屬性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您僅規定了一個關鍵詞，那么第二個值將是"center"。

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

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

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

如果您僅規定了一個值，另一個值將是50%。

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

默認值：0% 0%