纯CSS实现tooltip提示框，CSS箭头及形状

原文: 纯CSS实现tooltip提示框，CSS箭头及形状

本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状！

首先介绍一下CSS：after选择器

定义和用法：(参考w3school:after选择器)

　　：after选择器在被选元素的内容后面插入内容，使用content属性来指定要插入的内容

例：

p:after

{ 

    content:"台词：-";

    background-color:yellow;

    color:red;

    font-weight:bold;

}
View Code

 具体大家可以参考：w3school！

 

下面来介绍用:after选择器来制作CSS箭头等提示框：（这里将一步一步简单的设计，每一步添加的内容就是与前一步多出来的style代码内容，注意区别！）
首先，我们的HTML代码：

<body>

    <div class="demo"></div>

</body>
View Code

让我们来设置该盒子的样式：

<style>

    .demo{

        background-color: lightgreen;

        height: 100px;

        position: relative;

        width: 100px;

    }

</style>
View Code

截图：

纯CSS实现tooltip提示框，CSS箭头及形状

这里需注意我们设置position属性为relative，是为了允许我们设置我们的“箭头”（还没有出现）绝对定位并且保持它和我们的盒子有联系！

 

接着我们继续插入“箭头”（还没有出现）基本样式：

<style>

    .demo{

        background-color: lightgreen;

        height: 100px;

        position: relative;

        width: 100px;

    }

    .demo:after{

        content:'';

        position:absolute;

        height:20px;

        width:20px;

        background:yellow;

    }

</style>
View Code

截图：

纯CSS实现tooltip提示框，CSS箭头及形状

你将会注意到一些事，一、我们仅仅插入了一个黄色的方块，那个就是我们将要设计成箭头的方块；二、我们设置绝对定位absolute以至于我们可以将它移动到我们想要的位置上！

继续，这儿给黄色方块（即“箭头”前身）设置边框，这儿的边框就是箭头的实体，并且去掉黄色方块的内容（通过设置.demo:after中的样式“height:0;width:0”去掉黄色方块，这里我们省略了黄色方块的height、width）：

<style>

    .demo{

        background-color: lightgreen;

        height: 100px;

        position: relative;

        width: 100px;

    }

    .demo:after{

        content:'';

        position:absolute;

        //height:20px;

        //width:20px;

        background:yellow;

                

        border:10px solid gray;

    }

</style>
View Code

截图：
纯CSS实现tooltip提示框，CSS箭头及形状

 

现在再将灰色边框方块设计成箭头形式：

<style>

    .demo{

        background-color: lightgreen;

        height: 100px;

        position: relative;

        width: 100px;

    }

    .demo:after{

        content:'';

        position:absolute;

        //height:20px;

        //width:20px;

        //background:yellow;

                

        //border:10px solid gray;

        border:10px solid transparent;

        border-top-color:gray

    }

</style>
View Code

截图：
纯CSS实现tooltip提示框，CSS箭头及形状

OK！我们可以看到箭头成形！

 

下面来设置它的位置为我们想要的（此例箭头移动至下端）：

<style>

    .demo{

        background-color: lightgreen;

        height: 100px;

        position: relative;

        width: 100px;

    }

    .demo:after{

        content:'';

        position:absolute;

        //height:20px;

        //width:20px;

        //background:yellow;

                

        //border:10px solid gray;

        border:10px solid transparent;

        border-top-color:gray;

        

        top:100%;

        left:10px;

    }

</style>
View Code

截图：
纯CSS实现tooltip提示框，CSS箭头及形状

到这里基本上完事了

 

下面整体样式设计下（其实就更改了盒子的背景色与箭头颜色相同）：

<style>

    .demo{

        background-color: gray;

        height: 100px;

        position: relative;

        width: 100px;

    }

    .demo:after{

        content:'';

        position:absolute;

        //height:20px;

        //width:20px;

        //background:yellow;

                

        //border:10px solid gray;

        border:10px solid transparent;

        border-top-color:gray;

        

        top:100%;

        left:10px;

    }

</style>
View Code

截图：
纯CSS实现tooltip提示框，CSS箭头及形状

 

具体需要什么样的样式可以自行设置了！例如将箭头移动到其他三边可以设置border-T\R\B\L-color:gray;和TRBL(TRBL是指top\right\bottom\left)即可！

当然要修改箭头在盒子边框上的位置时，还需注意：边框border的大小不包含在自身盒子尺寸内！所以设计时需要注意margin的影响，比如箭头在下边框中居中，我们考虑上面的同时还需添加：“ margin-left:-10px; ”才可居中！

 

结论来自yy浮萍人生的评论（简洁形象~~哈哈~~）：

此例设计原理：设置伪类选择器盒子的宽度和高度为0,那边border形成的区域是[X]这个样子的，其他三边透明了，所以呢就显示了个三角形！

 

（本文参考：YUI Team:CSS Quick Tip: CSS Arrows and Shapes Without Markup）

 

你可能感兴趣的:(tooltip)

  • echarts X轴文本太长 formatter自定义文本的显示方式 每一天，每一步 EChartsechartsjavascriptecmascript
    如果ECharts中X轴的文本太长，可以通过设置axisLabel的rotate属性来旋转标签，或者使用formatter函数来自定义文本的显示方式。另外，可以开启axisLabel的interval属性来控制显示的标签的间隔。option={tooltip:{},xAxis:{type:'category',data:['这是一段非常长的文本','短文本','另一段长文本','另一段长文本'],
  • el-tooltip 修改宽度 胡萝卜大王驾到通通闪开 elementjavascript前端html
    使用popper-class为Tooltip的popper添加类名{{row.range}}在当前组件新建一个style,不要写scoped,这里的样式会应用到全局,所以class命名一定要保证不要和全局别的类名重复.td-nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.tool-tip{max-width:40
  • uniapp+echarts分时图五档行情 Nymph_Zhu uni-appecharts安卓ios前端
    父组件代码：{{isLeave!=1?tooltipData[1]==null||tooltipData[1]==''||tooltipData[1]=='0.00'?'--':toDecimal(tooltipData[1],getTickDecLen(symbol),true):(symbol.cp==null||symbol.cp==''||symbol.cp=='0.00'?'--':to
  • echarts tooltip悬浮框自动轮播 鼠标放上则暂停 Igiveufireworks 前端vue.jsechartsjavascript
    在本项目中,echarts是引入的一个子组件，在父组件中配置好chartOptions和automove后传给子组件。判断传入的automove为true时，则进行轮播。props:{chartOptions:{type:Object,default(){return{}}},automove:{type:Boolean}},data(){return{chart:null,dataLength:
  • js处理echarts tooltip定时轮播 Ciito 前端javascriptecharts
    echartstooltip定时轮播/***echartstooltip轮播*@paramchartECharts实例*@paramchartOptionecharts的配置信息*@paramoptionsobject选项*{*interval轮播时间间隔，单位毫秒，默认为3000*true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip*ser
  • eCharts的样式配置 yu_zheng5163 echarts前端javascript
    {//series的类型，如'line'、'bar'、'pie'、'scatter'等type:'line',//line表示折线图bar表示柱状图pie表示饼图scatter表示散点图//series的名称，用于tooltip的显示，legend的图例筛选等name:'数据系列1',//series的数据，可以是数组，也可以是函数，详见下面的data配置项data:[1,2,3,4,5],//s
  • echarts实现透明3D地图 自定义tooltip悬浮框 藤井粟 echartsecharts3d前端大屏端
    本地图主要使用ehcarts和echarts-gl进行开发，实现的3D地图可以旋转、缩放、多角度观察。悬浮框是自定义样式。1、引入echarts和echarts-gl库echarts的资源比较常见，这里主要列出echarts-gl的离线资源2、3D地图的基础配置根据网上获取的json数据进行初始化地图，然后配置地图的option，重点在于series和viewcontrol的配置。地图的透明质感主
  • React中实现antd自定义图标，鼠标悬浮变色 小鸟哗啦啦 react.js前端javascript
    借助antd的tooltip组件来实现hover时变色的效果1.新建组件自定义图标一般在iconfont上面获取，复制下来的svg代码，切记要删除fill属性后添加到组件中import{Tooltip}from"antd";importReactfrom"react";constHoverableSvg=()=>{return({/*...*/});};exportdefaultHoverable
  • Vue3优化表单标签与布局，解决文字过长问题（附Demo） 码农研究僧 前端/小程序vue.js前端javascript
    目录前言1.增加标签宽度（生效）2.工具提示Tooltip（勉勉强强）3.缩小字体（不生效）4.CSS控制换行（不推荐）前言好不容易构思整个表单的布局，但是个别表单的文字过长，导致自动换行，遮挡另外的一些组件以下内容将围绕实战进行优化以左上角的文字进行调整：尝试了多种方案，最终才有成效对于其他的方式，诸位也可尝试下1.增加标签宽度（生效）通过增加el-form-item的label-width，让
  • echarts柱形图X轴Y轴相关配置 船长㉿ 可视化
    可配置XY轴刻度线，字体大小，柱形图大小颜色等constoptions={tooltip:{trigger:'axis',axisPointer:{//坐标轴指示器，坐标轴触发有效type:'shadow'//默认为直线，可选为：'line'|'shadow'},textStyle:{//鼠标hover遮罩层字体大小fontSize:'12'}},xAxis:[{data:['大学食堂100间',
  • vue 使用el-table 设置了show-overflow-tooltip属性，路由跳转后，气泡不消失的解决办法 前端小白记录 vue.js前端javascriptelementui前端框架
    文章目录一、问题场景二、解决方法1.问题bug2.最终解决总结一、问题场景在vue项目里使用el-table做一个列表页面，表格设置了show-overflow-tooltip属性，文字过长时鼠标滑过会展示气泡显示全部文字内容，因为设置路由缓存，如果这个时候点击鼠标滑过的单元格进行路由跳转，气泡就会在新的页面展示不消失；如下图所示二、解决方法1.问题bug我在网上搜索相关帖子，看到一个说让在dea
  • vxe-grid 利用dayjs提供的方法来格式化， 计算二个日期之间的年数/年龄 花花鱼 Vue3vue.js
    1、安装dayjspnpmadddayjsyarnadddayjsnpminstalldayjs2、导入importdayjsfrom'dayjs';3、vxe-grid列：exportconstUserColumns:VxeGridPropTypes.Columns=[...{title:'年龄',width:70,field:'old',showOverflow:'tooltip',align
  • 【avue+vue2】avue-token,iframe,postmessage,3d按钮权限显隐，avue列表数据过长省略和tooltip，选择框不要勾选 傻傻有内涵的我 vueavueHTML学习javascript开发语言ecmascript
    目录一、avue字典+token二、3diframe三、postmessage四、3d按钮权限五、avue列表数据过长省略+tooltip六、选择框不要勾选（avue）一、avue字典+token{label:'车型',prop:'amrModelShowName',//width:130,span:20,labelWidth:'180',row:true,type:'select',align:
  • Echarts基础学习 3-legend、tooltip、grid、dataZoom 翻斗花园正门保安小夏 Echartsecharts学习前端
    提示信息和工具栏legend、tooltip、title可以展示图表的一些信息，使图表的信息更加清晰明了toolbox是对图表的一些操作，比如下载，折线图和柱形图的切换等操作。如果你想体验各种工具操作，可以在此案例中进行操作——未来一周气温变化grid网格直角坐标系内绘图网格，单个grid内最多可以放置上下两个X轴，左右两个Y轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。在ECharts2
  • echarts 雷达图样式自定义 2018-12-13 心有余悸天
    exportdefaultfunctiondrawradar(basedata,all_data){varRadar={//title:{//text:'基础雷达图'//},//鼠标移入的悬浮框的样式tooltip:{backgroundColor:'#ffff',borderColor:'#eeee',borderRadius:2,borderWidth:1,textStyle:{color:'
  • 自定义vue指令，实现el-tooltip仅在文字溢出时显示，文字未溢出则不显示，复制即可使用 千叶KE vue.jsjavascript前端elementui
    一、写在开头在项目里遇到了这种需求，想到el-table里的show-overflow-tooltip属性就有这种效果，在参考了一些网上的文章以及show-overflow-tooltip跟el-tooltip的源码后，觉得使用自定义指令的方式来实现这个需求会很方便，于是便有了以下代码二、自定义指令代码1、创建一个js文件，复制粘贴以下代码即可使用，无需改动importVuefrom'vue'im
  • Popper.js：ElementUI 中采用弹出，提示框库，好用的没朋友。 贝格前端工场 javascriptelementui开发语言
    Hi，我贝格前端工场，继续介绍经典的js库，ElementUI中Tooltip、Select、Cascader、TimePicker等组件中怎么把提示框定位到目标元素的，是用Popperjs来实现。一、Popper.js是什么？Popper.js是一个用于创建弹出式组件和工具提示的JavaScript库。它提供了一种灵活和可定制的方式来定位和显示弹出式元素，使得开发者可以轻松地创建各种类型的弹出式
  • 饼图外显示百分比，labelLine控制与环的距离 咏竹莉
    示例：image.pngfunctionlossTenants(){varmyDailyEn=echarts.init(document.getElementById('lossTenants'));option={tooltip:{backgroundColor:'#fff',textStyle:{color:'#545EFF'},formatter:"{b}:{c}({d}%)"},legen
  • Unity在Inspector面板显示注释 ChoseYoung
    [Tooltip("显示注释")]//鼠标移到变量上后可以看到汉字[Header("显示注释")]//直接在面板上显示汉字
  • echarts 中tooltip的formatter使用(例如折线图中的，鼠标悬停在某点，会再提示框显示坐标轴对应的数据) 方_圆
    1.当把x轴，y轴数据都设置好以后，x轴的数组是data系列（series）2.把value结构，重新拼了下3.在tooltip中添加formatter方法（我理解的意思，formatter是一个回调函数，series中的data，通过回调，根据数据的拼接结构，把的相关数据拿出来就行）params[x].data.name,也就是series.data.name(相当于把series中的data:
  • echarts(3)——饼图 qq_46285250 echartsecharts
    案例注释代码源码地址：https://www.makeapie.com/editor.html?c=x1zOZDoSxqoption={backgroundColor:'#273454',color:['#FF9966','#FFFFCC','#0099CC','#99CC33','#99CCCC'],tooltip:{trigger:'item',formatter:'{b}:{c}个(占比{d
  • echarts实用代码模板 mbshqqb echartsjavascript前端
    一、键盘事件控制tooltip移动letcurrentIndex=-1;constdataLen=option.series[0].data.length;consthandleKeydown=(e)=>{if(e.key!="ArrowRight"&&e.key!="ArrowLeft"){return;}console.log('handleKeydown:'+currentIndex);my
  • 2019-01-10Unity编辑器开发，使用CustomPropertyDrawer实现枚举中文显示 Nmao
    标注：https://www.cnblogs.com/CodeGize/p/6892299.html在Unity开发中，枚举常常被用到。但是Unity自身对于枚举值，并不能做好中文的支持。无论是Head或者ToolTip.如下例：usingUnityEngine;publicclassEnumTest:MonoBehaviour{publicEmAniTypeAniType;}publicenum
  • 使用npm包js-web-screen-shot做网页截图，可以对截图加文字，箭头等等，类似于微信截图 徐同保 web前端javascript前端npm
    点击上传截图只能上传jpg/png文件，且不超过5M提交取消import{Button,Tooltip,Dialog,Form,Row,Col,FormItem,Upload,Link,Input,}from'element-ui'importhtml2canvasfrom'html2canvas'importScreenShotfrom'js-web-screen-shot'importtemp
  • 因直接展示el-tooltip从而导致表格展示底部增加空行 前端僵尸 bug
    使用tooltip注意事项：问题：因直接展示el-tooltip从而导致表格展示底部增加空行原因：el-tooltip本身渲染的时候，是没有载体的（里面没有内容就已经渲染了）解决：外层需要包裹一层div或是span做父级问题：ElementPlusError:[ElOnlyChild]novalidchildnodefound(使用el-tooltip套tooltip或者popver也会导致)原因
  • React+Echarts实现数据排名+自动滚动+Y轴自定义toolTip文字提示 小浣熊喜欢揍臭臭 Reactechartreact.js前端javascript
    1、效果2、环境准备1、react182、antd4+3、代码实现原理：自动滚动通过创建定时器动态更新echar的dataZoom属性startValue、endValue，自定义tooltip通过监听echar的鼠标移入移出事件，判断tooltTip元素的显隐以及位置。1、导入所需组件：在你的代码文件中导入所需的组件importReactEChartsfrom'echarts-for-react
  • 2020-10-14 echarts tooltip 自定义样式 rub1cky
    echarts自定义tooltip样式备份在echarts文档中有个extraCssText可以进行自定义样式覆盖最终效果图截屏2020-10-14上午8.55.00.png
  • 【Qt学习笔记】（三）常用控件（持续更新） 有心栽花无心插柳 Qtqt学习笔记
    Qt常用控件1控件概述2QWidget控件核心属性2.1enabled2.2geometry2.3windowframe的影响2.4windowTitle2.5windowIcon2.6windowOpacity2.7cursor2.8font2.9toolTip2.10focusPolicy2.11stylesheet1控件概述Widget是Qt中的核心概念英文原义是"小部件",我们此处也把它翻
  • vue3+echarts+地图（3D立体） 修复bug vueechartsjavascriptvue
    首页exportdefault{name:"maps",data(){return{option:{//鼠标悬浮显示省份名称tooltip:{textStyle:{color:"yellow",decoration:"none",fontFamily:"Verdana,sans-serif",fontStyle:"italic",fontWeight:"bold",},formatter:func
  • echarts tooltip.formatter回调函数方式格式化提示框 深吸一口气
    问题在使用echarts配置图表时，tooltip提示框的格式不能满足需求，这时需要自定义格式，echarts文档中给出的方案是配置tooltip.formatter解决方案tooltip.formatter支持字符串模板和回调函数两种形式，官方文档内容这里就不赘述了，请自行查阅echartstooltip.formatter文档，这里主要说一下回调函数格式化方式//params具体信息看下方fo
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他