css3产品应用功能卡片布局代码

css3产品应用功能卡片布局代码

收藏
css3产品应用功能卡片布局代码
div基于css3 transform属性制作云产品功能应用单排响应式的图片卡片布局,通过鼠标悬停卡片文字图标切换效果代码。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 迷茫
  • 上传时间 6年前

使用方法:

1、head引入css文件

<!--主要样式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

<!--如不要字体标可以删除此css及字体↓,文中用到的也就一个小箭头-->
<link rel="stylesheet" type="text/css" href="statics/css/icon.css" />

2、body引入HTML代码

<div class="section section-mall">
	<div class="section-title">
		<h1>严选商城 为你臻选云上优品</h1>
		<h2>九大严选馆 直触需求 上云无忧</h2>
	</div>
	<div class="section-wrapper">
		<div class="mall-app">
			<ul>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-enterprise-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-enterprise-logo.svg)"></i>
							<h2>企业上云</h2>
							<p>汇聚业界精品应用,实现企业轻资产敏捷创新</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">企业BI</a>
								</li>
								<li>
									<a href="#" target="_blank">模板建站</a>
								</li>
								<li>
									<a href="#" target="_blank">智能客服</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-solution-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-solution-logo.svg)"></i>
							<h2>智慧城市</h2>
							<p>深耕垂直行业,支持个性化定制,一站式解决客户诉求</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">智慧教育大数据云平台</a>
								</li>
								<li>
									<a href="#" target="_blank">双创实践云平台</a>
								</li>
								<li>
									<a href="#" target="_blank">中小学智慧校园解决方案</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-video-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-video-logo.svg)"></i>
							<h2>视频</h2>
							<p>提供直播、转播、转码等视频能力,助力高效搭建视频业务</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">云直播</a>
								</li>
								<li>
									<a href="#" target="_blank">云点播</a>
								</li>
								<li>
									<a href="#" target="_blank">直播转码</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-station-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-station-logo.svg)"></i>
							<h2>智能制造</h2>
							<p>覆盖设计仿真到经营管理各环节,实现敏捷创新、精细化运营</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">企安易</a>
								</li>
								<li>
									<a href="#" target="_blank">设备宝</a>
								</li>
								<li>
									<a href="#" target="_blank">工业云平台</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="section-bottom">
		<div class="section-more-wrap">
			<a href="#" target="_blank"> <span>更多应用</span><i class="cui-icon cui-icon-more"></i> </a>
		</div>
	</div>
</div>

使用声明

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