試一試 - W3.CSS templates

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
<link rel="stylesheet" href="../../fonts.googleapis.com/css-family=Montserrat.html">
<link rel="stylesheet" href="../../cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
body,h1 {font-family: "Montserrat", sans-serif;font-weight:bold}
img {margin-bottom:-7px;}
.w3-row-padding img {margin-bottom:12px}
</style>
<body>

<nav class="w3-sidenav w3-black w3-card-2 w3-animate-top w3-center w3-xxlarge" style="display:none;padding-top:220px">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-jumbo w3-right w3-display-topright w3-padding-ver-24">
    <i class="fa fa-remove"></i>
  </a>
  <a href="javascript:void(0)" class="w3-text-grey w3-hover-black">About</a>		
  <a href="javascript:void(0)" class="w3-text-grey w3-hover-black">Photos</a>		
  <a href="javascript:void(0)" class="w3-text-grey w3-hover-black">Shop</a>		
  <a href="javascript:void(0)" class="w3-text-grey w3-hover-black">Contact</a>		
</nav>

<div class="w3-content" style="max-width:1500px">

<div class="w3-container w3-padding-hor-32 w3-center w3-opacity w3-margin-bottom">
  <span class="w3-opennav w3-xxlarge w3-right w3-margin-right" onclick="w3_open()"><i class="fa fa-bars"></i></span> 
  <div class="w3-clear"></div>
  <h1>PHOTOLIO</h1>
  <p>A template made by w3.css for photographers.</p>
  <p class="w3-padding-hor-16"><button class="w3-btn" onclick="myFunction()">Toggle Grid Padding</button></p>
</div>

<div id="myGrid">
  <div class="w3-third">
    <img src="img_rocks.jpg" style="width:100%">
    <img src="img_sound.jpg" style="width:100%">
    <img src="img_woods.jpg" style="width:100%">
    <img src="img_rock.jpg" style="width:100%">
    <img src="img_nature.jpg" style="width:100%">
    <img src="img_mist.jpg" style="width:100%">
  </div>

<footer class="w3-container w3-padding-hor-64 w3-light-grey w3-center w3-margin-top w3-opacity"> 
 <div class="w3-xlarge w3-padding-hor-32">
   <a href="#" class="w3-hover-text-indigo w3-show-inline-block"><i class="fa fa-facebook-official"></i></a>
   <a href="#" class="w3-hover-text-red w3-show-inline-block"><i class="fa fa-pinterest-p"></i></a>
   <a href="#" class="w3-hover-text-light-blue w3-show-inline-block"><i class="fa fa-twitter"></i></a>
   <a href="#" class="w3-hover-text-grey w3-show-inline-block"><i class="fa fa-flickr"></i></a>
   <a href="#" class="w3-hover-text-indigo w3-show-inline-block"><i class="fa fa-linkedin"></i></a>
 </div>
  <p style="font-weight:normal">Powered by <a href="../w3css/default.html" target="_blank">w3.css</a></p>
</footer>
 
<script>
// Toggle grid padding
function myFunction() {
    var x = document.getElementById("myGrid");
    if (x.className.indexOf("w3-row-padding") == -1) {
        x.className += " w3-row-padding";
    } else { 
        x.className = x.className.replace(" w3-row-padding", "");
    }
}

// Open and close sidenav
function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.width = "100%";
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}

function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
</script>

</body>
</html>