用機智雲HTML的section.product測試加了grid庫，效率更高嗎

時間 2019-11-13

標籤機智 html section.product section product 測試加了 grid 效率欄目 HTML 简体版

原文原文鏈接

沒加任何庫，只純css：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
}