div css专业服务列表卡片悬停特效

div css专业服务列表卡片悬停特效

收藏
div css专业服务列表卡片悬停特效
div基于css3属性制作云主机服务列表卡片布局,鼠标悬停滑动显示文字详情代码。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 迷茫
  • 上传时间 6年前

使用方法:

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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。