線上書籍

Home

[1092] 前端技術入門

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <link rel="stylesheet" href="css/animate.min.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/stellarnav.min.css"> <link rel="stylesheet" href="css/style.css"> <title>Title</title> </head> <body> <!-- 標題區 --> <div class="container"> <header class="row"> <div class="col-sm-9"> <!-- Logo圖 --> <img src="images/logo.png" alt="Logo圖" class="img-fluid animate__animated animate__lightSpeedInRight"> </div> <div class="col-sm-3"> <!-- 搜尋工具 --> <form action="/search.php"> <div class="input-group my-4"> <input type="text" name="query" class="form-control" placeholder="請輸入關鍵字"> <input type="hidden" name="action" value="results"> <div class="input-group-append"> <button type="submit" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i></button> </div> </div> </form> </div> </header> </div> <!-- 導覽列 --> <div id="nav"> <div class="container"> <div class="row"> <nav class="col"> <div class="stellarnav"> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> <li><a href="#">Item4</a></li> <li><a href="#">Item5</a></li> </ul> </li> <li><a href="#">Item4</a></li> <li><a href="#">Item5</a></li> </ul> </li> <li><a href="#">Item3</a></li> <li><a href="#">Item4</a> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> <li><a href="#">Item4</a></li> <li><a href="#">Item5</a></li> </ul> </li> <li><a href="#">Item5</a></li> </ul> </div> </nav> </div> </div> </div> <!-- 主內容區 --> <div class="container"> <div class="row"> <aside class="col-xl">側邊左</aside> <article class="col-xl-7">主內容</article> <aside class="col-xl">側邊右</aside> </div> </div> <!-- 頁尾區 --> <div id="footer"> <footer class="container"> <div class="row"> <div class="col-md"> 頁尾區 </div> <div class="col-md"> 頁尾區 </div> <div class="col-md"> 頁尾區 </div> </div> </footer> </div> <script src="js/jquery.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/stellarnav.js"></script> <script type="text/javascript"> jQuery(document).ready(function ($) { jQuery('.stellarnav').stellarNav({ menuLabel: '選單', position: 'left', scrollbarFix: true }); }); </script> </body> </html>