abstract:<!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>后台带轮播图</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">操作说明</a> <div id="declare"> <div class="well well-sm"> <p>可以修改用户名称,商品信息</p> </div> </div> <hr> <!--制作一个可折叠的菜单,常用来制作网站后台左侧菜单区--> <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.设置轮播图的播放顺序--> <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.设置轮播的图片--> <div> <!--每张图添加.item, 并设置第一张为当前激活状态.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.设置轮播图的播放--> <!--data-slide="prev":点击后向前播放--> <a href="#slider" class="carousel-control left" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <!--data-slide="prev":点击后向后播放--> <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>
不用调css,有需要的加到标签里,省好多功夫
需要清楚自己的需求并会查文档,才做得出漂亮的
Correcting teacher:灭绝师太Correction time:2018-11-24 16:38:13
Teacher's summary:是的,还是要多研究文档,熟练使用组件,作业完成的不错!