整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eb開發是一個很依賴經驗的領域，然而這對初學者很不友好。
知識一旦脫離了應用場景就會變得晦澀、空洞，且知識本身也滿足“二八定律”，“抓大放小”是提高學習效率的關鍵。
下文向大家介紹了HTML和CSS之間的關系。內容選自《HTML 5與CSS 3核心技法（全彩）》一書。本書主線清晰，講解簡潔，并提供在線效果演示效果，非常適合小白上手！
1 HTML是骨架
很難想象一個人在桌前對著一塊砧板坐一夜，隔一會兒就噼里啪啦敲幾下，一會兒哭一會兒笑，是一種什么景象。事實上，在貓眼中我們就是這樣的。只不過我們面對的是一塊會發光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網”到底是在做什么？
獲取信息。
重點在“信息”，一種看不見摸不著卻真實存在的東西。無論“1 + 1 = 2”這段字符顯示得多么粗糙，都不會影響它傳遞了完整的信息，以及這條信息的內在邏輯是正確的，不是嗎？HTML就是用來盛放最核心的內容——信息。
所以，在CSS和JavaScript出現之前，HTML就出現了。這是必然的，因為如果連最核心的信息都無法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無意義的。
除滿足承載核心信息的需求外，HTML還解決了一個重要的問題——將信息結構化。
試想有這樣一篇文章：
背影
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
評論
王花花 大概，天底下的父親，老去的樣子都有些共同的特質吧
李拴蛋 我們都不愿意承認他老了
劉備備 想吃橘子...
此時上面的信息基本沒有結構，只能通過斷行或縮進盡可能讓內容更易讀，編輯時的狀態就是其最終的顯示效果。
HTML就派上了用場，見下方的代碼：
代碼
<artcle>
<h1>背影</h1>
<p>
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質吧</span>
</div>
<divclass="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
一頭霧水沒關系，后面我們會細說每一個部分。總之這段內容給人感覺反而更繁瑣。但繁瑣是代價，重要的是現在這段信息有結構了。這就意味著計算機可以通過結構的規律將其顯示得更便于閱讀（甚至是交互）。
以下是不加任何裝飾性內容直接讓瀏覽器呈現的結果：
效果
這是純HTML在沒有引入任何裝飾時的顯示效果。很明顯，即便是這樣也比純文字狀態易讀了許多。但注意，HTML本身沒有樣式，字體大小和粗細有變化的原因是瀏覽器的默認樣式起了作用，與HTML沒有關系。而重點就在這里，這意味著我們可以基于這個結構設計自己的頁面效果，見下方的示例。
代碼
<style>
body { font-family: 'Microsoft YaHei', sans-serif; }
#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }
#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }
#comment-list .title {
color: #777; font-size: 1.1rem; padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
</style>
<artcle>
<h1>背影</h1>
<p>
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質吧</span>
</div>
<div class="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
效果
這里只是舉了一個小示例。你可以輕而易舉地讓頁面的風格千變萬化，進而讓用戶體驗有所差異（或差距）。“千變萬化”因CSS靈活、強大，“輕而易舉”因HTML簡潔、有序。結構的力量！
CSS是皮膚
一個充滿活力的生態是不滿足于現狀的。人們在適應了便利地瀏覽核心信息之后，就會想方設法改進瀏覽的體驗。比如，讓自己的博客以多欄顯示，以便在視覺上區分不同板塊；修改字體顏色，以便強調一些重要信息等。
起初的做法是——準備幾種特殊的標簽，專門用于樣式的指定。涉及布局的地方，如果沒有特殊標簽就直接用表格布局。以下沒有任何樣式的狀態（以下代碼均不需要看懂）：
代碼
<h1>標題</h1><p>從前有座山，山里有個廟，廟里...</p>
效果
此時的頁面結構下。
如果想讓標題居中，則需要給其添加元素<center>，見下方的示例。
代碼
<center><h1>標題</h1></center><p>從前有座山，山里有個廟，廟里...</p>效果
此時的頁面結構如下。
居中標題的目的確實達到了，但是有一個很大的問題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對于簡單的頁面確實可行，但如果是復雜的頁面，這種做法的工作量就是噩夢，因為每個地方都得修改，無論是對齊方式、顏色、背景色，還是大的布局都必須通過修改結構才能完成。這種做法的最大問題是可維護性太差，很多時候為了一種樣式要修改很多不必要的結構，枯燥、重復、削足適履的工作太多，基本上寫一次就再也不想改了。
這個問題亟待解決，而且解決方案還要兼容現有規則。現有規則是什么？HTML的語法及結構。不過既然HTML已經有結構了，為什么不好好利用呢？
以前面示例中的文章頁面為例，如果我們想更改標題，是否可以先統一選中所有標題，然后說明想要什么樣式規則呢？就像下面這樣：
所有h1 元素聽著
對齊方式 居中。
字體顏色 黑色。
如果想將所有段落字體放大，則像下面這樣：
所有p 元素聽著
字體大小 150%。
這種方式的確很高效！同時這個規則與HTML語法無關，相當于另一種語言。這樣結構和樣式就不會互相影響，結構是結構，樣式是樣式，兩者隔離開了。如果想修改樣式，則完全不需要勞HTML大駕，只需要修改樣式文件即可，更便于管理和維護。這就是CSS，只不過其語法更簡潔。
下面以修改標題對齊方式為例：
h1 { /* 所有h1 元素聽著 */
text-align: center; /* 對齊方式 居中 */
}
通過批量選擇和處理，極大地提高了開發效率，降低了維護成本，四兩撥千斤。
（完）
圖書推薦
《HTML 5與CSS 3核心技法（全彩）》
表嚴肅 著
本書能夠為自學Web開發初學者建立一套HTML與CSS的核心知識框架，同時借助豐富的示例讓初學者有一個愉悅、輕松的學習過程。
想從事前端開發的，可將本書作為學習的起點。正從事前端開發的，可將本書作為速查的手冊。
層疊樣式表(英文全稱：Cascading Style Sheets) *層疊：多個樣式可以作用在同一個html的元素上，同時生效
是一種用來表現HTML或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
CSS很像化妝，通過不同的CSS將同樣的HTML內容打造為不同的呈現結果。
所以，前端程序員相互表白的時候可以說：you are the CSS to my HTML.
這是不是CSS是對HTML進行美化和布局作用的最好總結？
根據定義CSS的位置不同，分為行內樣式、內部樣式和外部樣式
也稱為內聯樣式
直接在標簽中編寫樣式，通過使用標簽內部的style屬性；
一般在測試的時候使用居多：
語法：
<html標簽 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標簽>
案例：
<div style="color: red;">hello my css</div>弊端：只能對當前的標簽生效，沒有做到內容和樣式相分離，耦合度太高。
定義在head標簽內，通過style標簽，該標簽內容就是CSS代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內部樣式</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>hello my css</div>
</body>
</html>1、提前定義css資源文件
2、在head標簽內，定義link標簽引入外部樣式文件。
lina.css文件，放在與html頁面同級的css文件夾中：
div {
color: red;
}
html頁面中的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部樣式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my css</div>
</body>
</html>作用域的范圍:外部樣式表>內部樣式表>行內樣式表
優先級：外部樣式表<內部樣式表<行內樣式表;
同樣的樣式作用在同一個標簽身上：就近原則；不同樣式作用在同一個標簽身上:疊加生效。
基本格式：由兩個主要的部分構成：選擇器，以及一條或多條聲明:
選擇器 {
屬性1:值1;
屬性2:值2;
...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號分割，不同的屬性之間用分號隔開。例如：
注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。
CSS注釋以 /* 開始, 以 */ 結束
/*這是CSS的注釋*/
div {
color: red; /*文字顏色是紅色*/
}選擇具有相同id屬性值的元素，建議html頁面中的id值唯一
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
PS： ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
雖然多個元素可以使用同一個id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對多個標簽生效，使用class選擇器。
選擇具有相同的class屬性值的元素。
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
PS：類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
選擇具有相同標簽名稱的元素。
定義選擇器語法：標簽名稱{}；PS：標簽名稱必須是html提供好的標簽。
使用標簽選擇器：自動使用在所有的同名的標簽上
ID選擇器 > 類選擇器 > 標簽選擇器
當多個選擇器作用在同一個標簽上的時候，如果屬性沖突，看優先級；如果不沖突，樣式疊加生效。
行內樣式 > 內部樣式 >外部樣式
同樣，三個樣式表中都有內容作用在同一個html標簽的時候，如果屬性沖突，看優先級；如果不沖突，樣式疊加生效。
跟顏色相關的取值分3種：
1、顏色的單詞 red blue...
2、rgb(紅，綠，藍)三色的取值范圍是0-255 rgb(255,0,0)
rgba（紅，綠，藍,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、#值1值2值3 ：值的范式是00-FF 十六進制數字組成的 例如：#FF0000
PS：只有塊狀元素可以設置寬高，行級元素設置不生效。
取值方式有2種：
1：數值 絕對數字 單位是像素PX
2：百分比：占據父元素的比例
以谷歌瀏覽器為例說明。
快捷鍵F12或者工具條中的開發者工具調出以下內容。
在elements中可以看到當前頁面的所有標簽，在styles中可以看到html元素對應的樣式。
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
盒子模型說明圖：
元素的實際寬度和高度：
當我們計算一個元素實際在頁面占有的總寬度計算公式是這樣的：
總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側不能出現浮動元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--沒有浮動屬性的元素都屬于常規文檔流：從上往下從左往右依次顯示
浮動的元素都脫離了常規文檔流；
為了好理解：大家可以認為浮動元素屬于一層，非浮動元素屬于一層
如果想要非浮動元素不受浮動元素的影響，需要使用clear屬性
-->
<div style="background: rgba(255,0,0,0.5); float: left;">
div1-左浮動，脫離常規文檔流，緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lawngreen; width: 600px; height: 350px; ">
div2-未浮動，常規文檔流,
<br/>PS:此時div1在div2的上方顯示，因為div1和div2是不同文檔流中的元素，顯示互不影響
如果不想讓div2被浮動元素影響，需要添加clear屬性。
添加clear: left;之后div2就會忽略div1浮動的影響，在div1層后面顯示，不會重疊了，大家可以自己試驗一下
</div>
<div style="background: lightblue; float: right; width: 1800px;">
div3-右浮動，脫離常規文檔流，緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
div4-未浮動，常規文檔流,
<br/>PS:此時div3在div4的上方顯示，因為div3和div4是不同文檔流中的元素，顯示互不影響
如果不想讓div4被浮動元素影響，需要添加clear屬性。
添加clear: right;之后div4就會忽略div3浮動的影響，在div3層后面顯示，不會重疊了，大家可以自己試驗一下
clear屬性有三個取值：left、right、both;分別是取出左浮動、有浮動和所有浮動元素的影響
</div>
<div style="background: lavender;">
div5-未浮動，常規文檔流,
</div>
</body>
</html>
控制內容溢出元素框時顯示的方式。
overflow屬性有以下值：
值 | 描述 |
visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
hidden | 內容會被修剪，并且其余內容是不可見的。 |
scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
注意:overflow 屬性只工作于指定高度的塊元素上。
注意: 在 OS X Lion ( Mac 系統) 系統上，滾動條默認是隱藏的，使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)。
display屬性設置一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。
隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產生不同的結果。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
CSS樣式有以下三個：
由兩個或多個基礎選擇器，通過不同方式組合而成的。
可以更準確更精細的選擇目標元素標簽。
語法：* {} 一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，一般將 * 替換為常用標簽的名稱，并用逗號分隔，其實就是使用并集選擇器。
并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。
語法：選擇器1，選擇器2，......選擇器N{}
意思是多個選擇器都是通用的樣式。任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。
條件：交集選擇器由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。
語法：h3.class{ color:red; }
其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，例如div.list。
交集選擇器是并且的意思。 即...又...的意思
例如： table.bg 選擇的是： 類名為 .bg 的 表格標簽，但用的相對來說比較少。概念：后代選擇器又稱為包含選擇器。
作用：用來選擇元素或元素組的子孫后代。
其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。
格式：父級 子級{屬性:屬性值;屬性:屬性值;}語法：.class h3{color:red;font-size:16px;}
當標簽發生嵌套時，內層標簽就成為外層標簽的后代。
子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內 的標簽。
作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接。
語法：.class>h3{color:red;font-size:14px;}
比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復合選擇器</title>
<style>
/*全局選擇器：
一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，
*/
*{
color: #333;/*定義全局文字顏色，統一色彩基調*/
}
/*并集選擇器：通常用于集體聲明
替換全局選擇器；
*/
div,p,dldt,dd{
/*去掉瀏覽器的默認樣式*/
margin: 0;
padding: 0;
color: #333;/*定義全局文字顏色，統一色彩基調*/
}
/*交集選擇器*/
li.myli{
color: red;
}
/*后代選擇器*/
ul li{
font-size: 28px;
}
.myUL li{
font-family: "微軟雅黑";
}
.myUL li a{
text-decoration: line-through;
}
/*子元素選擇器*/
.demo>h3{
color: red;
}
</style>
</head>
<body>
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444<a href="">點擊我試試</a></li>
<li class="myUL">
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444
<a href="">點擊我試試</a>
</li>
</ul>
</li>
</ul>
<ol>
<li>li11111111111</li>
<li>li22222222222</li>
<li>li33333333333</li>
<li>li44444444444</li>
</ol>
<div class="demo">
div1
<h3>靜夜思</h3>
<ul>
<li><h3>靜夜思----li</h3></li>
</ul>
</div>
</body>
</html>
偽類選擇器：和類選擇器相區別類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{} 。
作用：用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。
因為偽類選擇器很多，比如鏈接偽類，結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<style>
/*偽類選擇器*/
a:link{
color: red;/*默認顏色是紅色*/
}
a:visited{
color: blue;/*訪問過的頁面是藍色*/
}
a:hover{
color: green;/*鼠標懸浮是綠色*/
font-size: 28px;
}
a:active{
color: gold;/*按下鼠標不放手是金色*/
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<a href="03-常用樣式.html" target="_blank">常用樣式</a>
<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
<a href="05-綜合練習.html" target="_blank">綜合練習</a>
</body>
</html>
注意**
a { /* a是標簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標經過 */
color: red; /* 鼠標經過的時候，由原來的 灰色 變成了紅色 */
}選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 p .one |
子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
交集選擇器 | 選擇兩個標簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | 符號是逗號 .nav, .header |
鏈接偽類選擇器 | 給鏈接更改狀態 | 較多 | 重點記住 a{} 和 a:hover 實際開發的寫法 |
Cascading Style Sheets（層疊樣式表），簡稱 CSS，是前端開發中不可或缺的一部分。它為網頁提供了美觀和一致的外觀，同時也為用戶提供了更好的用戶體驗。本文將引導你從 CSS 的基礎入門到精通，幫助你成為一名優秀的前端開發者。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
