一响应式布局
@media
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { background-color: red; height: 50px; } /*大于700宽度生效*/ @media (min- 700px) { .c2 { background-color: blue; } } </style> </head> <body> <div class="c1 c2"></div> </body> </html>
二组件
后台管理
轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bxslider-4-4.2.12/dist/jquery.bxslider.min.css"> </head> <body> <div class="bxslider"> <div><img src="https://www.bxslider.cn/assets/images/coffee1.jpg" title="Funky roots"></div> <div><img src="https://www.bxslider.cn/assets/images/coffee2.jpg" title="The long and winding road"></div> <div><img src="https://www.bxslider.cn/assets/images/coffee3.jpg" title="Happy trees"></div> </div> <script src="jquery-1.12.4.js"></script> <script src="bxslider-4-4.2.12/dist/jquery.bxslider.min.js"></script> <script> $(function(){ $('.bxslider').bxSlider({ mode: 'fade', captions: true, slideWidth: 600 }); }); // 框架加载完成 // $(document).ready(function () { // // }) // $(function () { // // }) </script> </body> </html>
Bootstrap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"> <style> .btn-success { /*最重要的*/ 200px; !important; } </style> </head> <body> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
都依赖于JQUERY