bee_two_one
bee_two_one

CSS雪碧图制作emoji表情包

效果图：
CSS雪碧图制作emoji表情包_第1张图片

原理：利用雪碧图，来实现emoji表情包，减少图片请求数。
表情包转换为文字 & 文字转换为表情包 维护两个对象来实现。

缺点：表情包大小由雪碧图中表情包大小控制，不能更改。

htm代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>emotitle>
    <link rel="stylesheet" href="emoji.css">
    <style>
        ul,li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #emo_container {
            width: 280px;
            display: flex;
            flex-wrap: wrap;
        }
        #emo_container li {
            width: 70px;
            height: 70px;
            margin-bottom: 10px;
            cursor: pointer;
            position: relative;
        }
        #emo_container li span {
            display: none;
            position: absolute;
            width: 100%;
            bottom: -10px;
            font-size: 12px;
            text-align: center;
        }
        #emo_container li:hover span {
            display: block;
        }
        #emo_input {
            margin-top: 50px;
        }
        .emo-span {
            display: inline-block;
            width: 70px;
            height: 70px;
            vertical-align: middle;
        }
        .show {
            min-height: 200px;
            margin-top: 100px;
            border: 1px solid;
        }
    style>
head>
<body>
    <ul id="emo_container">ul>
    <input type="text" id="emo_input"/>
    <button id="send_msg">sendbutton>
    <div class="show">div>
body>
<script src="jquery-2.1.4.js">script>
<script>
    $(function(){
        let li_html = "";
        let input = "";
        let input_dom = $("#emo_input")[0];
        let emotions = {
            "1":"[微笑]",
            "2":"[撇嘴]",
            "3":"[色]",
            "4":"[发呆]",
            "5":"[得意]",
            "6":"[流泪]",
            "7":"[害羞]",
            "8":"[闭嘴]"
        };
        let emo_index = {
            "[微笑]":"1",
            "[撇嘴]":"2",
            "[色]":"3",
            "[发呆]":"4",
            "[得意]":"5",
            "[流泪]":"6",
            "[害羞]":"7",
            "[闭嘴]":"8"
        };
        //渲染表情包
        Object.keys(emotions).map(function (value,index) {
            li_html += `
  • class="bg-${value}" data-emo="${value}">
                            <span>${emotions[value]}span>
                        li>`;
        });
        $("#emo_container").html(li_html);

        //预览输入的文字
        $("#emo_container").on("click","li",function () {
            let emo = $(this).data("emo");
            input = $("#emo_input").val();
            insert(emotions[emo]);
            //确保插入表情后光标在末尾
            input_dom.focus();
        });

        //界面展示输入的内容
        $("#send_msg").click(function () {
            input = $("#emo_input").val();
            let emo_input = renderEmo(input);
            $(".show").append(`<div>${emo_input}div>`);
            $("#emo_input").val("");
        });

        //表情文字替换为表情图片
        function renderEmo(text) {
            let pattern = /\[[\u4e00-\u9fa5]+\]/g;
            return text.replace(pattern,function (match) {
                return `<span class="emo-span bg-${emo_index[match]}">span>`
            })
        }

        //文字中间插入表情
        function insert(str) {
            var value = input_dom.value;
            if(typeof document.selection != "undefined")
            {
                document.selection.createRange().text = str;
            }
            else
            {
                return input_dom.value = value.substr(0,input_dom.selectionStart)+str+value.substring(input_dom.selectionStart,value.length);
            }
        }

    })
script>
html>

    • CSS代码

    .bg-1 {
    width: 66px; height: 66px;
    background: url('emoji.png') -10px -10px;
}
.bg-2 {
    width: 66px; height: 66px;
    background: url('emoji.png') -96px -10px;
}
.bg-3 {
    width: 66px; height: 66px;
    background: url('emoji.png') -10px -96px;
}
.bg-4 {
    width: 66px; height: 66px;
    background: url('emoji.png') -96px -96px;
}
.bg-5 {
    width: 66px; height: 66px;
    background: url('emoji.png') -182px -10px;
}
.bg-6 {
    width: 66px; height: 66px;
    background: url('emoji.png') -182px -96px;
}
.bg-7 {
    width: 66px; height: 66px;
    background: url('emoji.png') -10px -182px;
}
.bg-8 {
    width: 66px; height: 66px;
    background: url('emoji.png') -96px -182px;
}

    你可能感兴趣的:(css技巧)

    • 《CSS 揭秘》案例dome kingrome2009 css3动画css揭秘
      本书是一本注重实践的教程，作者为我们揭示了47个鲜为人知的CSS技巧，主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。史上最全的实例建议不要买书因为电子版的更适合我们下载链接css揭秘pdfdomeDocument*{margin:0;padding:0;}body{backgr
    • 前端开发CSS实用的技巧有哪些 程序员
      前端开发作为软件开发的重要组成部分,在构建网页和应用程序时发挥着不可或缺的作用。作为前端开发人员，掌握良好的CSS技巧至关重要。CSS（层叠样式表）作为一种用于定义网页样式和布局的语言，对网页的外观和用户体验起着决定性的作用。在前端开发过程中，合理运用CSS页面修饰样式能够提高页面的性能和加载速度，并改善用户对网页的感知和交互体验。CSS技巧还能提升代码的可维护性和可扩展性，使得开发人员能够更加轻
    • Day25-CSS常见布局技巧+CSS初始化 ian燃. 工坊打卡前端学习前端css
      常见的布局技巧margin负值的应用让每个盒子margin往左侧移动-1px正好压住相邻盒子边框。2.鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有定位，则加相对定位（保留位置),如果有定位，则加z-index)。CSS技巧ulli{float:left;list-style:none;width:150px;height:200px;border:1pxsolidred;margin-
    • 22个实用的CSS技巧 Dream_travelerly csscss前端
      想要让你的网站在激烈的竞争中脱颖而出吗？使用CSS的强大功能可以帮助你实现这一目标。本文将分享22个实用的CSS技巧，帮助你提升网站的外观和用户体验。无论你是一个新手还是有经验的开发者，这些技巧都将为你的网站注入新鲜的设计元素和动感效果。自定义字体：通过使用@font-face规则，你可以在网站中应用自定义字体，增加独特性和品牌识别度。选择适合你网站风格的字体，并确保它们能够正确加载和显示。渐变背
    • 精通Playwright的元素定位和CSS技巧 acmakb PlaywrightPlaywrightpython自动化软件测试
      Playwright之元素定位:fromplaywright.sync_apiimportsync_playwrightp=sync_playwright().start()browser=p.chromium.launch(headless=False)#创建浏览器对象page=browser.new_page()page.goto("https://www.byhy.net/_files/st
    • 【css技巧】css实现边框渐变 海鲸AI css前端
      海鲸AI-ChatGPT4.0国内站点，支持设计稿转代码：https://www.atalk-ai.com在CSS中实现边框渐变效果，你不能直接应用渐变到border属性上，因为CSS标准不支持这样的操作。但是，你可以使用一些技巧来模拟边框渐变的效果。以下是一些常用的方法：方法1：使用伪元素和background-image你可以为元素添加伪元素（如::before或::after），并在伪元素上
    • 【css技巧】文本超出两行显示省略号 海鲸AI css前端
      ChatGPT4.0国内站点：海鲸AI你可以使用CSS的-webkit-line-clamp属性来实现文本超出两行显示省略号的效果。示例代码如下：.text-container{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;/*控
    • 【css技巧】css设置文字不能被选中 海鲸AI css前端
      ChatGPT4.0国内站点：海鲸AI在CSS中，如果你想让文本内容不能被用户选中，可以使用user-select属性。这个属性可以控制用户是否能够选择文本。以下是如何使用这个属性的例子：.unselectable{-webkit-user-select:none;/*Safari3.1+*/-moz-user-select:none;/*Firefox2+*/-ms-user-select:no
    • 十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）... 前端开发博客 csshtmlproguardradiobuttoncharacter
      大家好，我是漫步，今天来分享一些比较高级复杂的CSS技巧，都是我们平常常用的，或许对你有所帮助。设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时设置方位情况相邻兄弟选择器之常用场景outline属性的妙用技巧隐藏滚动条或更改滚动条样式纯CSS绘制三角形虚线框绘制技巧卡券效果制作隐藏文本的常用两种方法表格边框合并1-1.设置input的placehold
    • 分享14 个非常实用的CSS技巧 前端达人 csscss3html前端javascript
      英文|https://ishratumar.medium.com/14-awesome-css-properties-you-need-to-know-9cee5b364990翻译|杨小爱学习一些好的实用的CSS技巧，可以帮助我们提供工作效率。因此，今天这篇文章，我将跟大家分享一些很棒的CSS知识技巧，希望对你有用。好了，我们现在开始吧。1.CSS:in-range和:out-of-range伪类
    • CSS技巧分享 思绪随想 CSScsscss3
      转自：https://www.pinlue.com/article/2018/12/2301/047919701640.html
    • CSS技巧分享：如何用css制作横排二级下拉菜单 亓丨心 htmlcss导航
      导航菜单是每个网站所必备的功能，也是每个学习制作网站的朋友所必须接触的，如何用css样式制作一个简单漂亮的二级下拉菜单呢，下来小编就一步一步教大家来制作横排二级下拉菜单，让我共同来学习吧。首页我们打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单栏目一栏目二栏目三栏目四栏目五如下图所示：CSS技巧分享：如何用css制作横排二级下拉菜单现在我们为nav添加样式,首先去掉默认的mar
    • 【css技巧】分享 【南汐】前端 csscss前端
      1.打字效果代码实现：有趣且实用的CSS小技巧.wrapper{height:100vh;display:flex;align-items:center;justify-content:center;}.typing-demo{width:22ch;animation:typing2ssteps(22),blink.5sstep-endinfinitealternate;white-space:n
    • CSS技巧 霁璃风
      技巧一：渐变色文字Gradienttext.gradient-text{background-image:linear-gradient(90deg,red,blue);background-clip:text;color:transparent;}效果：20200211144054.jpg技巧二：下划线动画效果Loremipsumdolorsitamet...beatae,quoiure...c
    • gird 卡片布局 卡列尼娜翠花 HTML/CSS前端gridcss响应式布局javascript
      场景一：单元格大小相等这承载了所有CSSGrid中最著名的片段，也是有史以来最伟大的CSS技巧之一：等宽网格响应式卡片实现.section-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}解析grid-template-columns容器属性，设置表格有多少列。minma
    • css星空动画,【css3进阶】less实现星空动画 酷毙的我啊 css星空动画
      效果动图如下：预览链接和代码在我的codepen：https://codepen.io/lio-mengxiang/pen/YzKrEde知识点预览这篇文章的less技巧+css技巧知识点包括：less如何写循环less里如何使用js表达式css3属性:box-shadow如何生成成百上千的星星css3属性:background:radial-gradient径向渐变，如何生成渐变的背景色HTML
    • 前端开发者们值得了解的 11 项前端技巧，收藏了 Javaesandyou 前端javascripthtmljava程序人生
      不容错过的11项HTML/JS/CSS技巧。通过以下HTML/CSS/JavaScript相关技巧，希望能帮助大家填补一点点关于前端开发方面的知识空白。1.Datalist元素这项HTML元素的使用频率极低，今天我们就要为它正名！标签用于为元素提供一项“自动补全”功能。在键入过程中，您会看到如下图所示的预定义下拉菜单及选项。示例：列出的属性（参见上方粗体）必须等于的id，因为需要将二者捆绑使用。2
    • div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...) sdh_down ie浏览器cssdivfirefoxhtml
      CSS技巧1.div的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行poweredby25175.net2.margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inli
    • div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox.. 名贤集 CSSie浏览器cssdivfirefoxhtml
      CSS技巧1.div的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行poweredby25175.net2.margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inli
    • CSS浏览器兼容问题 星哥真的太难了
      CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE影响CSS处理,作为W3C的标准,一定要加DOCTYPE声名.CSS技巧1.div的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高l
    • 〖CSS技巧③〗动画性能优化 旋转前端皮塔牙 css性能优化css3
      CSS动画属性在日常工作中很常用，带来的问题也是显而易见的，本文讲述了如何优化动画性能。文章目录1.动画简单调用示例1.1animation动画1.2transition过渡2.常见问题3.优化方法3.1使用GPU加速3.2减少使用触发"重布局"的属性3.3优先使用只触发“重绘”的属性3.4控制频繁动画的层级关系3.5合理布局，精简DOM1.动画简单调用示例CSS3的animation和trans
    • CSS技巧 SoSalty 前端csshtml前端
      目录1.引入外部字体2.svg修改：3.显示文字行数：4.局部滚动：5.background复合写法：6.less混入：手动：或者：自动加载目标less：7.~选择器：8.img、input和其他的单标签没有after和before伪元素：9.object-fit：9.:last-child、:last-of-type10.css让文字竖的排版的方法：11.页面滚动：12.自定义鼠标指针样式：13
    • CSS小技巧之绘制心形图案 南城FE 前端CSS那些事css前端css3
      本文翻译自CSSShapes:TheHeart，作者：TemaniAfif，略有删改。我们将使用CSS创建一个心形图案。你可能会说：“为什么又一篇关于心形的文章？已经做过很多了！“。我们不会只建立一个心形图案，我们会使用现代的CSS技巧来实现。忘记带有border-radius和rotation的伪元素。我们也将把图像转化为心形图案！使用CSS渐变第一种实现方法，我们将基于多个渐变来创建一个心形图
    • uniapp快速入门系列（3）- CSS技巧与布局 疯狂小赤兔 uni-appcss前端
      章节三：CSS技巧与布局1.uniapp中的样式编写2.常见布局技巧与实例解析2.1水平居中布局2.2垂直居中布局2.3等高布局2.4响应式布局3.CSS动画与过渡效果在uniapp中，我们使用CSS来设置页面的样式和布局。本章将介绍一些在uniapp中常用的CSS技巧和布局实例，帮助你更好地美化页面和实现各种布局效果。1.uniapp中的样式编写在uniapp中，我们可以在.vue文件中使用标签
    • CSS技巧收集——毛玻璃效果（深入理解滤镜filter） 绿萝哥哥
      分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！原文链接：http://www.cnblogs.com/ghost-xyx/p/5677168.html先上demo和源码其实毛玻璃的模糊效果技术上比较简单，只是用到了css滤镜（filter）中的blur属性。
    • css技巧题 卡农me
      1.:nth-child(n)：官方解释：选择器匹配属于其父元素的第N个子元素，不论元素的类型。但其实是如，p:nth-child(n)匹配p的父元素的第N个子元素，且子元素为p第几个p标签背景是红色
    • 如何提升你的CSS技能，掌握这20个css技巧即可[完整版] 慕尚花开
      前言随着前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写，在布局中标准化样式流程，不仅可以帮助你高效地创建自己的框架，而且可以解决许多常见的问题。1、使用CSS重置（reset）css重置库如normalize.css已经被使用很多年了，
    • 02 CSS技巧 Bunny0212 CSS技巧css前端
      02CSS技巧clip-path自定义形状，或者使用自带的属性画圆等circleHTML结构CSS结构使用*polygon*自定义形状.container{width:300px;height:300px;background-color:rebeccapurple;/*clip-path:polygon(13%22%,11%59%,54%71%,12%54%);*/clip-path:circl
    • [uni-app] scroll-view中吸顶的简单做法 - overflow-y: auto； iOSTianNan uni-app
      记录一个css技巧overflow-y:auto;效果这是吸顶view这是滚动view要实现scroll内部,.top吸顶,.content内容上下滚动的效果,只要在.content添加overflow-y:auto;.content{overflow-y:auto;}overflow-y官网描述
    • CSS揭破实用窍门总结 HDX柿子
      感谢平台分享-http://bjbsair.com/2020-04-10/tech-info/53257.html《css揭秘》中讲了47个css技巧，其中有很多日常编码中并不会用到，本文除了将书中部分实用技巧罗列出来之外，还尝试用帮助读者搞明白background、animation等常用但是却掌握不牢固的知识点。所以阅读本文不仅可以学习一些实用技巧，也可以巩固自己的css基础知识。实用小技巧D
    • jvm调优总结（从基本概念 到 深度优化） oloz javajvmjdk虚拟机应用服务器
      JVM参数详解：http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html   Java虚拟机中，数据类型可以分为两类：基本类型和引用类型。基本类型的变量保存原始值，即：他代表的值就是数值本身；而引用类型的变量保存引用值。“引用值”代表了某个对象的引用，而不是对象本身，对象本身存放在这个引用值所表示的地址的位置。
    • 【Scala十六】Scala核心十：柯里化函数 bit1129 scala
      本篇文章重点说明什么是函数柯里化，这个语法现象的背后动机是什么，有什么样的应用场景，以及与部分应用函数(Partial Applied Function)之间的联系   1. 什么是柯里化函数 A way to write functions with multiple parameter lists. For instance def f(x: Int)(y: Int) is a
    • HashMap dalan_123 java
      HashMap在java中对很多人来说都是熟的；基于hash表的map接口的非同步实现。允许使用null和null键；同时不能保证元素的顺序；也就是从来都不保证其中的元素的顺序恒久不变。 1、数据结构     在java中，最基本的数据结构无外乎：数组 和 引用（指针），所有的数据结构都可以用这两个来构造，HashMap也不例外，归根到底HashMap就是一个链表散列的数据
    • Java Swing如何实时刷新JTextArea，以显示刚才加append的内容 周凡杨 java更新swingJTextArea
      在代码中执行完textArea.append("message")后，如果你想让这个更新立刻显示在界面上而不是等swing的主线程返回后刷新，我们一般会在该语句后调用textArea.invalidate()和textArea.repaint()。 问题是这个方法并不能有任何效果，textArea的内容没有任何变化，这或许是swing的一个bug，有一个笨拙的办法可以实现
    • servlet或struts的Action处理ajax请求 g21121 servlet
      其实处理ajax的请求非常简单，直接看代码就行了： //如果用的是struts //HttpServletResponse response = ServletActionContext.getResponse(); // 设置输出为文字流 response.setContentType("text/plain"); // 设置字符集 res
    • FineReport的公式编辑框的语法简介 老A不折腾 finereport公式总结
      FINEREPORT用到公式的地方非常多，单元格（以=开头的便被解析为公式），条件显示，数据字典，报表填报属性值定义，图表标题，轴定义，页眉页脚，甚至单元格的其他属性中的鼠标悬浮提示内容都可以写公式。 简单的说下自己感觉的公式要注意的几个地方：   1.if语句语法刚接触感觉比较奇怪，if(条件式子,值1,值2)，if可以嵌套，if(条件式子1，值1，if(条件式子2，值2，值3)
    • linux mysql 数据库乱码的解决办法 墙头上一根草 linuxmysql数据库乱码
      linux 上mysql数据库区分大小写的配置 lower_case_table_names=1 1-不区分大小写 0-区分大小写   修改/etc/my.cnf 具体的修改内容如下:   [client] default-character-set=utf8   [mysqld] datadir=/var/lib/mysql socket=/va
    • 我的spring学习笔记6-ApplicationContext实例化的参数兼容思想 aijuans Spring 3
      ApplicationContext能读取多个Bean定义文件，方法是： ApplicationContext appContext = new ClassPathXmlApplicationContext（ new String[]｛“bean-config1.xml”，“bean-config2.xml”，“bean-config3.xml”，“bean-config4.xml
    • mysql 基准测试之sysbench annan211 基准测试mysql基准测试MySQL测试sysbench
      1 执行如下命令，安装sysbench-0.5： tar xzvf sysbench-0.5.tar.gz  cd sysbench-0.5  chmod +x autogen.sh  ./autogen.sh  ./configure --with-mysql --with-mysql-includes=/usr/local/mysql
    • sql的复杂查询使用案列与技巧 百合不是茶 oraclesql函数数据分页合并查询
        本片博客使用的数据库表是oracle中的scott用户表;          -------------------  自然连接查询           查询 smith 的上司(两种方法) &
    • 深入学习Thread类 bijian1013 javathread多线程java多线程
      一．             线程的名字 下面来看一下Thread类的name属性，它的类型是String。它其实就是线程的名字。在Thread类中，有String getName()和void setName(String)两个方法用来设置和获取这个属性的值。 同时，Thr
    • JSON串转换成Map以及如何转换到对应的数据类型 bijian1013 javafastjsonnet.sf.json
              在实际开发中，难免会碰到JSON串转换成Map的情况，下面来看看这方面的实例。另外，由于fastjson只支持JDK1.5及以上版本，因此在JDK1.4的项目中可以采用net.sf.json来处理。 一.fastjson实例 JsonUtil.java package com.study; impor
    • 【RPC框架HttpInvoker一】HttpInvoker：Spring自带RPC框架 bit1129 spring
      HttpInvoker是Spring原生的RPC调用框架，HttpInvoker同Burlap和Hessian一样，提供了一致的服务Exporter以及客户端的服务代理工厂Bean，这篇文章主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成   在 【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中
    • 【Mahout二】基于Mahout CBayes算法的20newsgroup的脚本分析 bit1129 Mahout
      #!/bin/bash # # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license agreements. See the NOTICE file distributed with # this work for additional information re
    • nginx三种获取用户真实ip的方法 ronin47
      随着nginx的迅速崛起，越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速，但是随之也遇到一个问题：nginx如何获取用户的真实IP地址,如果后端是apache,请跳转到<apache获取用户真实IP地址>，如果是后端真实服务器是nginx，那么继续往下看。 实例环境： 用户IP 120.22.11.11
    • java-判断二叉树是不是平衡 bylijinnan java
      参考了 http://zhedahht.blog.163.com/blog/static/25411174201142733927831/ 但是用java来实现有一个问题。 由于Java无法像C那样“传递参数的地址，函数返回时能得到参数的值”，唯有新建一个辅助类：AuxClass import ljn.help.*; public class BalancedBTree {
    • BeanUtils.copyProperties VS PropertyUtils.copyProperties 诸葛不亮 PropertyUtilsBeanUtils
       BeanUtils.copyProperties VS  PropertyUtils.copyProperties  作为两个bean属性copy的工具类，他们被广泛使用，同时也很容易误用，给人造成困然；比如：昨天发现同事在使用BeanUtils.copyProperties copy有integer类型属性的bean时，没有考虑到会将null转换为0，而后面的业
    • [金融与信息安全]最简单的数据结构最安全 comsci 数据结构
            现在最流行的数据库的数据存储文件都具有复杂的文件头格式，用操作系统的记事本软件是无法正常浏览的，这样的情况会有什么问题呢？        从信息安全的角度来看，如果我们数据库系统仅仅把这种格式的数据文件做异地备份，如果相同版本的所有数据库管理系统都同时被攻击，那么
    • vi区段删除 Cwind linuxvi区段删除
      区段删除是编辑和分析一些冗长的配置文件或日志文件时比较常用的操作。简记下vi区段删除要点备忘。   vi概述    引文中并未将末行模式单独列为一种模式。单不单列并不重要，能区分命令模式与末行模式即可。   vi区段删除步骤： 1. 在末行模式下使用:set nu显示行号 非必须，随光标移动vi右下角也会显示行号，能够正确找到并记录删除开始行
    • 清除tomcat缓存的方法总结 dashuaifu tomcat缓存
      用tomcat容器，大家可能会发现这样的问题，修改jsp文件后，但用IE打开 依然是以前的Jsp的页面。 出现这种现象的原因主要是tomcat缓存的原因。 解决办法如下: 在jsp文件头加上 <meta http-equiv="Expires" content="0"> <meta http-equiv="kiben&qu
    • 不要盲目的在项目中使用LESS CSS dcj3sjt126com Webless
      　如果你还不知道LESS CSS是什么东西，可以看一下这篇文章，是我一朋友写给新人看的《CSS——LESS》 　　不可否认，LESS CSS是个强大的工具，它弥补了css没有变量、无法运算等一些“先天缺陷”，但它似乎给我一种错觉，就是为了功能而实现功能。 　　比如它的引用功能 ? .rounded_corners{     
    • [入门]更上一层楼 dcj3sjt126com PHPyii2
      更上一层楼 通篇阅读完整个“入门”部分，你就完成了一个完整 Yii 应用的创建。在此过程中你学到了如何实现一些常用功能，例如通过 HTML 表单从用户那获取数据，从数据库中获取数据并以分页形式显示。你还学到了如何通过 Gii 去自动生成代码。使用 Gii 生成代码把 Web 开发中多数繁杂的过程转化为仅仅填写几个表单就行。 本章将介绍一些有助于更好使用 Yii 的资源：
    • Apache HttpClient使用详解 eksliang httpclienthttp协议
      Http协议的重要性相信不用我多说了，HttpClient相比传统JDK自带的URLConnection，增加了易用性和灵活性（具体区别，日后我们再讨论），它不仅是客户端发送Http请求变得容易，而且也方便了开发人员测试接口（基于Http协议的），即提高了开发的效率，也方便提高代码的健壮性。因此熟练掌握HttpClient是很重要的必修内容，掌握HttpClient后，相信对于Http协议的了解会
    • zxing二维码扫描功能 gundumw100 androidzxing
      经常要用到二维码扫描功能 现给出示例代码 import com.google.zxing.WriterException; import com.zxing.activity.CaptureActivity; import com.zxing.encoding.EncodingHandler; import android.app.Activity; import an
    • 纯HTML+CSS带说明的黄色导航菜单 ini htmlWebhtml5csshovertree
      HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航   在线体验效果：http://hovertree.com/texiao/css/1.htm代码如下,保存到HTML文件可以看到效果：   <!DOCTYPE html > <html > <head> <title>HoverTree
    • fastjson初始化对性能的影响 kane_xie fastjson序列化
      之前在项目中序列化是用thrift，性能一般，而且需要用编译器生成新的类，在序列化和反序列化的时候感觉很繁琐，因此想转到json阵营。对比了jackson，gson等框架之后，决定用fastjson，为什么呢，因为看名字感觉很快。。。   网上的说法：   fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器，来自阿里巴巴的工程师开发。
    • 基于Mybatis封装的增删改查实现通用自动化sql mengqingyu DAO
      1.基于map或javaBean的增删改查可实现不写dao接口和实现类以及xml，有效的提高开发速度。 2.支持自定义注解包括主键生成、列重复验证、列名、表名等 3.支持批量插入、批量更新、批量删除 <bean id="dynamicSqlSessionTemplate" class="com.mqy.mybatis.support.Dynamic
    • js控制input输入框的方法封装(数字，中文，字母，浮点数等) qifeifei javascript js
      在项目开发的时候，经常有一些输入框，控制输入的格式，而不是等输入好了再去检查格式，格式错了就报错，体验不好。 /** 数字，中文，字母,浮点数(+/-/.) 类型输入限制，只要在input标签上加上 jInput="number,chinese,alphabet,floating" 备注：floating属性只能单独用*/     funct
    • java 计时器应用 tangqi609567707 javatimer
      mport java.util.TimerTask;   import java.util.Calendar;   public class MyTask extends TimerTask {        private static final int
    • erlang输出调用栈信息 wudixiaotie erlang
      在erlang otp的开发中，如果调用第三方的应用，会有有些错误会不打印栈信息，因为有可能第三方应用会catch然后输出自己的错误信息，所以对排查bug有很大的阻碍，这样就要求我们自己打印调用的栈信息。用这个函数：erlang:process_display (self (), backtrace).需要注意这个函数只会输出到标准错误输出。 也可以用这个函数：erlang:get_s
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他