第十章作業title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> body { font: 20px Montserrat, sans-serif; line-height: 1.8; color: #f5f6f7; } p {font-size: 16px;} .margin {margin-bottom: 45px;} .bg-1 { background-color: #1abc9c; /* Green */ color: #ffffff; } .bg-2 { background-color: #474e5d; /* Dark Blue */ color: #ffffff; } .bg-3 { background-color: #ffffff; /* White */ color: #555555; } .bg-4 { background-color: #2f2f2f; /* Black Gray */ color: #fff; } .container-fluid { padding-top: 70px; padding-bottom: 70px; } .navbar { padding-top: 15px; padding-bottom: 15px; border: 0; border-radius: 0; margin-bottom: 0; font-size: 12px; letter-spacing: 5px; } .navbar-nav li a:hover { color: #1abc9c !important; } </style> </head> <body>  <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Me</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">WHO</a></li> <li><a href="#">WHAT</a></li> <li><a href="#">WHERE</a></li> </ul> </div> </div> </nav>  <div class="container-fluid bg-1 text-center"> <h3 class="margin">關於我</h3> <img src="images/abc11.jpg" class="images-responsive img-circle margin" style="display:inline" alt="Bird" width="350" height="350"> <h3>YUN</h3> </div>  <div class="container-fluid bg-2 text-center"> <h3 class="margin">學業</h3> <p>崑山科技大學資訊傳播系大二正在學習bootstrap</p> </div>  <div class="container-fluid bg-3 text-center"> <h3 class="margin">我的興趣</h3><br> <div class="row"> <div class="col-sm-4"> <p>聽音樂</p> <img src="images/620.jpg" class="img-responsive margin" style="width:100%" alt="images"> </div> <div class="col-sm-4"> <p>旅遊</p> <img src="images/159.jpg" class="img-responsive margin" style="width:100%" alt="images"> </div> <div class="col-sm-4"> <p>攝影</p> <img src="images/3853.jpg" class="img-responsive margin" style="width:100; " alt="images"> </div> </div> </div>  <footer class="container-fluid bg-4 text-center"> <p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p> </footer> </body> </html>