用机智云HTML的section.product测试加了grid库，效率更高吗-优快云博客

本文介绍了一个使用纯CSS实现的产品展示页面布局案例，包括IoTPaaS服务、企业SaaS服务和GDMS系统的介绍及其特色功能。

2019独角兽企业重金招聘Python工程师标准>>>

没加任何库，只纯css：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>product</title>
	    
    <link rel="stylesheet" type="text/css" href="sectionproduct.css"> 
	  <!-- 自己写的样式放后面-官网就这样 -->
</head>
<body>
	<section class="product">
   <div class="container">
    <h2 class="index-title">功能&middot;产品</h2>
    <ul class="row product-list">
     <li class="col-sm-4">
     	<img src="img/iot_paas.6fff83b.png" class="thumbnail" />
     	<h2 class="product-title">IoT PaaS服务</h2>
     	<p class="product-suggest paas">为IoT开发者提供智能设备自助开发工具、后台技术支持服务，实现设备远程操控管理、数据存储分析、第三方数据整合、硬件社交化等技术服务，快速实现产品互联网化，让硬件开发变得更快、更有创意。</p>
      <!--  <a class="index-link-btn-yellow" href="http://site.gizwits.com/zh-cn/developer/product">硬件接入</a> -->
     </li>
     <li class="col-sm-4">
     <img src="img/org_saas.5276b55.png" class="thumbnail" /><h2 class="product-title">企业SaaS服务</h2><p class="product-suggest">定向远程升级、规则引擎、消息推送、设备自动化操作、设备联动、企业API、自定义统计分析、2G/3G产品支持和多种数据输出接口等，全面提升产品接入后的生产支持、库存、经销商、售后、用户等一站式管理和服务能力。</p>
      <!-- <a class="index-link-btn-yellow" href="#">在线签约</a> --></li>
     <li class="col-sm-4"><img src="img/gdms.53c55cf.png" class="thumbnail" /><h2 class="product-title">GDMS系统</h2><p class="product-suggest">企业智能设备管理系统，支持BT/BLE/Wi-Fi/移动网络，设备实时运行状态查看及管理，设备使用情况统计及地图分布，用户统计与管理，设备故障/报警实时推送跟踪，多租户管理，支持无限级销售渠道与下级企业管理。</p>
      <!-- <a class="index-link-btn-yellow" href="#">在线申请</a> --></li>
    </ul>
   </div>
  </section> 
</body>
</html>
sectionproduct.css文件内容是从indexindex.73cf368.css文件复制的局部整块内容，内容如下：
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px; font-family:"SimHei","Microsoft Yahei","Arial";}
ol,ul{padding:0;margin:0;}
li{list-style:none;}
a{text-decoration:none;}
img{border:none;vertical-align:top;}

form{margin:0;}
input{margin:0;padding:0;}
select{margin:0;}
textarea{margin:0; padding:0;resize:none; overflow:auto; outline:none;}

th,td{padding:0;}
table{border-collapse:collapse;}

header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
/* 默认样式重置 (css reset)  */

.product {
	padding-bottom: 60px;
	padding-top: 60px;
	background: #fff;
	text-align: center;
	color: #4c4c4c
}
@media (max-width:768px) {
	.product {
		padding-top: 30px
	}

	.product .container {
		width: auto
	}
}

.product .index-link-btn-yellow {
	display: inline-block;
	margin-top: 10px
}

@media (min-width:768px) and (max-width:992px) {
	.product .paas {
		margin-bottom: 19px
	}
}
.product .product-list {
	margin-top: 20px;
	list-style: none
}

.product .product-list li {
	list-style-type: none;
	margin-left: 0
}

@media (max-width:768px) {
	.product .product-list li {
		margin-top: 30px
	}
}

.product .product-list li.first {
	margin-top: 0
}

.product .thumbnail {
	margin-left: auto;
	margin-right: auto
}