bomess
bomess

Font-Awesome最新版完整使用教程

何为Font-Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

简言之:可伸缩的图标(矢量化),高度自定义(大小,颜色,阴影等)

优势

  1. 目前图标总数共有519个;
  2. 不依赖Javascript
  3. 矢量图形,无限缩放
  4. 免费,可用于商业
  5. CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果
  6. 支持retina显示(苹果retina 屏幕)
  7. 源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架
  8. 兼容屏幕阅读器
  9. 图标用到的animation适用于IE8~9

缺点

  • 不兼容IE7(不过现在用户使用主流浏览器都慢慢过渡到较新的..所以也不算奇葩)

获取Font-Awesome

  • 官网 — 点击Download即可下载最新版本
  • Github — Font-Awesome仓库

使用方法

本地使用

下载完毕[font-awesome-4.3.0.zip]解压文件包括以下几个文件夹:

  • CSS — 字体的引入,图标基础样式,大小等
  • fonts — CSS需要引用字体文件夹,本地用户需要安装内部的fontawesome-webfont.ttf(CSS引入字体)
  • less — 各种参数自定义的less文件,用来自定义Font awesome
  • sass — 各种参数自定义的sass文件,用来自定义Font awesome

SASS和LESS都是CSS预处理器

把CSS文件夹和fonts复制到网站根目录(记得安装字体)即可使用,具体看代码示例
代码内含注释—应该很好理解
建议:用Chrome F12调试,一边查看注释一边折腾更妙

index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Font-Awesome完整教程</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!--生产环境建议用压缩版本,非压缩版本建议学习使用 -->

    <style> * { outline: 0px; border: 0px; margin: 0px; padding: 0px; } div { border: 2px solid #882BEF; margin: 30px; width: 500px; height: auto; } ul { list-style: none; } div { border: 2px solid #882BEF; margin: 30px; width: 500px; height: auto; } .extraHeight { height: 400px; } .extraHeight ul li { margin: 10px auto; } <!--啊咧,这上面所有样式只是让效果显示排版一下而增加的--> </style>
  </head>

  <body>
    <div class="icon-test-list">
      <h1>图标基础样式</h1>
      <ul>
        <li><i class="fa fa-weixin"></i>微信</li>
        <li><i class="fa fa-whatsapp"></i>whatsapp</li>
        <li><i class="fa fa-youtube"></i>youtube</li>
        <li><i class="fa fa-weibo"></i>新浪微博</li>
      </ul>
    </div>
    <div class="icon-test-list">
      <h1>图标规格样式</h1>
      <span></span>
      <ul>
        <li><i class="fa fa-weixin "></i>微信</li>
        <li><i class="fa fa-weixin fa-lg"></i>微信lg</li>
        <li><i class="fa fa-weixin fa-2x"></i>微信</li>
        <li><i class="fa fa-weixin fa-3x"></i>微信3x</li>
        <li><i class="fa fa-weixin fa-4x"></i>信4x</li>
        <li><i class="fa fa-weixin fa-5x"></i>微信5x</li>
      </ul>
    </div>
    <!-- fa-lg比常规图标大33%,而2X~5x都是常规图标大小的倍数,具体可以用F12调试查看计算 也可以去查看less的规则 -->

    <div class="icon-test-list">
      <h1>图标固定大小</h1>
      <ul>
        <li><i class="fa fa-fw fa-weixin"></i>微信</li>
        <li><i class="fa fa-fw fa-whatsapp"></i>whatsapp</li>
        <li><i class="fa fa-fw fa-youtube"></i>youtube</li>
        <li><i class="fa fa-fw fa-weibo"></i>新浪微博</li>
      </ul>
    </div>
    <!-- fa-fw是用来固定大小的 -->

    <div class="icon-test-list extraHeight">
      <h1>图标边框及图标移动</h1>
      <ul>
        <li><i class="fa fa-tag pull-right"></i>这是一句测试的文字,图标定位在右边</li>
        <li><i class="fa fa-tag fa-2x pull-left "></i>
          <p>图标没有边框,图标在左边,图标2x[这是填充文字这是填充文字这是填充文字这是填充文字]</p>
        </li>
        <li><i class="fa fa-search fa-3x pull-right fa-border"></i>
          <p>我的图标三倍大小,内容在右边,且图标有边框[这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字]</p>
        </li>
      </ul>
    </div>
    <!-- fa-border 可以给图标加一个边框 pull-right和pull-left可以控制图标位置,是文字环绕 -->


    <div class="icon-test-list">
      <h1>图标动画</h1>
      <ul>
        <li><i class="fa fa-spin fa-2x fa-arrow-right"></i> fa-arrow-right-匀速旋转,2s一圈</li>
        <li><i class="fa fa-spin fa-2x fa-spinner fa-pulse"></i>fa-spinner--一圈分为八次转完,时间1S</li>
      </ul>
    </div>

    <!-- 在less里面定义 spin的速度是linear(匀速),一圈2s pulse分为八步,一圈时间1S -->
    <div class="icon-test-list">
      <h1>图标旋转</h1>
      <ul>
        <li><i class="fa fa-hand-o-up "></i>手:默认状况</li>
        <li><i class="fa fa-hand-o-up fa-rotate-90 "></i>手:旋转90度</li>
        <li><i class="fa fa-hand-o-up fa-rotate-180 "></i>手:旋转180度</li>
        <li><i class="fa fa-hand-o-up fa-rotate-270"></i>手:旋转270度</li>
        <li><i class="fa fa-hand-o-up fa-flip-horizontal "></i>手:水平(90%)</li>
        <li><i class="fa fa-hand-o-up fa-flip-vertical "></i>手:垂直(180%)</li>
      </ul>
    </div>
    <!-- fa-rotate-*:来控制旋转的度数 fa-flip-*:两个参数来控制水平和垂直 -->

    <div class="icon-test-lise">
      <h1>堆叠图标:合并图形</h1>
      <ul>
        <li>
          <span class="fa-stack">
            <i class="fa fa-stack-2x fa-bookmark-o"></i>
            <i class="fa fa-stack-1x fa-child"></i>
          </span>随便找的两个图标合成
        </li>
        <li>
          <span class="fa-stack">
            <i class="fa fa-stack-2x fa-lemon-o"></i>
            <i class="fa fa-stack-1x fa-chain "></i>
          </span>随便找的两个图标合成
        </li>
        <li>
          <span class="fa-stack">
            <i class="fa fa-stack-2x fa-wheelchair"></i>
            <i class="fa fa-stack-1x fa-transgender-alt"></i>
          </span>随便找的两个图标合成
        </li>
        <li>
          <span class="fa-stack fa-2x">
            <i class="fa fa-stack-1x fa-comment"></i>
            <i class="fa fa-stack-2x fa-linux"></i>
          </span>随便找的两个图标合成
        </li>
        <li>
          <span class="fa-stack fa-3x">
            <i class="fa fa-stack-1x fa-chain"></i>
            <i class="fa fa-stack-2x fa-circle-o "></i>
          </span>随便找的两个图标合成
        </li>
        <li>
          <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
            </span>随便找的两个图标合成
        </li>
      </ul>
    </div>
    <!-- fa-stack作为父,组合子元素生成的对象;可以使用规格参数 fa-stack-2x 作为背景的栈,要大于显示图形的栈 fa-stack-1x 作为背景栈内部的内容,所以要小于背景栈 fa-inverse 用来反转图标颜色,生成可见图标组 -->
  </body>

</html>

CND引用AweSome(推荐)

只要把head内引用本地awesome的位置改下即可

<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

图标大全

  • Font Awesome — 图标有分类,带搜索功能
  • Font Awesome Cheatsheet — 图标汇总表

你可能感兴趣的:(aswsome教程,免费字体集,font-awsom,font引入,免费图标大全)

  • 框架中的左侧菜单关联右侧页面是如何实现的_Axure RP9教程 内部框架 weixin_39767983
    一、说明内部框架是Axure的一个元件，在PC端设计时比较常见，例如CSDN个人中心后台，根据左侧区域选择不同栏目，右侧内容发生变化，实际就是应用了内部框架实现。内部框架对应的就是html元素中iframe标签。二、效果演示案例链接：https://f9d9x0.axshare.com/三、操作步骤1、内部页面首先在公用元件库中找到
  • axure 侧滑抽屉式菜单_AxureRP教程 泽善党 axure侧滑抽屉式菜单
    前面介绍的《AxureRP教程–自适应菜单效果》里的自适应菜单，其实也可以叫做抽屉式菜单，皆因其可展开可收缩，类似抽屉的开关，不过自适应菜单有空间大小的显示，这里介绍的则没有大小限制，完全取决于菜单项的多少。抽屉式菜单网上也有很多朋友尝试制作过，在这里我自己也尝试了一下，做了一个三级菜单的抽屉式效果。抽屉式菜单应用的比较广，一般常见于左侧的导航式菜单。本例的实现原理是用一个动态面板来控制一级菜单，
  • 使用R包rain检测基因表达的生物节律 Mrrunsen R语言大学作业r语言开发语言
    本篇简介一个R包，rain，该包使用非参数方法来检测时间序列中的节律性，常用在基因组、转录组、蛋白质组或代谢组等生物测量数据中分析生物节律（例如昼夜节律或细胞周期）。此外，该方法还能够处理异常值、缺失值，并对包含10-100个测量值的时间序列进行优化。以rain包的内置数据集“menetRNASeqMouseLiver”为例作演示，该数据集来自于一项对小鼠昼夜节律转录调控的研究。小鼠饲养在12h光
  • 使用llama.cpp量化模型 LLM挣扎学员 llama自然语言处理语言模型
    文章目录概要整体实验流程技术细节小结概要大模型量化是指在保持模型性能尽可能不变的情况下，通过减少模型参数的位数来降低模型的计算和存储成本。本次实验环境为魔搭社区提供的免费GPU环境（24G），使用Llama.cpp进行4bit量化可以大幅减少大语言模型的内存占用，并提高推理效率。本次采用的模型为前一篇博客所写的基准模型与LoRA微调后的合并模型。整体实验流程由于基准模型较大就直接在服务器上下载并上
  • 基于HTML的邮件发送状态查询界面设计示例 大霸王龙 html前端javascript
    以下是一个基于HTML的邮件发送状态查询界面设计示例，结合筛选功能、状态展示和重新发送操作，采用Bootstrap框架实现响应式布局：邮件发送状态监控系统.status-badge{padding:4px8px;border-radius:12px;font-size:0.9em;}.success{background-color:#d4edda;color:#155724;}.failed{b
  • Charles 抓包配置保姆教程（PC、IOS、Android） 网络抓包与爬虫 httpudphttpswebsocket网络安全网络协议tcp/ip
    抓包工具基础配置与使用指南大家好，我是十一！今天给大家分享一篇关于抓包工具的基础配置与使用指南。无论是开发、测试还是安全分析，抓包工具都是不可或缺的利器。本文将详细介绍如何配置和使用抓包工具，并特别推荐一款功能强大的工具——SniffMaster（抓包大师），帮助大家更高效地完成抓包任务。安装与破解首先，我们需要选择一款合适的抓包工具。市面上有很多抓包工具，比如Charles、Fiddler等，但
  • 推荐2款简洁、小巧的实用 Windows 软件：完全免费、无广告 网络神器 网络神器开源软件
    聊一聊今天给大家分享2款电脑实用小工具。有喜欢的可以自行下载。软件介绍1.win的桌面时钟这是一款桌面时钟小工具，带天气和日历。显示界面简单大气，需要移动工具，将鼠标放至工具框边沿即可。工具图标在任务栏右下角，右键可以对工具进行设置。2.壁纸切换工具打开工具可以选择图片当壁纸。也可以在网络中选择好看的图片设为桌面。点击工具右下角，可以进行系统设置。这时跳出来的就是电脑的设置。可以选择多张图片，设置
  • TensorFlow-MNIST手写数字分类 Enougme TensorFlowtensorflow分类人工智能
    TensorFlow是一个功能强大的深度学习框架，可以用来构建、训练和部署机器学习模型。主要作用于：构建神经网络模型（回归、分类、生成模型等）。进行数值计算，并提供GPU加速。实现自动梯度求导（如反向传播训练）。应用机器学习模型进行预测。数据准备fromtensorflow.keras.datasetsimportmnist#加载数据集（已划分为训练集和测试集）(x_train,y_train),
  • python-常用的深度学习框架 Enougme TensorFlowpython深度学习开发语言
    Python是当前深度学习与机器学习领域的主流编程语言，其丰富的生态系统和多样化的框架使得构建深度学习模型变得非常高效。以下是一些主流的深度学习框架，以及每个框架的特点和适用场景。1.PyTorch特点：动态计算图：支持动态构建和修改计算图，调试体验好，灵活性强。社区生态丰富：拥有大量教程、开源代码和第三方工具支持。广泛应用：深受研究人员和实验开发者的喜爱，也适用于生产环境。TorchScript
  • cpu架构（x86、ARM、RISC-V、MIPS、loongarch） 啊略略wxx arm开发risc-v
    引言CPU架构（也称为处理器架构）是指计算机处理器的设计和组织结构。不同的CPU架构由不同的指令集架构和执行方式组成，影响了其性能、功耗、兼容性和适用场景。同时不同的CPU架构适用于不同的场景和需求，在选择CPU时，需要考虑到性能、功耗、成本和应用兼容性等因素。随着技术的发展和创新，新的CPU架构不断涌现，推动着计算机领域的发展和进步。架构汇总序号架构特点代表性厂商运营机构发明时间1x86性能高、
  • postman教程-5-发送put请求 米兔软件测试 postman教程postman测试工具
    领取资料，咨询答疑，请➕wei:June__Go上一小节我们学习了postman发送post请求的方法，本小节我们讲解一下postman发送put请求的方法。HTTPPUT请求是一种用于传输数据的网络协议方法，它在客户端和服务器之间的通信中扮演着重要角色。定义PUT是HTTP/1.1协议（RFC7231）定义的一种方法，用于向服务器发送请求，以便更新服务器上的现有资源或创建一个新资源。如果指定的资
  • 如何在 Windows 上安装并使用 Postman？ 一个幽默的程序员 Postmanpostman测试工具
    Postman是一个功能强大的API测试工具，它可以帮助程序员更轻松地测试和调试API。在本文中，我们将讨论如何在Windows上安装和使用Postman。Windows如何安装和使用Postman教程？
  • SpringBoot实现TB级文件分片上传架构实践 Q谈技术 Java设计模式java服务器后端分布式中间件nio
    #业务背景在AI模型生产平台中，文件存储场景包含图片、模型文件（.pt/.h5）、训练数据、用户数据集（CSV/ZIP）、标注数据集（COCO格式）等多样化类型。其中模型文件平均大小达20-50GB，原始数据集经压缩后普遍超过100GB。传统单文件上传方案存在以下痛点：1.HTTP超时导致上传失败率高达35%2.网络波动造成重复传输浪费带宽3.服务端内存溢出风险（单文件加载消耗2GB+内存）4.断
  • 达梦数据库Flink CDC方案改进 肥仔哥哥1930 业务设计思路CDCflinkflankCDC达梦Debezium达梦DebeziumCDC
    系列文章目录达梦数据库CDC方案改进文章目录系列文章目录前言一、优化思路当时的思路：优化思路：二、使用步骤1.引入库2.配置文件增加3.核心代码总结前言之前分享了springboot集成flink实现DM数据库同步到ES，当时是一个面试上机题，时间有限，资源有限，我自己之前也没有用过国产达梦数据库，实现的比较粗糙。今天有空，就优化下分享。一、优化思路当时的思路：创建的一张记录表利用数据库的触发器，
  • rasterio库简介及函数说明 海绵波波107 Python#Python的遥感应用笔记
    目录简介常用函数栅格读写rasterio.open（）dst.write（）仿射变换rasterio.transform.from_origin（）遮罩处理geometry_mask()简介Rasterio是一个用于读写栅格数据集的Python库，它提供了方便的接口来处理各种栅格数据格式，如GeoTIFF、JPEG、PNG等。Rasterio能够读取、写入和处理栅格数据，同时还提供了许多空间分析功
  • Python的RasterIO库的学习 众里寻你千百度 PythonRasterIOPython
    源教程：https://rasterio.readthedocs.io/en/latest/quickstart.html1.使用RasterIO读取栅格数据#使用RasterIO读取栅格数据importrasteriowithrasterio.open('E:/data/L8_BJ_NRG.tif')asds:print('数据信息：')print('数据格式：',ds.driver)print
  • 获取小红书笔记详情接口的详细指南 Jelena15779585792 小红书API笔记python开发语言
    一、引言小红书作为一个集社交、购物、分享于一体的综合性平台，拥有海量的用户和丰富的笔记内容。小红书笔记详情API接口为开发者提供了一种高效获取笔记详细信息的方法，包括笔记的标题、正文、图片、视频、标签、点赞数、评论数等。这些数据可以帮助开发者进行内容分析、用户行为研究、营销策略优化等。二、接口功能与应用场景小红书笔记详情API接口的主要功能包括：数据获取：实时获取小红书上特定笔记的详细信息。数据分
  • 5、Pytorch 实现简单图卷积GCN，数据集Cora分类任务 找个栗子 PyTorch开始到scipytorch人工智能python
    cora数据集-下载地址https://linqs-data.soe.ucsc.edu/public/lbc/cora.tgz1、Cora数据集是什么？Cora数据集由2708篇科学出版物组成，分为七类之一。引文网络由5429个链接组成。数据集中的每个出版物都由一个0/1值的单词向量描述，表示字典中不存在/存在相应的单词。该词典由1433个独特的单词组成。数据集下有两个文件cora.citesco
  • Linux环境使用MCSM面板部署我的世界服务器结合内网穿透远程联机 比奥利奥还傲. 服务器linux运维
    文章目录前言1.安装JAVA2.MCSManager安装3.局域网访问MCSM4.创建我的世界服务器5.局域网联机测试6.安装cpolar内网穿透7.配置公网访问地址8.远程联机测试9.配置固定远程联机端口地址9.1保留一个固定tcp地址9.2配置固定公网TCP地址9.3使用固定公网地址远程联机前言本教程主要介绍如何在LinuxUbuntu系统中使用MCSManager面板搭建我的世界Minecr
  • Python中的NumPy函数探秘：深入了解percentile！ 程序员总部 pythonpythonnumpy开发语言
    在数据分析和科学计算的领域，NumPy无疑是一个强大的工具。它不仅仅是一个数组处理库，更是一个包含丰富功能的数学计算库。说到这些功能，percentile这个函数就特别引人关注！它在处理数据时非常有用，能够帮助我们理解和分析数据的分布情况。那么，percentile到底是什么呢？我们来详细聊聊。percentile函数的主要作用是计算给定数据集中的百分位数。百分位数是将数据集分成100个相等部分的
  • 中文语义相似度检测AI模型实践 墨雪遗痕 AI实践人工智能
    个人博客原文地址上方模型若是未能加载出来，点击这里主动跳转语义相似度输入两句中文，判断是否意思相同大概细节数据集LCQMC是一个公开的中文问句匹配数据集，由哈尔滨工业大学（HIT）的研究团队创建，最初发布于2018年。它旨在研究如何判断两个中文问句是否具有相似的语义。微调模型simcse-chinese-roberta-wwm-ext是一个基于SimCSE（SimpleContrastiveSen
  • nodejs 压缩文件 墨雪遗痕 axiosJavaScriptvue.jsjavascriptnodejs
    这个事情，是为了能自动部署的就是项目打包后，自动压缩文件，然后去向一个后台提供的接口上传这个压缩文件。从而实现自动部署constpath=require('path')constfs=require('fs')constarchiver=require('archiver')//这个就是用于压缩的包constaxios=require('axios')//axios需要引入constFormDat
  • vue3 ts 封装axios,配置axios前置拦截器，让所有axios请求携带token 筱筱° vue3vue.js
    vue3ts封装axios,配置axios前置拦截器，让所有axios请求携带tokenhttp.tsapp.tsvue文件http.tsimportaxiosfrom'axios'//引入axiosimportrouterfrom'@/router'importQsfrom'qs'import{ElMessage}from'element-plus'const{prefixBasePath}=r
  • axure中图表背影_Axure教程：如何制作可视化图表？ weixin_42462474 axure中图表背影
    产品经理日常工作中，避免不了需要去设计后台，在后台中需要去实现一些可视化的图表，那么这些可视化图表如何制作呢？产品经理日常工作中，避免不了需要去设计后台，在后台中需要去实现一些可视化的图表，那么这些可视化图表如何制作呢？可以通过四种个不同的方式，分别是：表格截图、Axure图形绘制、Axure网页框架和Axure第三方元件。一、使用Axure图形绘制可视化图表Excel表格基本上每个人必备的基本计
  • 【Python 】带你快速认识 Global 关键字 HoRain云小助手 python前端
    HoRain云小助手：个人主页个人专栏:《Linux系列教程》《c语言教程》⛺️生活的理想，就是为了理想的生活!⛳️推荐前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。专栏介绍专栏名称专栏介绍《C语言》本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。《网络协议》本专栏主要是注重从底层来给大家一步步剖析网
  • uniapp的app产物如何打成apk Anald uni-app
    环境：hbuilderx4.56androidstudio版本2024.2.1jdk版本jdk1.8.0_1021、使用hbuilderx输出app打包资源"build:app":"unibuild-papp",2、参考如下文档将其转换打成apk参考：离线uniapp资源打包成app教程
  • 松灵Cobot Magic&ARIO，打造具身智能百万规模标准化数据集 BFT白芙堂 机器学习ARIO数据集硬件平台CobotMagic机器人
    具身人工智能开发的三大主要挑战：数据格式不统一：多源异构数据整合困难，训练资源利用率低。场景多样性不足：现有数据集覆盖场景有限，模型泛化能力受限。高质量数据稀缺：标注数据不足，难以满足大规模训练需求，制约性能提升。松灵CobotMagic：真实场景数据采集的核心平台为应对以上挑战，南科大提出来ARIO（AllRobotsInOne）数据集，松灵CobotMagic凭借以下优势成为硬件平台首选：硬件
  • PyTorch量化技术教程：第三章 PyTorch模型构建与训练 船长@Quant Python量化基础pythonpytorchTA-Lib量化交易机器学习深度学习
    PyTorch量化技术教程：PyTorch模型构建与训练本教程旨在为读者提供一套全面且深入的PyTorch技术在量化交易领域应用的知识体系。系统涵盖PyTorch基础入门、核心组件详解、模型构建与训练，以及在A股市场中的实战应用。采用理论与实战深度融合的讲解模式，详细剖析如何运用PyTorch打造量化交易系统全流程。从数据处理的精细操作，到模型训练的优化技巧，再到交易信号生成的精准逻辑，以及风险管
  • 探索未来舆情——推荐开源项目：思通舆情 孔岱怀
    探索未来舆情——推荐开源项目：思通舆情yuqing思通舆情是一款开源免费的舆情系统，支持本地化部署。支持对海量的舆情数据进行多维交叉分析和深度挖掘,为用户户提供全面的舆情数据,专业的舆情分析。项目地址:https://gitcode.com/gh_mirrors/yu/yuqing项目简介思通舆情是一款强大的、完全开源的舆情管理系统，专为实时监测、分析和管理全网舆情而设计。它提供了全面的数据采集、
  • Axure RP 9.0教程: 基于动态面板的元件跟随来实现【音量滑块】 java、iOS、Vue 理解计算机axure
    文章目录引言I音量滑块的实现步骤添加底层边框添加覆盖层基于覆盖层创建动态面板添加滑块按钮设置滑块拖动效果引言音量滑块在播放器类APP应用场景相对较广，例如调节视频的亮度、声音等等。I音量滑块的实现步骤添加底层边框在画布中添加一个矩形框：500x32，圆角设置为16；添加覆盖层选中画布中矩形框Ctrl+D复制一个矩形框，将背景设置为绿色，用作覆盖层；将覆盖层矩形边框设置为0，长宽分别减少2个单位，目
  • Enum用法 不懂事的小屁孩 enum
    以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
  • 【Spark九十七】RDD API之aggregateByKey bit1129 spark
    1. aggregateByKey的运行机制   /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
  • hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
    今天在hive客户端创建表时报错，具体操作如下   hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
  • Map 与 JavaBean之间的转换 周凡杨 java自省转换反射
    最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
  • java连接ftp下载 g21121 java
    有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
  • web报表工具FineReport使用中遇到的常见报错及解决办法（二） 老A不折腾 finereportweb报表java报表总结
      抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、没有返回数据集： 在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
  • linux 系统cpu 内存等信息查看 墙头上一根草 cpu内存liunx
    1 查看CPU 　　1.1 查看CPU个数 　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数 　　# cat /proc/cpuinfo | grep "cpu cores" | u
  • Spring中的AOP aijuans springAOP
      Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。 在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。 来一个简单的Sample: 目标类： [java]  view plain copy print ? package&nb
  • placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScriptjquery jQuery插件
    placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
  • Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶 泛型的继承和通配符变量的值域Object类转换
    java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个 问题,所以在家的这几天回忆一下过去不知道的每个小知识点   变量的值域;   package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
  • JDK1.5 Condition接口 bijian1013 javathreadConditionjava多线程
    Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。 条件（也称为条件队列或条件变量）为线程提供了一
  • 开源中国OSC源创会记录 bijian1013 hadoopsparkMemSQL
    一.Strata+Hadoop World（SHW）大会         是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。          二.Hadoop   &nbs
  • 【Java范型七】范型消除 bit1129 java
    范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。 范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
  • 【Spark九十四】spark-sql工具的使用 bit1129 spark
    spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store   关于Hive build into Spark
  • js做的各种倒计时 ronin47 js 倒计时
    第一种：精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
  • java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
    public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
  • mongoDB安装 开窍的石头 mongodb安装 基本操作
    mongoDB的安装          1:mongoDB下载   https://www.mongodb.org/downloads         2:下载mongoDB下载后解压     
  • [开源项目]引擎的关键意义 comsci 开源项目
         一个系统，最核心的东西就是引擎。。。。。       而要设计和制造出引擎，最关键的是要坚持。。。。。。       现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的    
  • 软件度量的一些方法 cuiyadll 方法
    软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
  • XSD中的targetNameSpace解释 darrenzhu xmlnamespacexsdtargetnamespace
    参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找： 例如：以下xsd文件，就出现了该错误，即便是在一
  • 什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
    RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
  • yii2 restful web服务快速入门 dcj3sjt126com PHPyii2
    快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。 特别是，Yii 支持以下关于 RESTful 风格的 API： 支持 Active Record 类的通用API的快速原型 涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化 适当的格式的数据采集和验证错误
  • MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档MongoDB查询内嵌数组
    MongoDB查询内嵌文档 转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述        有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。   二、查询整个文档 例如:有如下文档 db.emp.insert({ &qu
  • android4.4从系统图库无法加载图片的问题 gundumw100 android
    典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。 下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
  • 网页特效大全 jQuery等 ini JavaScriptjquerycsshtml5ini
    HTML5和CSS3知识和特效 asp.net ajax jquery实例 分享一个下雪的特效 jQuery倾斜的动画导航菜单 选美大赛示例 你会选谁 jQuery实现HTML5时钟 功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！ 向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序 推荐一个jQuery分页插件 jquery animate
  • swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
      import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
  • Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 javaPOJOxmlAegisxfire
          Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服 务类与 POJO,它为你生成 XML schema/wsdl XML 和 注解映射概览       默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
  • js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境max纵观千象
    // Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
  • XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJOjsonAjaxxmlXMLhttpREquest
    在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
  • jquery wuai jquery
    以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小 等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他