吳裕雄--天生自然WEB前端開發實戰--Bootstrap 基礎
阿新 • • 發佈：2020-10-25
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <title>第一個Bootstrap網頁</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-1.11.2.min.js"></script> <!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。--> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>你好，bootstrap世界！</h1> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <title>第一個Bootstrap網頁</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-1.11.2.min.js"></script> <!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 --> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>你好，bootstrap世界！</h1> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>柵格系統</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .row{ margin-bottom: 5px; } [class*="col-"]{ /* background-color: darkgray; */ border: 1px solid red; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>柵格系統--列偏移</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .row{ margin-bottom: 5px; } [class*="col-"]{ background-color: darkgray; border: 1px solid red; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1">1</div> <div class="col-md-3 col-md-offset-5">2</div> </div> <div class="row"> <div class="col-md-4 col-md-push-8">1</div> <div class="col-md-8 div col-md-pull-4">2</div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>柵格系統——列巢狀</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> .content{ border: 2px solid bisque; } </style> </head> <body> <div class="container"> <div class="jumbotron"> <h1>Hello, Bootstrap World!</h1> <p>柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面佈局</p> </div> <div class="row"> <div class="col-sm-6 content"> <h3>left</h3> <p>Bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列</p> <p>good</p> </div> <div class="col-sm-6"> <div class="row"> <div class="col-sm-6 content"> <h3>right-left</h3> <p>Bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列</p> <p>very good!</p> </div> <div class="col-sm-6 content"> <h3>right-right</h3> <p>Bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列</p> <p>very good!</p> </div> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>柵格系統——響應式佈局</title> </style> </head> <body> <div class="container-fluid login"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3"> <form class="form-horizontal loginForm"> <h3 class="form-signin-heading">使用者登入</h3> <div class="form-group"> <label for="email" class="col-sm-2 col-xs-3 control-label">郵箱</label> <div class="col-sm-8 col-xs-8"> <input type="text" class="form-control" name="email" placeholder="請輸入郵箱"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 col-xs-3 control-label">密碼</label> <div class="col-sm-8 col-xs-8"> <input type="password" class="form-control" name="password" placeholder="請輸入密碼"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-4 col-xs-4 "> <div class="checkbox"> <label> <input type="checkbox">記住我 </label> </div> </div> <div class="col-sm-4 col-xs-4 control-label" > <a href="resetPwd.html" id="forget">忘記密碼？</a> </div> </div> <div class="form-group"> <div class="col-sm-12 col-lg-12"> <button type="button" class="btn btn-primary btn-block" id="submit">登入</button> </div> </div> </form> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>柵格系統——綜合例項</title> <style> aside{ border: 1px solid #CCCCCC;} aside ul li{ padding: 5px 5px;} .content{border: 1px solid #CCCCCC;} h5{ font-weight: bold; font-size: 15px;} footer{ background-color: darkgrey; border-bottom-color: #E7E7E7; height: 50px; border: 1px solid #E7E7E7; border-radius: 4px; margin-top: 20px; padding: 15px 0px; } </style> </head> <body> <div class="container"> <div class="row"> <div class=" col-sm-7"> <img src="img/logo.png" class="img-responsive" /> </div> <div class="col-sm-5"> <div class="row"> <div class="col-sm-12" style="padding-top:20px;"> <input type="text" /> <button class="btn">搜尋</button> </div> </div> </div> </div> <nav class="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand" href="#"></a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">主頁</a></li> <li ><a href="#">學校概況</a></li> <li ><a href="#">機構設定</a></li> <li ><a href="#">院系設定</a></li> <li ><a href="#">職能部門</a></li> <li ><a href="#">人才培養</a></li> <li ><a href="#">招生就業</a></li> <li ><a href="#">校園文化</a></li> </ul> </nav> <div class="row"> <div class="col-sm-2" > <aside> <h5>線上服務</h5> <ul > <li><a href="#">人才招聘</a></li> <li><a href="#">心理諮詢</a></li> <li><a href="#">招標採購</a></li> <li><a href="#">校歷資訊</a></li> <li><a href="#">公開校園</a></li> <li><a href="#">地圖形象</a></li> <li><a href="#">宣傳片</a></li> <li><a href="#">圖書館</a></li> <li><a href="#">雲盤</a></li> </ul> </aside> </div> <div class="col-sm-8 content" > <h4>校內新聞</h4> <section> <h5>【不忘初心 牢記使命】報道之三十四</h5> <p> 自學校開展“不忘初心、牢記使命”主題教育以來，校黨委高度重視、迅速行動，詳細制定教育方案，精心策劃活動內容，統籌安排工作進度。在校黨委的統一部署下，生工學院圍繞實驗室管理、產學研協同育人、人才培養等師生關心關注問題，以啃“硬骨頭”的勇氣、拔“鐵釘子”的韌勁，以抓實調查研究為載體，以深入檢視問題為契機，以狠抓整改落實為驅動，堅持密切聯絡實際，堅持問題導向，切實把學習教育、調查研究、檢視問題、整改落實貫穿主題教育全過程，取得了實實在在的成效。</p> </section> <br /><br /><br /><br /><br /><br /><br /> </div> <div class="col-sm-2" > <aside> <h5>聯絡我們</h5> <ul > <li><a href="#">書記信箱</a></li> <li><a href="#">校長信箱</a></li> <li><a href="#">官方微信</a></li> <li><a href="#">官方微博</a></li> </ul> </aside> </div> </div> <div class="row"> <div class="col-sm-12"> <footer class="text-center"> <p>@2020 藝丹工作室 版權所有 </p> </footer> </div> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap標題</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="page-header"> <h1>頁面標題例項 <small>子標題</small> </h1> <span class="h1">樣式類標題<small>子標題</small></span> </div> <p>這是一個示例文字。這是一個示例文字。</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap文字強調</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p>全域性文字字號為14px(font-size)，顏色為深灰色（#333）；</p> <!--強調內容--> <p class="lead"> .lead類是增大文字字號，加粗文字 </p> <b>加粗b</b> ----------<strong>加粗strong</strong> <em>斜體em</em>---------<i>斜體i</i> <div class="text-muted">.text-muted：提示，使用淺灰色</div> <div class="text-primary">.text-primary：主要，使用藍色</div> <div class="text-success">.text-success：成功，使用淺綠色</div> <div class="text-info">.text-info：通知資訊，使用淺藍色</div> <div class="text-warning">.text-warning：警告，使用黃色</div> <div class="text-danger">.text-danger：危險，使用淺紅色</div> <abbr title="武漢輕工大學" class="initialism">輕工大</abbr> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>地址與縮略語</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <address> <strong>武漢輕工大學</strong><br> 湖北省武漢市常青花園學府南路68號<br> <abbr title="phone">P:</abbr> (027) 87654321 </address><br /><br /> <address> <strong>劉兵</strong><br> <a href="mailto:#">[email protected]</a> </address> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>列表綜合</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> body{padding:50px;} </style> </head> <body> <h3>基礎列表組</h3> <ul class="list-group"> <li class="list-group-item">HTML</li> <li class="list-group-item">CSS</li> <li class="list-group-item">JavaScript</li> </ul> <h3>自定義列表組</h3> <div class="list-group"> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">Bootstrap</h4> <p class="list-group-item-text"> 深入瞭解 Bootstrap 底層結構的關鍵部分，包括我們讓 web 開發變得更好、更快、更強壯的最佳實踐。</p> </a> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">jQuery</h4> <p class="list-group-item-text">jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。</p> </a> </div> <h3>多彩組合列表組</h3> <div class="list-group"> <a href="##" class="list-group-item active"><span class="badge">5902</span>HTML/a> <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>CSS</a> <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>JavaScript</a> <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>jQuery</a> <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Bootstrap</a> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap表格</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="container"> <table class="table table-bordered table-hover table-condensed"> <caption>學生資訊</caption> <thead> <tr class="active"> <th>姓名</th> <th>學號</th> </tr> </thead> <tbody> <tr class="danger"> <th>張三</th> <th>19</th> </tr> <tr > <th>李四</th> <th>20</th> </tr> </tbody> </table> <div class="table-responsive"> <table class="table"> <thead style="background-color: #2aabd2"> <tr > <th>語言</th> <th>說明</th> </tr> </thead> <tbody> <tr class="text-success"> <th>JavaScript</th> <th>控制網頁行為</th> </tr> <tr> <th>bootstrap</th> <th> Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。 </th> </tr> </tbody> </table> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bootstrap按鈕</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <p> <button type="button" class="btn btn-primary btn-lg active">啟用狀態原始大按鈕）</button> <button type="button" class="btn btn-default" disabled="disabled">預設尺寸禁用按鈕</button> </p> <p> <button type="button" class="btn btn-success btn-sm">成功狀態小按鈕</button> <button type="button" class="btn btn-info btn-xs">（超小尺寸）資訊按鈕</button> <button type="button" class="btn btn-link">連結按鈕</button> </p> <button type="button" class="btn btn-warning btn-lg btn-block">（塊級元素）警告按鈕</button> <button type="button" class="btn btn-danger btn-lg btn-block">（塊級元素）危險按鈕 </button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圖片</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> body{padding:15px;} </style> </head> <body> <div class="container"> <div class=" text-center col-sm-3"> <img class="img-responsive" src="img/test.png"> <h3>正常效果</h3> </div> <div class=" text-center col-sm-3"> <img class="img-responsive img-rounded " src="img/test.png"> <h3>圓角效果</h3> </div> <div class=" text-center col-sm-3"> <img class="img-responsive img-circle " src="img/test.png"> <h3>圓形效果</h3> </div> <div class=" text-center col-sm-3"> <img class="img-responsive img-thumbnail " src="img/test.png"> <h3>鑲邊效果</h3> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> </div> <div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p> <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> </div> </div> </div> <div class="container"> <h1 class="page-header">標題</h1> <h1>h1.一級標題 margin-top:20px,margin-bootom:10px</h1> <h2>h2.二級標題 margin-top:20px,margin-bootom:10px</h2> <h3>h3.三級級標題 margin-top:20px,margin-bootom:10px</h3> <h4>h4.四級標題 margin-top:10px,margin-bootom:10px</h4> <h5>h5.一級標題 margin-top:20px,margin-bootom:10px</h5> <h6>h6.一級標題 margin-top:20px,margin-bootom:10px</h6> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="col-md-6 col-md-offset-3"> <form action="http://wwww.baidu.com" class=""> <div class="form-group has-feedback"> <label for="username">使用者名稱</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input id="username" class="form-control" placeholder="請輸入使用者名稱" maxlength="20" type="text"> </div> <span style="color:red;display: none;" class="tips"></span> <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span> <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-feedback"> <label for="password">密碼</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input id="password" class="form-control" placeholder="請輸入密碼" maxlength="20" type="password"> </div> <span style="color:red;display: none;" class="tips"></span> <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span> <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-feedback"> <label for="passwordConfirm">確認密碼</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input id="passwordConfirm" class="form-control" placeholder="請再次輸入密碼" maxlength="20" type="password"> </div> <span style="color:red;display: none;" class="tips"></span> <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span> <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-7"> <div class="form-group has-feedback"> <label for="idcode-btn">驗證碼</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span> <input id="idcode-btn" class="form-control" placeholder="請輸入驗證碼" maxlength="4" type="text"> </div> <span style="color:red;display: none;" class="tips"></span> <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span> <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div> <div class="col-xs-5" style="padding-top: 30px"> <div id="idcode" style="background: transparent;"></div> </div> </div> <div class="form-group has-feedback"> <label for="phoneNum">手機號碼</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span> <input id="phoneNum" class="form-control" placeholder="請輸入手機號碼" maxlength="11" type="text"> </div> <span style="color:red;display: none;" class="tips"></span> <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span> <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-7"> <div class="form-group has-feedback"> <label for="idcode-btn">校驗碼</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span> <input id="idcode-btn" class="form-control" placeholder="請輸入校驗碼" maxlength="6" type="text"> </div> <span style="color:red;display: none;" class="tips"></span> <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span> <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div> <div class="col-xs-4 text-center" style="padding-top: 26px"> <button type="button" id="loadingButton" class="btn btn-primary" autocomplete="off">獲取簡訊校驗碼</button> </div> </div> <div class="row"> <div class=" col-xs-offset-1 col-xs-5"> <input class="form-control btn btn-primary" id="submit" value="立 即 注 冊" type="submit"> </div> <div class="col-xs-5"> <input value="重 置" id="reset" class="form-control btn btn-danger" type="reset"> </div> </div> </form> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="./css/bootstrap.min.css" rel="stylesheet"> <style> .row div{ border: 1px solid gray;} </style> </head> <body> <div class="container"> <ul class="list-group"> <li class="list-group-item">football</li> <li class="list-group-item"> <span class="badge list-group-item-warning">20</span>football </li> <li class="list-group-item list-group-item-danger"><a href="">football</a></li> <li class="list-group-item">football</li><br><br><br> <table border="1" width="80%" class="table table-hover"> <tr class="table-bordered"> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr class="active"> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr class="danger"> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </table> </ul> </div> </body> </html>