1. 程式人生 > >Python之路57-前端快速開發

Python之路57-前端快速開發

python

適用於全棧

BootStrap

css、js


學習BootStrap規則

1.響應式

@media

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 50px;
        }
        @media (min-width: 900px) {
            .c2{
                background-color: gray;
            }
        }
    </style>
</head>
<body>
    <div class="c1 c2"></div>
</body>
</html>

2.圖標、字體

@font-face


3.基本使用

樣式有優先級強制生效方式

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


適用於後臺管理


jQueryUI

css、js

學習jQueryUI規則


EasyUI

css、js

學習EasyUI規則



輪播圖

bxslider

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css" />
</head>
<body>
    <ul class="bxslider">
        <li><img src="images/1.jpg" /></li>
          <li><img src="images/2.jpg" /></li>
          <li><img src="images/3.jpg" /></li>
          <li><img src="images/4.jpg" /></li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script src="jquery.bxslider/jquery.bxslider.js"></script>
    <script>
        $(document).ready(function(){
            $(‘.bxslider‘).bxSlider();
        });
    </script>
</body>
</html>


本文出自 “八英裏” 博客,請務必保留此出處http://5921271.blog.51cto.com/5911271/1926678

Python之路57-前端快速開發