使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、body引入HTML代碼

<div class="specialty">
	<div class="wrapper">
		<div class="support-title">
			<h1>專業(yè)服務(wù)</h1>
		</div>
		<div class="support-body">
			<ul class="specialty-slide">

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon0.svg') no-repeat"></i>
						<h1>上云遷移服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>上云遷移服務(wù)</h1>
							<p>提供專業(yè)的遷移方案和專屬遷移工具支持，保證客戶云業(yè)務(wù)平滑遷移，縮短整體業(yè)務(wù)云化周期，解除客戶顧慮，聚焦于業(yè)務(wù)發(fā)展。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon1.svg') no-repeat"></i>
						<h1>云上保障護航服務(wù)</h1>

					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云上保障護航服務(wù)</h1>
							<p>為您云上業(yè)務(wù)提供專屬保障護航服務(wù)。遵循“事前重預(yù)防，事中重保障，事后重總結(jié)”原則，協(xié)助客戶從容應(yīng)對業(yè)務(wù)高峰。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon2.svg') no-repeat"></i>
						<h1>可用性優(yōu)化服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>可用性優(yōu)化服務(wù)</h1>
							<p>基于您業(yè)務(wù)特點和對成本、性能和數(shù)據(jù)一致性的考慮，通過云服務(wù)資源來構(gòu)建云上業(yè)務(wù)系統(tǒng)的可靠性，以免出現(xiàn)單點中斷，降低故障幾率，構(gòu)建快速恢復(fù)能力。預(yù)防和面對突發(fā)問題，保障業(yè)務(wù)應(yīng)用在復(fù)雜的環(huán)境下高效穩(wěn)定運行。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon3.svg') no-repeat"></i>
						<h1>數(shù)據(jù)庫咨詢服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>數(shù)據(jù)庫咨詢服務(wù)</h1>
							<p>華為云數(shù)據(jù)庫專家團隊為您數(shù)據(jù)庫業(yè)務(wù)的上云遷移、系統(tǒng)容量規(guī)劃、數(shù)據(jù)庫架構(gòu)設(shè)計與改造、系統(tǒng)性能調(diào)優(yōu)等提供專業(yè)的在線咨詢服務(wù)，數(shù)據(jù)庫疑難雜癥解決和數(shù)據(jù)庫系統(tǒng)保駕護航服務(wù)。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon4.svg') no-repeat"></i>
						<h1>安全專家服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>安全專家服務(wù)</h1>
							<p>華為云與第三方權(quán)威機構(gòu)一起為您提供的“專家式”安全服務(wù)，來預(yù)防、監(jiān)測、發(fā)現(xiàn)主機、站點及云上系統(tǒng)的安全風險，給出解決方案、整改建議及權(quán)威報告，并及時修復(fù)被攻擊系統(tǒng)，降低損失等。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon5.svg') no-repeat"></i>
						<h1>云化服務(wù)化架構(gòu)咨詢服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云化服務(wù)化架構(gòu)咨詢服務(wù)</h1>
							<p>提供最專業(yè)的指導(dǎo)、支持和協(xié)助和企業(yè)架構(gòu)咨詢、微服務(wù)設(shè)計咨詢，幫助您從業(yè)務(wù)、應(yīng)用、信息（數(shù)據(jù)）、技術(shù)架構(gòu)層面統(tǒng)一規(guī)劃設(shè)計業(yè)務(wù)系統(tǒng)，實現(xiàn)數(shù)字化轉(zhuǎn)型。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon6.svg') no-repeat"></i>
						<h1>云容災(zāi)咨詢服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云容災(zāi)咨詢服務(wù)</h1>
							<p>設(shè)計規(guī)劃您基于云業(yè)務(wù)的容災(zāi)，防患于未然。</p>
						</a>
					</div>
				</li>

				<li>
					<a class="list">
						<i style="background:url('statics/images/support-service-icon7.svg') no-repeat"></i>
						<h1>敬請期待</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云上保障護航服務(wù)8</h1>
							<p>設(shè)計規(guī)劃您基于云業(yè)務(wù)的容災(zāi)，防患于未然。</p>
						</a>
					</div>
				</li>

			</ul>
		</div>
	</div>
</div>