纯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)

  • 【antdv4.0FormItem更新tooltip属性引发的思考】
    北京时间2023-10-19，ant-design-vue最近发布了4.0.4-4.0.6的小版本更新，其中4.0.4新增了对Form组件中FormItem的tooltip属性支持，这个功能我觉得在后台管理场景下还是非常实用的，tooltip属性作用于FormItem中的FormItemLabel区域，用来配置提示信息，当用户不确定该行的用处或者不知道填什么内容时，可以作为input里placeh
  • ikun-ui v0.2.7版本发布：组件功能增强与体验优化 时琦旖
    ikun-uiv0.2.7版本发布：组件功能增强与体验优化ikun-ui是一个基于Svelte框架构建的现代化UI组件库，专注于为开发者提供高质量、易用的前端组件。在最新发布的v0.2.7版本中，团队对多个核心组件进行了功能增强和体验优化，特别是在交互体验和视觉表现方面有了显著提升。组件功能增强工具提示与弹出框组件优化工具提示(Tooltip)和弹出框(Popover)组件新增了两项实用的交互控制
  • TextTipsPlus 多行省略 + Tooltip 提示组件 JaysonJin 实用组件库vue.jsjavascript前端
    TextTipsPlus多行省略+Tooltip提示组件✅功能亮点功能说明多行省略通过line-clamp控制显示行数，默认单行动态宽度支持传入width（数值或百分比/字符串）Tooltip超出显示自动判断是否超出容器，超出后显示完整tooltip插槽支持支持插入复杂结构（文本、图标、HTML等）i18n支持插槽和text均可支持$t()组件源码（TextTipsPlus.vue）{{$t(te
  • MATLAB App Designer基础教程 Matlab GUI入门（二） Sunshine_Cherish 学习笔记Matlabmatlab开发语言程序人生
    MATLABGUI入门第二天——Lamp(灯)霓虹灯控件的使用一、主要内容:技巧1.Tooltip的使用2.Vislble和Enable3.lf函数语句的使用需求：根据阈值进行提示1.红色温度过高>=500⒉橙色温度适中400~5003.蓝色温度过低=500app.lamp.Color="1,0,0";app.show_tips.Text="温度过高！";elseifvalue=400app.la
  • html 推荐三角角标,纯CSS实现箭头、气泡让提示功能具有三角形图标 weixin_39948247 html推荐三角角标
    演示地址：CSSTrianglesDemo本文两种实现方式:使用或不使用before和:after伪元素(伪类,pseudo-elements)最近重新设计了我的网站，准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指示图标。当我重新思考想要所设计的每个图标颜色都随心所欲的时候，采用图片那就是一场灾难。幸运的是,MooTools的核心开发者DarrenWaddell
  • 新建笔记源码 无数碎片寻妳 海陆空自动化学习方案笔记java前端
    v1#NoEnv#Persistent#SingleInstanceForceSendModeInputSetWorkingDir%A_ScriptDir%SetBatchLines-1;设置坐标模式CoordMode,Mouse,ScreenCoordMode,ToolTip,ScreenCoordMode,Gui,Screen;---全局变量---globalTyporaConfigFile:
  • vue3中element-plus修改el-tooltip的宽度 selfsuer vue.jsjavascript前端
    注意选中的样式是:deep(.el-popper.is-dark){max-width:30%!important;}也有可能不需要后面的.is-dark，看情况而定，总之不是.el-tooltip修改el-tooltip的显示高度参考：前端字数太多使用el-table设置show-overflow-tooltip显示不下，闪烁不显示_某页面的el-table统一开启show-over-toolt
  • w笔记--axisPointer 的不同层级的优先级
    axisPointer的不同层级的优先级在ECharts中，axisPointer配置存在不同层级的定义（如tooltip中的axisPointer、坐标轴xAxis/yAxis中的axisPointer），它们的优先级和作用范围有特定规则：axisPointer的作用与配置层级axisPointer用于配置坐标轴指示器（即鼠标悬浮到坐标轴、数据系列时，显示的辅助线/阴影等提示元素），可在两个层级
  • vue2项目开发中遇到的小问题 0716*_zwj 前端javascript开发语言
    1.show-overflow-tooltip表格文字超出宽度，显示省略号，使用show-overflow-tooltip鼠标放上去会有一个提示框，但是文字太多的情况下，提示框文字会被吃一两个//改造table的tooltip样式，宽度不能为100%不然字体太多还是会丢失几个字（这个样式我是放在全局的）.el-tooltip__popper.is-dark{max-width:50%;}
  • echarts饼图使用tooltip详细介绍（鼠标移入显示的部分）和饼图数据显示不全的问题和echarts起始位置改变 小猫猫改bug echarts前端javascript
    自定义显示的内容：paremas打印出来以后，marker是异常前面的颜色块，a.b.c为自定义的内容2.饼图数据显示不完全：问题描述：写项目时遇到一个bug，当后端返回的数据过小，饼图会不显示，只需要在series里面加上这样的代码：minAngle:15,//最小的扇区角度（0~360），用于防止某个值过小导致扇区太小影响交互avoidLabelOverlap:true,//是否启用防止标签重
  • leaflet使用draw插件测量距离和面积 翠莲 webgisvue
    官网在线例子draw插件在线预览我的测量预览图：按照文档给出的例子，先引入这个插件，采用import形式import"leaflet-draw";import"leaflet-draw/dist/leaflet.draw.css";初始化使用插件//添加画图的提示信息L.drawLocal.draw.handlers.polyline={tooltip:{start:"点击地图开始画线",cont
  • echarts tooltip 无法正常显示
    在vue3中，无法正常显示tooltip，根据echarts官网配置项正确配置：constoption=reactive({title:{text:'用户操作平均时长',},//正确配置tooltip:{show:true,trigger:'axis'}})未出现tooltip原因：初始化ecahrts的时候用ref保存了echarts实例，实际上应该用shallowRefconstlineCha
  • ECharts 提示框（tooltip）居中显示位置的设置技巧 技术需要沉淀gogo echartsecharts前端javascript
    在使用ECharts开发可视化图表时，默认的tooltip会显示在鼠标右侧。这种默认行为在某些布局中可能会导致遮挡、偏移或视觉不居中。为了让用户获得更优的交互体验，我们可以通过手动设置tooltip.position函数，实现提示框在鼠标下方居中显示的效果。1、默认问题ECharts默认的tooltip会显示在鼠标右边，如果鼠标靠近图表右侧边缘时，tooltip可能会：超出图表边界遮挡关键信息视觉
  • 【sgImportBtn】自定义组件：导入按钮（支持上下文关联导出菜单，配置下载导入Excel模板按钮命令、样式、图标路径等） 你挚爱的强哥 Vue.jsSg.js框架vue.jsjavascriptecmascript
    sgImportBtn.vue{{dropdownItems[0].label}}{{item.label}}exportdefault{name:"sgExportBtn",components:{},data(){return{form:{},disabled:false,placement_dropdown:`bottom-end`,placement_tooltip:`top-end`,t
  • Easyui悬停组件 后会无期77 前端碎碎练easyui前端javascript
    文章目录一、EasyUI官方悬停解决方案：Tooltip组件1.基础用法2.高级配置项二、进阶场景：Datagrid表格悬停扩展1.监听行事件2.第三方扩展包（流云大神版）三、自定义悬停样式四、常见问题解决在EasyUI中，没有直接命名为“悬停组件”的独立控件，但可通过其核心组件（如tooltip）或扩展功能实现悬停效果。以下是具体实现方式及示例：一、EasyUI官方悬停解决方案：Tooltip组
  • a-tooltip偏移量不生效 兔老大的胡萝卜 前端javascripthtml
    trigger.parentNode":align="{offset:[0,-10],//[x,y]偏移}">偏移量设置最好使用align，直接offse没生效
  • 绘制自己组合的k线图_pyecharts 绘制参考线和策略线的K线图 weixin_39623355 绘制自己组合的k线图
    1、绘制流程1)构造Kline对象kline=Kline()添加数据kline.add_xaxis(xaxis_data=x_data)kline.add_yaxis(yaxis_data=y_data)全局配置kline.set_global_opts(可配置内容包括：提示框(opts.TooltipOptsx)、区域缩放(opts.DataZoomOptsy)、视觉映射配置项(opts.Vis
  • CSS attr() 函数详解 liangshanbo1215 CSS前端扩展css前端
    attr()是CSS中的一个函数，用于获取HTML元素的属性值并在样式中使用。虽然功能强大，但它的应用有一些限制和注意事项。基本语法element::pseudo-element{property:attr(attribute-name);}可用场景1.在伪元素的content属性中使用（最常用）悬停查看提示div::after{content:attr(data-tooltip);display
  • 1、Block UI 控件属性中英文对照表(基本) 机台克星 NX二次开发uic++
    1.标签位图常规BlockID控件idEnable是否可选/禁用控件Group组Label标题Show是否可见特定于块BalloonTooltipImage动态提示图片（鼠标移动到控件是显示图片）BalloonTooltipLayout动态提示布局BalloonTooltipText动态提示文本内容Bitmap指定图片DisplayBitmaplable是否显示标题HighQualitBitmap
  • echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整 我家老板是小仙女 echartecharts
    echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整由于业务要求如下：（1）排序：根据柱状组成结构，从上到下保持一致，银票-电票-白名单、银票-电票-灰名单、商票-外部商票、商票-T票通（2）标签：根据柱状组成结构，从左到右，银票-电票-白名单、银票-电票-灰名单、商票-外部商票、商票-T票通然而echart堆叠柱状图的渲染机制是柱状图从下往上的，所以第一条数据是排在最底层
  • JavaScript实现鼠标悬停提示层的完整教程 veritascxy
    本文还有配套的精品资源，点击获取简介：在JavaScript编程中，实现鼠标悬停提示层是提升用户交互体验的重要方式。本文介绍如何使用CSS和JavaScript创建和控制提示层（tooltip），使其在用户鼠标悬停时显示相关详细信息，并在鼠标移开时隐藏。具体包括了tooltip的样式设计、显示与隐藏逻辑处理以及位置调整等关键步骤。此外，文中还建议了代码封装和响应式设计的考虑，以适应不同设备的需求。
  • html鼠标移动到图片上显示冒泡框,Bootstrap 教程 - 提示冒泡(Tooltip) weixin_39965881
    提示冒泡(Tooltip)使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例，用于本地标题存储的动画和数据属性。概览使用提示冒泡持件时应了解以下：Tooltip提示冒泡组件依赖于Popper.js，你必须将popper.min.js文件放在bootstrap.js之前调用，或者使用bootstrap.bundle.min.js/bootstrap.bundl
  • 使用echarts（三）自定义图表仪表盘 沉、睡 jspythonjava数据可视化css
    自定义仪表盘样式如下代码如下Document//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));//指定图表的配置项和数据varoption={tooltip:{formatter:'{a}{b}:{c}M/S'},//toolbox:{//重置，保存图片//feature:{//rest
  • 使用 ECharts 在 Vue3 中柱状图的完整配置解析 技术需要沉淀gogo echartsvue.jsechartsjavascript
    一、初始化图表实例constchart=echarts.init(chartRef.value);二、Tooltip提示配置tooltip:{trigger:'axis',axisPointer:{type:'line'//支持'line'或'shadow'类型，指示器样式},backgroundColor:'rgba(0,0,0,0.7)',textStyle:{color:'#fff'},fo
  • Flutter之PopupMenuButton 夢鑰 flutterflutterflutter
    constPopupMenuButton({Keykey,@requiredthis.itemBuilder,this.initialValue,//初始值，如果itemBuilder里该值，则会高亮显示this.onSelected,//选中弹出弹出选项的回调this.onCanceled,//点屏幕外取消回调,点击屏幕其他地方时调用this.tooltip,//this.elevation=8
  • Vue之echarts圆饼图详解 xclhs 学习vueecharts圆饼图vue小白入门
    圆饼图案例分析代码：option={  backgroundColor:'#2c343c',  title:{    text:'CustomizedPie',    left:'center',    top:20,    textStyle:{      color:'#ccc'    }  },  tooltip:{    trigger:'item',    formatter:"{a}{
  • WPF常用技巧汇总 - Part 2 Zhen (Evan) Wang WPFwpf大数据java
    WPF常用技巧汇总-CSDN博客主要用于记录工作中发现的一些问题和常见的解决方法。目录WPF常用技巧汇总-CSDN博客1.DataGridTooltip-Multiple2.DataGridTooltip-Cell值和ToolTip值一样3.DataGridTooltip-Cell值和ToolTip值不一样4.DataGrid-Ctrl+A/Ctrl+C复制的内容不是Cell的值5.DataGri
  • CSS 文字超出范围显示省略号 有趣的小良 实际开发常见问题css3前端css开发语言
    需要实现的效果是当文字太多的时候只显示一行或两行，其余文字用…省略号配合tooltip组件去显示的时候可以用css样式这样实现white-space:pre-wrap!important;overflow:hidden;//超过隐藏text-overflow:ellipsis;//设置省略号display:-webkit-box;-webkit-line-clamp:2;//设置行数，2显示可以显
  • echarts 圆饼图空心中间加文字 tjh0001
    varoption={title:{text:circularGraph.title,//标题文本left:"center",show:circularGraph.head//是否显示标题组件},tooltip:{trigger:"item",formatter:"{b}:{c}({d}%)"},legend:{show:true,orient:"horizontal",x:"center",y:
  • echarts横向柱状图胶囊 花笙_ echartsecharts前端
    echarts配置项tooltip:{trigger:'axis',//触发tooltip提示类型axis:坐标轴触发axisPointer:{type:'cross',//指示器类型cross:十字准星指示器crossStyle:{color:'#999'//线颜色}}},grid:{left:'0%',//离容器左侧的距离top:'5%',bottom:'3%',containLabel:tr
  • HQL之投影查询 归来朝歌 HQLHibernate查询语句投影查询
            在HQL查询中，常常面临这样一个场景，对于多表查询，是要将一个表的对象查出来还是要只需要每个表中的几个字段，最后放在一起显示？ 针对上面的场景，如果需要将一个对象查出来： HQL语句写“from 对象”即可 Session session = HibernateUtil.openSession();
  • Spring整合redis bylijinnan redis
    pom.xml <dependencies> <!-- Spring Data - Redis Library --> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redi
  • org.hibernate.NonUniqueResultException: query did not return a unique result: 2 0624chenhong Hibernate
    参考：http://blog.csdn.net/qingfeilee/article/details/7052736 org.hibernate.NonUniqueResultException: query did not return a unique result: 2         在项目中出现了org.hiber
  • android动画效果 不懂事的小屁孩 android动画
    前几天弄alertdialog和popupwindow的时候，用到了android的动画效果，今天专门研究了一下关于android的动画效果，列出来，方便以后使用。 Android 平台提供了两类动画。 一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。 第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。
  • js delete 删除机理以及它的内存泄露问题的解决方案 换个号韩国红果果 JavaScript
    delete删除属性时只是解除了属性与对象的绑定，故当属性值为一个对象时，删除时会造成内存泄露  （其实还未删除） 举例： var person={name:{firstname:'bob'}} var p=person.name delete person.name p.firstname -->'bob' // 依然可以访问p.firstname，存在内存泄露
  • Oracle将零干预分析加入网络即服务计划 蓝儿唯美 oracle
    由Oracle通信技术部门主导的演示项目并没有在本月较早前法国南斯举行的行业集团TM论坛大会中获得嘉奖。但是，Oracle通信官员解雇致力于打造一个支持零干预分配和编制功能的网络即服务（NaaS）平台，帮助企业以更灵活和更适合云的方式实现通信服务提供商（CSP）的连接产品。这个Oracle主导的项目属于TM Forum Live!活动上展示的Catalyst计划的19个项目之一。Catalyst计
  • spring学习——springmvc（二） a-john springMVC
    Spring MVC提供了非常方便的文件上传功能。 1，配置Spring支持文件上传： DispatcherServlet本身并不知道如何处理multipart的表单数据，需要一个multipart解析器把POST请求的multipart数据中抽取出来，这样DispatcherServlet就能将其传递给我们的控制器了。为了在Spring中注册multipart解析器，需要声明一个实现了Mul
  • POJ-2828-Buy Tickets aijuans ACM_POJ
    POJ-2828-Buy Tickets http://poj.org/problem?id=2828 线段树，逆序插入 #include<iostream>#include<cstdio>#include<cstring>#include<cstdlib>using namespace std;#define N 200010struct
  • Java Ant build.xml详解 asia007 build.xml
    1,什么是antant是构建工具2,什么是构建概念到处可查到，形象来说，你要把代码从某个地方拿来，编译，再拷贝到某个地方去等等操作，当然不仅与此，但是主要用来干这个3,ant的好处跨平台   --因为ant是使用java实现的，所以它跨平台使用简单--与ant的兄弟make比起来语法清晰--同样是和make相比功能强大--ant能做的事情很多，可能你用了很久，你仍然不知道它能有
  • android按钮监听器的四种技术 百合不是茶 androidxml配置监听器实现接口
    android开发中经常会用到各种各样的监听器,android监听器的写法与java又有不同的地方;    1,activity中使用内部类实现接口 ,创建内部类实例  使用add方法  与java类似   创建监听器的实例 myLis lis = new myLis();   使用add方法给按钮添加监听器  
  • 软件架构师不等同于资深程序员 bijian1013 程序员架构师架构设计
            本文的作者Armel Nene是ETAPIX Global公司的首席架构师，他居住在伦敦，他参与过的开源项目包括 Apache Lucene,，Apache Nutch， Liferay 和 Pentaho等。         如今很多的公司
  • TeamForge Wiki Syntax & CollabNet User Information Center sunjing TeamForgeHow doAttachementAnchorWiki Syntax
    the CollabNet user information center http://help.collab.net/   How do I create a new Wiki page? A CollabNet TeamForge project can have any number of Wiki pages. All Wiki pages are linked, and
  • 【Redis四】Redis数据类型 bit1129 redis
    概述 Redis是一个高性能的数据结构服务器，称之为数据结构服务器的原因是，它提供了丰富的数据类型以满足不同的应用场景，本文对Redis的数据类型以及对这些类型可能的操作进行总结。 Redis常用的数据类型包括string、set、list、hash以及sorted set.Redis本身是K/V系统，这里的数据类型指的是value的类型，而不是key的类型，key的类型只有一种即string
  • SSH2整合-附源码 白糖_ eclipsespringtomcatHibernateGoogle
    今天用eclipse终于整合出了struts2+hibernate+spring框架。 我创建的是tomcat项目，需要有tomcat插件。导入项目以后，鼠标右键选择属性，然后再找到“tomcat”项，勾选一下“Is a tomcat project”即可。具体方法见源码里的jsp图片，sql也在源码里。     补充1：项目中部分jar包不是最新版的，可能导
  • [转]开源项目代码的学习方法 braveCS 学习方法
    转自： http://blog.sina.com.cn/s/blog_693458530100lk5m.html http://www.cnblogs.com/west-link/archive/2011/06/07/2074466.html   1）阅读features。以此来搞清楚该项目有哪些特性2）思考。想想如果自己来做有这些features的项目该如何构架3）下载并安装d
  • 编程之美-子数组的最大和（二维） bylijinnan 编程之美
    package beautyOfCoding; import java.util.Arrays; import java.util.Random; public class MaxSubArraySum2 { /** * 编程之美 子数组之和的最大值（二维） */ private static final int ROW = 5; private stat
  • 读书笔记-3 chengxuyuancsdn jquery笔记resultMap配置ibatis一对多配置
    1、resultMap配置 2、ibatis一对多配置 3、jquery笔记 1、resultMap配置 当<select resultMap="topic_data"> <resultMap id="topic_data">必须一一对应。 (1)<resultMap class="tblTopic&q
  • [物理与天文]物理学新进展 comsci
          如果我们必须获得某种地球上没有的矿石,才能够进行某些能量输出装置的设计和建造,而要获得这种矿石,又必须首先进行深空探测,而要进行深空探测,又必须获得这种能量输出装置,这个矛盾的循环,会导致地球联盟在与宇宙文明建立关系的时候,陷入困境       怎么办呢?  
  • Oracle 11g新特性:Automatic Diagnostic Repository daizj oracleADR
    Oracle Database 11g的FDI（Fault Diagnosability Infrastructure）是自动化诊断方面的又一增强。 FDI的一个关键组件是自动诊断库（Automatic Diagnostic Repository-ADR）。 在oracle 11g中，alert文件的信息是以xml的文件格式存在的，另外提供了普通文本格式的alert文件。 这两份log文
  • 简单排序:选择排序 dieslrae 选择排序
    public void selectSort(int[] array){ int select; for(int i=0;i<array.length;i++){ select = i; for(int k=i+1;k<array.leng
  • C语言学习六指针的经典程序，互换两个数字 dcj3sjt126com c
    示例程序，swap_1和swap_2都是错误的，推理从1开始推到2，2没完成，推到3就完成了 # include <stdio.h> void swap_1(int, int); void swap_2(int *, int *); void swap_3(int *, int *); int main(void) { int a = 3; int b =
  • php 5.4中php-fpm 的重启、终止操作命令 dcj3sjt126com PHP
    php 5.4中php-fpm 的重启、终止操作命令: 查看php运行目录命令：which php/usr/bin/php 查看php-fpm进程数：ps aux | grep -c php-fpm 查看运行内存/usr/bin/php  -i|grep mem 重启php-fpm/etc/init.d/php-fpm restart 在phpinfo()输出内容可以看到php
  • 线程同步工具类 shuizhaosi888 同步工具类
    同步工具类包括信号量（Semaphore）、栅栏（barrier）、闭锁（CountDownLatch）   闭锁（CountDownLatch） public class RunMain { public long timeTasks(int nThreads, final Runnable task) throws InterruptedException { fin
  • bleeding edge是什么意思 haojinghua DI
    不止一次，看到很多讲技术的文章里面出现过这个词语。今天终于弄懂了——通过朋友给的浏览软件，上了wiki。  我再一次感到，没有辞典能像WiKi一样，给出这样体贴人心、一清二楚的解释了。为了表达我对WiKi的喜爱，只好在此一一中英对照，给大家上次课。   In computer science, bleeding edge is a term that
  • c中实现utf8和gbk的互转 jimmee ciconvutf8&gbk编码
    #include <iconv.h> #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <fcntl.h> #include <string.h> #include <sys/stat.h> int code_c
  • 大型分布式网站架构设计与实践 lilin530 应用服务器搜索引擎
    1.大型网站软件系统的特点？ a.高并发，大流量。 b.高可用。 c.海量数据。 d.用户分布广泛，网络情况复杂。 e.安全环境恶劣。 f.需求快速变更，发布频繁。 g.渐进式发展。 2.大型网站架构演化发展历程？ a.初始阶段的网站架构。 应用程序，数据库，文件等所有的资源都在一台服务器上。 b.应用服务器和数据服务器分离。 c.使用缓存改善网站性能。 d.使用应用
  • 在代码中获取Android theme中的attr属性值 OliveExcel androidtheme
    Android的Theme是由各种attr组合而成, 每个attr对应了这个属性的一个引用, 这个引用又可以是各种东西.   在某些情况下, 我们需要获取非自定义的主题下某个属性的内容 (比如拿到系统默认的配色colorAccent), 操作方式举例一则: int defaultColor = 0xFF000000; int[] attrsArray = { andorid.r.
  • 基于Zookeeper的分布式共享锁 roadrunners zookeeper分布式共享锁
    首先，说说我们的场景，订单服务是做成集群的，当两个以上结点同时收到一个相同订单的创建指令，这时并发就产生了，系统就会重复创建订单。等等......场景。这时，分布式共享锁就闪亮登场了。   共享锁在同一个进程中是很容易实现的，但在跨进程或者在不同Server之间就不好实现了。Zookeeper就很容易实现。具体的实现原理官网和其它网站也有翻译，这里就不在赘述了。   官
  • 两个容易被忽略的MySQL知识 tomcat_oracle mysql
    1、varchar(5)可以存储多少个汉字，多少个字母数字？ 　　相信有好多人应该跟我一样，对这个已经很熟悉了，根据经验我们能很快的做出决定，比如说用varchar(200)去存储url等等，但是，即使你用了很多次也很熟悉了，也有可能对上面的问题做出错误的回答。 　　这个问题我查了好多资料，有的人说是可以存储5个字符，2.5个汉字（每个汉字占用两个字节的话），有的人说这个要区分版本，5.0
  • zoj 3827 Information Entropy(水题) 阿尔萨斯 format
    题目链接：zoj 3827 Information Entropy 题目大意：三种底，计算和。 解题思路：调用库函数就可以直接算了，不过要注意Pi = 0的时候，不过它题目里居然也讲了。。。limp→0+plogb(p)=0，因为p是logp的高阶。 #include <cstdio> #include <cstring> #include <cmath&
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他