QQ客服
当前位置 : 首页 > 代码 > 网页特效 > div css > div css专业服务列表卡片悬停特效

原创商用 div css专业服务列表卡片悬停特效

div基于css3属性制作云主机服务列表卡片布局,鼠标悬停滑动显示文字详情代码。
www.28365365.com,bet28365365体育投注,bet28365365娱乐场
[声明]该素材属于原创商用,未经允许请勿转载,内有版权说明,否则追究相应的法律责任。

使用方法:

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>专业服务</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>上云迁移服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>上云迁移服务</h1>
							<p>提供专业的迁移方案和专属迁移工具支持,保证客户云业务平滑迁移,缩短整体业务云化周期,解除客户顾虑,聚焦于业务发展。</p>
						</a>
					</div>
				</li>

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

					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云上保障护航服务</h1>
							<p>为您云上业务提供专属保障护航服务。遵循“事前重预防,事中重保障,事后重总结”原则,协助客户从容应对业务高峰。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon2.svg') no-repeat"></i>
						<h1>可用性优化服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>可用性优化服务</h1>
							<p>基于您业务特点和对成本、性能和数据一致性的考虑,通过云服务资源来构建云上业务系统的可靠性,以免出现单点中断,降低故障几率,构建快速恢复能力。预防和面对突发问题,保障业务应用在复杂的环境下高效稳定运行。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon3.svg') no-repeat"></i>
						<h1>数据库咨询服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>数据库咨询服务</h1>
							<p>华为云数据库专家团队为您数据库业务的上云迁移、系统容量规划、数据库架构设计与改造、系统性能调优等提供专业的在线咨询服务,数据库疑难杂症解决和数据库系统保驾护航服务。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon4.svg') no-repeat"></i>
						<h1>安全专家服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>安全专家服务</h1>
							<p>华为云与第三方权威机构一起为您提供的“专家式”安全服务,来预防、监测、发现主机、站点及云上系统的安全风险,给出解决方案、整改建议及权威报告,并及时修复被攻击系统,降低损失等。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon5.svg') no-repeat"></i>
						<h1>云化服务化架构咨询服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云化服务化架构咨询服务</h1>
							<p>提供最专业的指导、支持和协助和企业架构咨询、微服务设计咨询,帮助您从业务、应用、信息(数据)、技术架构层面统一规划设计业务系统,实现数字化转型。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon6.svg') no-repeat"></i>
						<h1>云容灾咨询服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云容灾咨询服务</h1>
							<p>设计规划您基于云业务的容灾,防患于未然。</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>云上保障护航服务8</h1>
							<p>设计规划您基于云业务的容灾,防患于未然。</p>
						</a>
					</div>
				</li>

			</ul>
		</div>
	</div>
</div>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×
www.28365365.com

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了