使用 Materialisecss 的网页
以下是使用 Materialize CSS 框架的基本页面示例，该框架包含网格系统和 materialboxed。
<!DOCTYPE html>
<html>
<head>
<title>Materializecss Example webpage</title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12"><h3>MATERIALIZECSS EXAMPLE</h3><h4>A simple website just to show how an element is used.</h4></div>
<div class="col s12 m6 l3">
<img class="materialboxed" width="100%" height="220" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Katun_nature_reserve.jpg">
<h4>Katun Nature Reserve</h4>
<p><i>Lovely Place</i></p>
</div>
<div class="col s12 m6 l3">
<img class="materialboxed" width="100%" height="220" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Computer_art_4.png">
<h4>Art</h4>
<p><i>Simple & Attractive</i></p>
</div>
<div class="col s12 m6 l3">
<img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/9/8715/16947318656_4c6cbc3091_b.jpg">
<h4>Food</h4>
<p><i>For any occasion</i></p>
</div>
<div class="col s12 m6 l3">
<img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/7/6179/6217102314_350be5e843.jpg">
<h4>Steve Jobs</h4>
<p><i>Inspiration</i></p>
</div>
<div class="col s12"><h5>Comment your suggestion</h5></div>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
</body>