サマリー:<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" &nb
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="lib/dist/css/bootstrap.css"> <title>后臺(tái)帶輪播圖</title> <style type="text/css"> .btn{background: pink;} .btn-primary{background: pink;} </style> </head> <body> <a href="#declare" class="btn btn-primary" data-toggle="collapse">操作說(shuō)明</a> <div id="declare"> <div class="well well-sm"> <p>可以修改用戶名稱,商品信息</p> </div> </div> <hr> <!--制作一個(gè)可折疊的菜單,常用來(lái)制作網(wǎng)站后臺(tái)左側(cè)菜單區(qū)--> <style> #declare1 *,#declare2 *,a[href="#declare1"],a[href="#declare2"]{border-radius: 0;} </style> <a href="#declare1" class="btn btn-primary" data-toggle="collapse">用戶管理</a> <div id="declare1"> <!--制作垂直按鈕組--> <div> <a href="" class="btn btn-default">修改密碼</a> <a href="" class="btn btn-default">用戶列表</a> <a href="" class="btn btn-default">積分查詢</a> </div> </div> <br> <a href="#declare2" class="btn btn-primary" data-toggle="collapse">商品管理</a> <div id="declare2"> <!--制作垂直按鈕組--> <div> <a href="" class="btn btn-default">分類管理</a> <a href="" class="btn btn-default">促銷管理</a> <a href="" class="btn btn-default">訂單管理</a> </div> </div> <br> <div id="slider" class="carousel slide" data-ride="carousel"> <!--2.設(shè)置輪播圖的播放順序--> <ol > <li data-target="#slider" data-slide-to="0"></li> <li data-target="#slider" data-slide-to="1"></li> <li data-target="#slider" data-slide-to="2"></li> </ol> <!--3.設(shè)置輪播的圖片--> <div> <!--每張圖添加.item, 并設(shè)置第一張為當(dāng)前激活狀態(tài).active--> <div class="item active"> <img src="1.jpg" alt=""> <div></div> </div> <div> <img src="2.jpg" alt=""> <div></div> </div> <div> <img src="3.jpg" alt=""> <div></div> </div> </div> <!--4.設(shè)置輪播圖的播放--> <!--data-slide="prev":點(diǎn)擊后向前播放--> <a href="#slider" class="carousel-control left" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <!--data-slide="prev":點(diǎn)擊后向后播放--> <a href="#slider" class="carousel-control right" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="lib/jquery.js"></script> <script src="lib/dist/js/bootstrap.js"></script> </body> </html>
不用調(diào)css,有需要的加到標(biāo)簽里,省好多功夫
需要清楚自己的需求并會(huì)查文檔,才做得出漂亮的
添削の先生:滅絕師太添削時(shí)間:2018-11-24 16:38:13
先生のまとめ:是的,還是要多研究文檔,熟練使用組件,作業(yè)完成的不錯(cuò)!