图标文字列表 返回列表 默认说明 左码右览 上码下览 全屏代码 全屏预览 作者： 发布时间：0000-00-00 00:00:00 浏览次数：257 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模块名</title> <meta name="renderer" content="webkit"> <meta name="format-detection" content="telephone=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 如果是pc请删除下面一行 --> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <!-- 下面是初始化框架必须引入 --> <link rel="stylesheet" href="https://h5.org.cn/css/cui.css" /> <link rel="stylesheet" href="https://h5.org.cn/css/cui-rel.css" /> <script type="text/javascript" src="https://h5.org.cn/js/jquery.js"></script> <!-- 下面是你的样式表 --> <style> body{font-family:"微软雅黑","Microsoft Yahei";overflow-x: hidden;} .wp{width: 90%;max-width:1200px;margin: 0 auto;} .ul-h1 { overflow: hidden; margin: 0 -5px; } .ul-h1 li { float: left; width: 25%; margin-bottom: 53px } .ul-h1 .con { margin: 0 10px; text-align: center } .ul-h1 i { display: block; margin: 0 auto; height: 52px; background: center center no-repeat; -webkit-background-size: auto 99%; background-size: auto 99%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease } .ul-h1 .tit { font-size: 20px; color: #000; font-weight: 400; padding: 12px 0 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease } .ul-h1 .desc { font-size: 14px; color: #7d7d7d; line-height: 20px; height: 60px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical } .ul-h1 .con:hover i { -webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg) } .ul-h1 .con:hover .tit { color: #004599 } @media only screen and (max-width: 990px){ .ul-h1 li{width: 33.333%;} } @media only screen and (max-width: 750px){ .ul-h1 li{width: 50%;} } @media only screen and (max-width: 479px){ .ul-h1 li{float: none;width: auto;} } </style> </head> <body> <div class="wp"> <ul class="ul-h1"> <li> <div class="con"> <a href=""> <i style="background-image: url(images/iconq7.png);"></i> <h4 class="tit">智慧消防</h4> <p class="desc"> 远程监控系统、九小场所预警系统<br> 高层住宅预警系统<br> NB-IOT无线烟感无线可燃气体 </p> </a> </div> </li> <li> <div class="con"> <a href=""> <i style="background-image: url(images/iconq7.png);"></i> <h4 class="tit">智慧用电</h4> <p class="desc"> 实时监控电流、温度等变化信息<br> 手机APP应用及时排查电气火灾隐患<br> 有效提前防止电气火灾 </p> </a> </div> </li> <li> <div class="con"> <a href=""> <i style="background-image: url(images/iconq7.png);"></i> <h4 class="tit">防火门监控</h4> <p class="desc"> 实时监控防火门状态、故障异常报警<br> 远程自动控制、消防联动功能 </p> </a> </div> </li> <li> <div class="con"> <a href=""> <i style="background-image: url(images/iconq7.png);"></i> <h4 class="tit">智慧云管理系统</h4> <p class="desc"> 数据实时查询，设备管理云端化<br> 预测性维修保养<br> 设备全生命周期管理 </p> </a> </div> </li> <li> <div class="con"> <a href=""> <i style="background-image: url(images/iconq7.png);"></i> <h4 class="tit">电气火灾监控</h4> <p class="desc"> 安全状态在线监测、故障诊断<br> 趋势分析、图形化监控 </p> </a> </div> </li> <li> <div class="con"> <a href=""> <i style="background-image: url(images/iconq7.png);"></i> <h4 class="tit">消防电源监控</h4> <p class="desc"> 电压、电流实时监控，故障报警<br> APP/PC云端监控系统自检 </p> </a> </div> </li> <li> <div class="con"> <a href=""> <i style="background-image: url(images/iconq7.png);"></i> <h4 class="tit">智慧安全生产</h4> <p class="desc"> 行业监管、业主手机APP实时监控<br> 安全生产、人员安全 </p> </a> </div> </li> <li> <div class="con"> <a href=""> <i style="background-image: url(images/iconq7.png);"></i> <h4 class="tit">智慧供配电系统</h4> <p class="desc"> 远程状态监控，电能云管理<br> 设备云管理，大数据分析 </p> </a> </div> </li> </ul> </div> </body> </html> 预览[刷新] 320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏
