码迷,mamicode.com
首页 > 其他好文 > 详细

前端快速开发

时间:2017-06-05 12:37:43      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:jquer   font-face   span   响应   优先级   doc   div   使用   back   

一、介绍

适用于全栈

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="jquery.bxslider/jquery.bxslider.css" />
 7 </head>
 8 <body>
 9     <ul class="bxslider">
10         <li><img src="images/1.jpg" /></li>
11           <li><img src="images/2.jpg" /></li>
12           <li><img src="images/3.jpg" /></li>
13           <li><img src="images/4.jpg" /></li>
14     </ul>
15     <script src="jquery-1.12.4.js"></script>
16     <script src="jquery.bxslider/jquery.bxslider.js"></script>
17     <script>
18         $(document).ready(function(){
19             $(‘.bxslider‘).bxSlider();
20         });
21     </script>
22 </body>
23 </html>

 

前端快速开发

标签:jquer   font-face   span   响应   优先级   doc   div   使用   back   

原文地址:http://www.cnblogs.com/qiang8216/p/6944171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!