前端模板

最新推荐文章于 2024-02-16 21:14:13 发布

weixin_30362083

最新推荐文章于 2024-02-16 21:14:13 发布

阅读量143

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/momo8238/p/7483170.html

版权

一，做后台管理的。

1. 插件1: easyUI，中方下载网址：示例都在demo中。

它默认会增加一些代码，不仅需要修改CSS，还需要修改JS。修改起来有点费劲。

2. 把下载的jquery-easyui-1.5.3 放到文件夹下。copy网页中的源码，修改路径，进行测试。

测试效果：

3. 插件2，jQueryUI。功能同上，但是不如上面的好看，只推荐1个星。

二，全栈开发插件

1. bootstrap

需要学习BootStrap的规则
一，响应式。

1. 默认情况下，c2样式把c1覆盖了。通过设置达到：当屏幕宽度小于或者大于多少的时候，让某个值生效。CSS做出不同的响应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color:red;
            height:50px;
        }
        .c2{
            background-color:grey;
        }
    </style>
</head>
<body>
    <div class="c1 c2"></div>
</body>
</html>

2. @media 当屏幕宽度大于500px的时候c2生效。

当屏幕宽度小于500px的时候c1生效。

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

3. 图标不再以图片的格式显示了。而是以字体的格式显示了。每个图标有了一个编号：font-face

.glyphicon-cloud:before{

content:''\2601''}

4. BootStrap的JS是基于jQuery，所以需要把jQuery也导入进来。

如果自己想添加样式,并且想让自己的样式生效的话，一定要给自己的样式设置上优先级。

因为你不知道别人的代码在哪里，如果知道的话，写在别人的代码的下面也是可以生效的。

（由于下载BootStrap没有成功，此处自己没有亲测。待续）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.css"/>
</head>
<body>
    此处插入模板即可，可以用检查的功能获得源码。
    <script src="jquery-1.12.4.js"></script>
    <script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>
</body>
</html>

三，bxslider插件

1.下载

2. $(document).ready(function(){ $('.bxslider').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="1.png" /></li>
        <li><img src="2.png" /></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>

效果：

转载于:https://www.cnblogs.com/momo8238/p/7483170.html

weixin_30362083

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端模板

一，做后台管理的。1. 插件1: easyUI，中方下载网址：示例都在demo中。它默认会增加一些代码，不仅需要修改CSS，还需要修改JS。修改起来有点费劲。2. 把下载的jquery-easyui-1.5.3 放到文件夹下。copy网页中的源码，修改路径，进行测试。测试效果：3. 插件2，jQueryUI。功能同上，但是不如上面的好看，只推荐1个...
复制链接

扫一扫