首页 > 代码库 > 前端快速开发

前端快速开发

2024-10-01 05:02:39   215人阅读

一、介绍

适用于全栈

BootStrap

适用于后台管理

jQueryUI

EasyUI

 

二、学习BootStrap规则

1.响应式 @media

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             background-color: red;
 9             height: 50px;
10         }
11         @media (min-width: 900px) {
12             .c2{
13                 background-color: gray;
14             }
15         }
16     </style>
17 </head>
18 <body>
19     <div class="c1 c2"></div>
20 </body>
21 </html>

2.图标、字体 @font-face

3.基本使用 样式有优先级强制生效方式

 .no-radus{ background-radius: 0 !inportant; } 

 

三、轮播图 bxslider插件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="http://www.mamicode.com/jquery.bxslider/jquery.bxslider.css" />
 7 </head>
 8 <body>
 9     <ul class="bxslider">
10         <li><img src="http://www.mamicode.com/images/1.jpg" /></li>
11           <li><img src="http://www.mamicode.com/images/2.jpg" /></li>
12           <li><img src="http://www.mamicode.com/images/3.jpg" /></li>
13           <li><img src="http://www.mamicode.com/images/4.jpg" /></li>
14     </ul>
15     <script src="http://www.mamicode.com/jquery-1.12.4.js"></script>
16     <script src="http://www.mamicode.com/jquery.bxslider/jquery.bxslider.js"></script>
17     <script>
18         $(document).ready(function(){
19             $(‘.bxslider‘).bxSlider();
20         });
21     </script>
22 </body>
23 </html>

 

前端快速开发


联系
我们