div css云平台软件和服务图片文字布局页面,鼠标悬停阴影效果。这是一款简单大气的图文布局代码。结构简单易用,下载即可使用。
使用方法
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>2、body引入HTML代码
<div class="software-box"> <div class="software-header"> <h2>为您臻选优质软件和服务</h2> <p>汇聚万千应用的一站式云服务平台</p> </div> <div class="software-content clearfix"> <div class="software-content-item item001"> <a href="#"></a> </div> <div class="software-content-item"> <a href="#"> <i class=" service-icon-cloud"></i> <h2>企业上云严选馆</h2> <ul> <li> <a href="#">解放云盘(JFun Box)</a> </li> <li> <a href="#">文档管理系统</a> </li> <li> <a href="#">云视频会议</a> </li> </ul> </a> </div> <div class="software-content-item"> <a href="#"> <i class="service-icon-video"></i> <h2>视频严选馆</h2> <ul> <li> <a href="#">视频云服务</a> </li> <li> <a href="#">媒体云融合媒体基础服务</a> </li> <li> <a href="#">媒体云新闻制作服务</a> </li> </ul> </a> </div> <div class="software-content-item"> <a href="#"> <i class=" service-icon-site"></i> <h2>建站严选馆</h2> <ul> <li> <a href="#">一画建站</a> </li> <li> <a href="#">万户网络网站定制</a> </li> <li> <a href="#">辰商云小程序社交电商解决方案</a> </li> </ul> </a> </div> </div> <div class="solution-more-wrap"> <a href="javascript:;" class="s-btn solution-more">查看更多云应用<em></em></a> </div> </div>