需求說明
- 使用container、row等柵格系統的知識佈局響應式的網頁，需要適配中等屏幕、小屏幕、超小屏幕
- 使用.img-responsive設置響應式圖片，使之適應不同屏幕的終端
- 使用.img-thumbnail設置圖片形狀
- 使用rgba的方式設置“學員旅行微電影 - 清邁篇”等文字的背景爲顏色
運行效果
參考代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>美聯英語在線VIP-真人在線英語學習-美聯英語免費在線學習網站 - 美聯英語在線VIP</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/myCSS.css"/>
</head>
<body>
<!-- 小美GOGO -->
<div class="clearfix" id="home_xmgo" style="background-image: url('image/bg3.jpg')">
<div class="container">
<h2 class="btitle">
學英語，看世界！小美帶你GO學員微電影
</h2>
<div class="text-center">
<img src="image/block-split.png" alt="">
</div>
<br>
<br>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="xmgoitem">
<div class="metvideo">
<img class="img-responsive img-thumbnail" src="image/4.jpg" alt="">
</div>
<h5 class="intercept">
學員旅行微電影 - 清邁篇
</h5>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="xmgoitem">
<div class="metvideo">
<img class="img-responsive img-thumbnail" src="image/5.jpg" alt="">
</div>
<h5 class="intercept">
學員旅行微電影 - 斯里蘭卡篇
</h5>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="xmgoitem">
<div class="metvideo">
<img class="img-responsive img-thumbnail" src="image/6.jpg" alt="">
</div>
<h5 class="intercept">
小美帶你GO - 精彩花絮1
</h5>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="xmgoitem">
<div class="metvideo">
<img class="img-responsive img-thumbnail" src="image/7.jpg" alt="">
</div>
<h5 class="intercept">
小美帶你GO - 精彩花絮2
</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
超全面的測試IT技術課程，0元立即加入學習！有需要的朋友戳：
騰訊課堂測試技術學習地址
歡迎轉載，但未經作者同意請保留此段聲明，並在文章頁面明顯位置給出原文鏈接。