1、介绍

  • BootStrap （最好看的）

    • css
    • js
    • [x] 学习 BootStrap 规则

  • jQueryUI （美观一般，偏后台。*）

    • css
    • js
    • [x] 学习 jQueryUI 规则

  • EasyUI （html框架和生成的效果不一样，有时需要修改css、js，代价大一点）

    • css
    • js
    • [x] 学习jQueryUI 规则

**总结：**jQueryUI和EasyUI 用在后台管理偏多，Bootstrap 后台主页显示都可以用。

可以直接用模板，不用重复造轮子。

2、BootStrap

  • 响应式布局（响应式页面）

面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。比如网页随着窗口大小的变化而显示不同的样式。

BootStrap css里面存在大量的响应式布局。

<head>

    <style>

        .c1{

            background-color: red;

            height: 50px;

        }

        @media (min-width: 900px){

            .c2{

                background-color: grey;

            }

        }

    </style>

</head>

<body>

    <div class="c1 c2"></div>

</body>

　　

  • 图标、字体 @font-face

BootStrap 里面有图标，但是没有图片，里面的图标是基于字体做的。

在 dist/fonts/ 目录里面。每个图标都有绑定的位置。比如 ”content: “\2212”“

使用的时候直接写上图标样式就可以了。

  • 基本使用

修改BootStrap里面的样式时，注意样式有优先级的，下面的生效。更方便的，设置为最优先，最重要的。

.no-radius{

    border-radius: 0 !important;    /*优先级最高，最重要的*/

}

　　

<!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">

    <style>

        .no-radius{

            border-radius: 0 !important;    /*优先级最高，最重要的*/

        }

    </style>

</head>

<body>

    <span class="glyphicon glyphicon-plus-sign"></span>

    <script src="jquery-1.12.4.js"></script>

    <script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>

</body>

</html>

　　

3、插件实现轮播图（bxSlider）

bxslider.com 下载插件，网站上有使用教程。

<!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="data:images/1.jpg" /></li>

        <li><img src="data:images/2.jpg" /></li>

        <li><img src="data:images/3.jpg" /></li>

        <li><img src="data: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>

　　

HTML模版组件的更多相关文章

  1. VUE入门实例，模版组件用法

    这里每一个例子可以直接拷进body运行. 本系列为学习记录,并非大神教学案例. 仅仅整理用法,至于VUE的原理,设计模式等等暂不讨论,文中如有不对,还请大家帮忙指正,万分感激. 下一篇会写父子组件交互 ...

  2. vue 模版组件用法

    第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../nod ...

  3. 国外一些好用的UX/UI设计工具和资源分享

    国外一些好用的UX/UI设计工具和资源分享 你今天使用的设计工具也许不再适合以后的网页和APP设计项目了.新的工具不断的推出市场,目标只有一个,让你的工作更快.更容易而且工作成效更好.今天分享的这些U ...

  4. Vulkan Tutorial 28 Depth buffering

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 到目前为止,我们所使用的几何图形为3D,但仍然完全扁平的. ...

  5. SynEdit(Delphi XE7)的安装和基本使用

    一.花絮 delphi自带的memo显示sql语句看的太累人了,今天决定美化一下.最起码要有“语法着色”.“显示行号”这2个功能. 意外发现了 SynEdit 控件. SynEdit是一个免费的文字编 ...

  6. vue学习之路之需要了解的知识汇总

    一.vue是什么? 相关网页:  https://vuejs.bootcss.com/v2/guide/       及菜鸟教程       https://www.runoob.com/vue2/v ...

  7. 国外一些好用的UX/UI设计工具和资源介绍

    你今天使用的设计工具也许不再适合以后的网页和APP设计项目了.新的工具不断的推出市场,目标只有一个,让你的工作更快.更容易而且工作成效更好.以下就是各种工具的介绍入口,当您点击标题就会看到各种很好的工 ...

  8. 解密国内BAT等大厂前端技术体系-百度篇（长文建议收藏）

    1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...

  9. [译]Vulkan教程(30)深度缓存

    [译]Vulkan教程(30)深度缓存 Depth buffering 深度缓存 Introduction 入门 The geometry we've worked with so far is pr ...

随机推荐

  1. IDEA运行报错 Error:java: 错误: 不支持发行版本 xx

    解决方案 修改项目配置,进入Project Setting,截图可参考下面的截图 1.修改全局设置 修改Project->Project Language Level->选择版本比当前jd ...

  2. App 性能测试分享

    在本文内,主要以Android性能测试为主进行分析 一.性能测试包含 1.启动时间测试   测试场景包括 - - - 首次安装启动时间.冷启动.热启动测试 2.页面响应时间:   用户从点击一个控件, ...

  3. Redis 笔记（六）—— ZSET 常用命令

    常用命令 命令 用例和描述 ZADD ZADD key-name score member [score member ...] —— 将带有分值的成员添加到 HSET 中 ZREM ZREM key ...

  4. LeetCode | 289. 生命游戏（原地算法/位运算）

    记录dalao的位运算骚操作 根据百度百科 ,生命游戏,简称为生命,是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机. 给定一个包含 m × n 个格子的面板,每一个格子都可以看成是一个细 ...

  5. Windows 手动安装 Apache24 web服务器

    文章更新于:2020-02-18 按照惯例,需要的文件附上链接放在文首 文件名:httpd-2.4.41-o111c-x64-vc15-r2.7z 文件大小:6.1MB 下载链接:https://ww ...

  6. win10无法使用VMwareWorkstation的解决办法

    最近(2019-10)国庆期间,微软更新了一次win10. 此次更新导致很多同学的Workstation pro不能用了. 主要的解决办法有一下几种: 卸载最新的系统更新包 在控制面板>> ...

  7. js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用

    主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...

  8. MySQL入门，第八部分，多表查询（二）

    嵌套查询 嵌套查询是指一个SELECT-FROM-WHERE查询块嵌入在另一个SELECT-FROM-WHERE查询块的WHERE子句中的查询 注意: 只有当连接查询投影列的属性来自于一个关系表时才能 ...

  9. PHP程序员的能力水平层次(一)

    前言 之前看过很多篇关于服务端工程师和PHP开发者的能力模型介绍,每篇都对能力有侧重点. 下面我们来详细谈谈以开发能力为基准点的PHP程序员的能力水平层次. 层层递进 1.功能开发 这个水平的程序员一 ...

  10. 【python实现卷积神经网络】损失函数的定义（均方误差损失、交叉熵损失）

    代码来源:https://github.com/eriklindernoren/ML-From-Scratch 卷积神经网络中卷积层Conv2D(带stride.padding)的具体实现:https ...