潜行者m
潜行者m

由 Opacity 属性引发的层叠问题思考与解决

在最近的一个作品中，在使用 opacity 属性来实现页面整体透明的时候，发现了一个问题。如果两个层发生了重叠，使用了 opacity 属性并且属性值小于1的层，会覆盖掉后面的层。于是动手做了个实验，来验证 opacity 的层次。

网页中的层叠规律是这样的：如果两个层都没有定义 position 属性为 absolute 或者 relative 属性，哪个层的HTML代码放在后面，哪个层就显示在上面。如果指定了 position 属性，并且设置了 z-index 属性，谁的值大，谁就在上面。

Opacity 属性引发的层叠问题

而对于没有激活 z-index 的普通层来说，如果那个层使用了属性值小于1的 opacity 属性，哪个层就会显示在上面。我们做一个Demo。代码如下：

  
<!DOCTYPE html>
<html>
<head>
	<title >带有 opacity 的层叠问题</title>
	<style>
	html{padding:40px;}
	.dd{width:100px;height:100px;}
	#a{background:red;}
	#b{background:blue;margin-left:20px;margin-top:-80px;}
	#c{background:green;margin-left:40px;margin-top:-80px;}
	</style>
</head>
<body>
	<div id="a"></div>
	<div id="b"></div>
	<div id="c"></div>
</body>
</html>

保存为 html 文件打开之后，可以看到正常的次序

由 Opacity 属性引发的层叠问题思考与解决_第1张图片

这时候，我们为 #a 加上属性 opacity：0.9 神奇的事情发生了，它覆盖了另外两个层：

由 Opacity 属性引发的层叠问题思考与解决_第2张图片

只有当为另一个层（例如：#c）也设置一个小于1的opacity值（例如：0.8）之后，后面的 #c 才能安装正常的规则覆盖在 #a 上面。

由 Opacity 属性引发的层叠问题思考与解决_第3张图片

这样，增加了小于1的 opacity 属性的层，升高了一个层次。至于里面的科学原理，我没有想明白，或许也可能是一个小BUG。但是有时候这种情况是我们不希望发生的。

通过定义 position 的属性来解决问题

那么如何来解决这个问题呢？前面也说过了，正常的情况下，指定了 position 并且指定了 z-index 值的层，拥有比普通层更高的层次，那么指定 opacity 的层和指定了 position 的层相比呢？我们对 #b 加上 position：relative 看看。这时候的样式代码如下：

  
#a{background:red;opacity:0.9;}
#b{background:blue;margin-left:20px;margin-top:-80px;position:relative;}
#c{background:green;margin-left:40px;margin-top:-80px;opacity:0.8;}

保存刷新后，看到效果是这样的：

由 Opacity 属性引发的层叠问题思考与解决_第4张图片

也就是说，对层使用 position 属性的 relative 之后，可以使其层次和 opacity 相同，这样之后，按照正常的排序进行层叠显示（在后面的实验中，我对 absolute 属性值也做了测试，结果和 relative 属性值表现的相同）。当我们取消了 #c 的 opacity 属性之后，我们可以看到，#c 被排在了最下面。

由 Opacity 属性引发的层叠问题思考与解决_第5张图片

还没有完，之前只是对 #b 激活了 position：relative 属性，还没有使用 z-index。我们对 #b 进行了 z-index 的设置（例如：100），很显然的，#b 成为了最顶层。

由 Opacity 属性引发的层叠问题思考与解决_第6张图片

层叠问题总结

使用了 position 属性值为 absolute、relative 的层，将会比普通层更高层次。使用了小于1的 opacity 属性的层，也比普通层更高层次并且和指定 position 的层同层，但是不支持 z-index 属性，所以指定 position 的层，可以使用 z-index 属性，来覆盖带有小于1的 opacity 属性的层。

>>> 继续阅读全文 ...

欢迎关注我们关于 WordPress 技巧的微博： WordPress JAM 新浪微博 新浪微博       WordPress JAM 腾讯微博 腾讯微博

© 我爱水煮鱼 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

  • One DIV：纯 CSS 和一个 DIV 标签创建的图标合集
  • Ratchet：使用 HTML，JS，CSS 创建 iPhone App 原型
  • Simple Grid：轻量级的响应式 CSS 网格系统
  • ResponsiveAeon：响应式 CSS3 网格系统框架
  • CSS FilterLab：Adobe 创建的 CSS 滤镜设置和演示工具
  • CSS3 滤镜 -webkit-filter 的介绍和使用

你可能感兴趣的:(css,开源程序)

  • Sass (Scss) 与 Less 的区别与选择 王强你强 sassscssless
    在前端开发中，CSS预处理器如Sass（SyntacticallyAwesomeStylesheets）和Less被广泛使用，它们通过引入变量、嵌套规则、混合、函数等特性，使CSS的开发过程更加高效和灵活。Sass和Less作为两大主流CSS预处理器，各自具有独特的优点和特性。本文将详细探讨Sass（特别是其语法扩展Scss）与Less之间的区别，并提供选择建议。1.语法差异Sass最初是使用缩进
  • vue2安装scss 活宝小娜 vuescss前端css
    vue2安装scss1、下载npminstall-Dsasssass-loader2、新建src/styles/variables.scss文件，并在里面写一些常用的公共样式，在vue.config.js中添加css部分const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDepen
  • QT CSS 选择器 m0_55576290 qtqtcss开发语言
    在Qt的样式表（StyleSheet）中，选择器（Selector）是用来指定样式应用对象的一种语法。它类似于CSS中的选择器，用于明确指定哪些控件（或控件的子元素）应该应用特定的样式。通过使用选择器，你可以更精确地控制样式的作用范围，避免样式被意外继承或应用到错误的控件上。1.选择器的类型在Qt的样式表中，有几种常用的选择器：（1）类型选择器（TypeSelector）类型选择器基于控件的类名来
  • CSS中相对定位使用详情 ~废弃回忆 �༄ HTMLcss前端CSS中相对定位使用详情
    1.如何设置相对定位?给元素设置postition:relative即可实现相对定位.可以使用left,right,top,bottom四个属性调整位置.2.相对定位的参考点在哪里?相对于自己原来的位置3.相对定位的特点:1.不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响.2.定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的.默认规则是:定位的元素
  • CSS中绝对定位 ~废弃回忆 �༄ HTMLcss前端CSS中绝对定位
    1.如何设置绝对定位?给元素设置postition:absolute即可实现绝对定位可以使用left,right,top,bottom四个属性调整位置2.绝对定位的参考点在哪里?参考他的包含块.什么是包含块?1.对于没有脱离文档流的元素:包含块就是父元素;2.对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没有定位,那包含块就是整个页面)3.绝对定位元素的特点:1.脱离文
  • 用css写背景模糊的三种情况 小竹子14 css前端
    1.背景模糊这种最简单也是最直接的，这里展示两种背景模糊的写法：1.用backdrop-filter的一个子属性blur进行设置模糊（这里的值代表的是将n✖n方格里面的像素的颜色做加权平均，即高斯模糊。2.用filter直接进行设置模糊。这里需要注意的是，filter会直接影响元素的内容，而backdrop-filter作用于元素的背景。通常情况下，使用backdrop-filter会使整个元素的
  • HTML 样式之 CSS 全面解析 烂蜻蜓 HTMLhtmlcss前端
    在网页开发的世界里，HTML负责搭建页面的结构，而CSS（CascadingStyleSheets，层叠样式表）则承担着渲染HTML元素标签样式的重任，赋予网页丰富的视觉效果。一、CSS的魅力展现CSS能够实现诸如改变文字的样式与颜色（Look!Stylesandcolors）、灵活操控文本（ManipulateText）、设置元素的颜色和盒子模型（Colors,Boxes）等诸多功能，极大地提升
  • 响应式设计已死？流体布局才是未来！ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在当今的Web设计领域，挑战从未如此巨大。各种屏幕尺寸和分辨率的智能设备层出不穷，要让网站在所有设备上保持一致的用户体验，难度可想而知。但别担心，流体布局（FluidLayout）正是为了解决这一问题而生。它不仅适用于超大屏幕，同样也能完美适配小型移动设备，真正做到自适应！接下来，我们深入了解流体布局的原理
  • 流星雨特效css3 你的美，让我痴迷 cssCSS动画HTML5星系背景关键帧视觉艺术
    *{margin:0;padding:0;box-sizing:border-box;}body{overflow:hidden;}section{position:absolute;top:0;left:0;width:100%;height:100vh;background:url(img/xingkong.jpg);background-position-x:center;backgroun
  • CSS3 用户界面设计指南 froginwe11 开发语言
    CSS3用户界面设计指南引言随着互联网的快速发展，用户界面设计已经成为网站和应用程序吸引和留住用户的关键因素之一。CSS3，作为Web开发中的核心技术之一，提供了丰富的工具和特性来改善用户界面。本文将深入探讨CSS3在用户界面设计中的应用，包括基本概念、常用技巧以及实际案例分析。CSS3用户界面基本概念1.媒体查询媒体查询（MediaQueries）是CSS3的一个重要特性，它允许开发者根据不同的
  • Electron+Python软件系统开发记录（一）：基础环境搭建 多宝鱼1998 环境配置遇到的坑pythonnodejsthrift
    Electron+Python软件系统开发记录（一）：基础环境搭建1.问题说明最近开始做本科毕设，其中有一部分内容是搭建一个完整的软件系统。系统要求就是常见的客户端，服务器，数据库的整体架构。因为本科不是计算机系的，所以学习的相关技能少，以前写课程设计一般用QT或者MFC，还有Mac的OC语言。本着多学习的态度，这次选用了Electron框架，可以迫使自己学学html,css,js这些东西。后端因
  • 在Vite创建项目中引入Sass弹出The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0 宝子卡粉 javascript前端node.js
    在Vite创建项目中引入Sass弹出ThelegacyJSAPIisdeprecatedandwillberemovedinDartSass2.0.0原因分析：其实通过报错提供的链接就可以知道，sass提供的某些jsapi即将在v2.0.0的新版本中废弃了，提醒你及时更新解决方案：在配置文件vite.config.js中配置//设置scss的api类型为modern-compilercss:{pr
  • vue3 antd table表格样式修改——ant design vue table表格的行高调整 Dorable_Wander antdesignvueVuevue.jscss前端anti-design-vuejavascript
    vue3antd项目实战——修改antdesignvuetable组件的默认样式（调整每行行高）知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会用到的知识链接vue3+antdesignvue+ts实战【ant-design-vue组件库引入】css样式穿透（/deep/::v-deep深度选择器）vue3antd项目实战——table表格（一文带你快速实现后台
  • vue3 el-table 通过深度选择器::v-deep修改组件内部样式（默认样式） BillKu vue.jsjavascript前端
    默认的样式：修改的样式：CSS：//使用vue3的深度选择器::v-deep（或者:deep，::v-deep的别名），修改组件内部样式，从而改变组件默认的显示效果//表格奇数行样式::v-deep.el-table.odd-row{background-color:#ccffff;}//表格偶数行样式:deep.el-table.even-row{background-color:#9acdd6
  • React+Vite从零搭建项目及配置详解 一朵好运莲 react.js前端前端框架
    相信很多React初学者第一次搭建自己的项目，搭建时会无从下手，本篇适合快速实现功能，熟悉React项目搭建流程。目录一、创建项目react-item二、调整项目目录结构三、使用scss预处理器四、组件库AntDesign五、配置基础路由六、配置别名路径一、创建项目react-itemnpmcreatevitereact-item二、调整项目目录结构-src-apis项目接口函数-assets项目
  • Stack Navigator中使用自定义的Render Callback AI画手小王 前端javascriptwebpack
    前言关于Vite和Vue3的讨论越来越多，看了官网的特性后，真是按捺不住想尝试一下。开发环境秒开？CompositionAPI？SFCStyleCSSVariableInjection？看起来哪个都比webpack+Vue2香呀。（尤大都向React推荐Vite了，难道你还不试一下Vite么？）其实在去年，我们在LOFTER的哈利波特街区活动中就尝试使用了Vite2+Vue3搭建活动主街区页面，当
  • 【编程向导】Nginx-静态资源服务器 wtrees_松阳 nginx服务器运维
    静态资源静态资源即非服务器动态生成的文件。常见静态资源类型：浏览器端渲染：HTML、CSS、JS图片：JPEG、GIF、PNG视频：FLV、MPEG文件：TXT等任意下载文件基本配置Web服务器一个重要的功能是服务静态文件（图像或静态HTML页面）。例如，Nginx可以很方便的让服务器从/data/www获取html文件，从/data/images获取图片来返回给客户端，这只需要在http块指令中
  • Vue3开发 vue-router的使用 CV菜鸟# 前端开发vue.jsjavascript前端
    1、vue-router简介官方介绍：VueRouter是Vue.js(opensnewwindow)官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vue.js过渡系统的视图过渡效果细粒度的导航控制带有自动激活的CSSclass的链接HTML5历史模式或hash模式，在IE9中自
  • 【SpringBoot】实现登录功能 一只爱打拳的程序猿 SpringMyBatisHTML5+CSSspringbootmybatisjavascripthtml5css
    在上一篇博客中，我们讲解了注册页面的实现。在此基础上会跳转到登录页面，今天给大家带来的是使用SpringBoot，MyBatis，Html，CSS，JavaScript，前后端交互实现一个登录功能。目录一、效果二、源码2.1前端2.2后端一、效果用户名和密码栏输入空或没有值时，提示错误。在数据库中有以下信息，任意挑选一条信息进行登录操作。输入用户lisi，123后登陆成功跳转到个人列表。二、源码2
  • 深度掌握 ReactJS 高级概念：前端开发者必备 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读这篇文章汇总了ReactJS中值得深入研究的高级概念。读完后，不仅在前端面试中能更胸有成竹，还能自行开发一个类似ReactJS的UI库。目录Rendering的含义与过程Re-rendering发生的机制及原因VirtualDOM的原理Reconciliation算法的运行方式ReactJS的性能优化方案1
  • vite+vue+ts+element-plus从零开发管理后台框架(18)-主颜色优化 mirahs vue.js
    问题编辑src/views/Home.vue，添加一个主颜色的按钮。Primary首页{{item}}正常鼠标滑过发现鼠标滑过后颜色出问题了，这是因为按钮样式使用了主颜色相关的变量，而主颜色相关的变量不止el-color-primary这个css变量。按钮样式主颜色变量所以我们要把这些主颜色相关的变量都动态设置解决编辑src/store/color.ts，添加如下辅助方法。import{defin
  • vite+vue+ts+element-plus从零开发管理后台框架(17)-主颜色动态设置 mirahs vue.js
    之前的主颜色是静态设置的，这里通过颜色选择器选择颜色动态设置。删除静态设置主颜色编辑src/style.css，删除如下静态主颜色样式。:root{--el-color-primary:red;}:root.dark{--el-color-primary:red;}颜色Store新建src/store/color.ts，内容如下。主要是有一个primary主颜色的属性并且默认是element-pl
  • 【气象编程】利用ERA5数据计算涡度平流并绘图 水成文 鸿长飞 pythonmatplotlibnumpyscipy
    利用ERA5数据计算涡度平流并绘图目录利用ERA5数据计算涡度平流并绘图1.官网示例（基于NCSS）存在问题2.解决方法1.官网示例（基于NCSS）metpy给出的涡度平流计算绘图代码链接:500hpa_vorticity_advection整体流程是读取数据，计算涡度，计算涡度的平流，然后绘图。存在问题示例中使用的数据结构和要使用的ERA5略有不同，此外，由于版本问题，示例中使用的以下计算语句由
  • HTML&CSS绘制三角形 南枝异客 前端csshtml开发语言
    1.代码：01triangle.box{width:0px;height:0px;/*background-color:red;*/border:50pxsolidtransparent;border-left:50pxsolidrgb(255,174,0)}2.效果图
  • react 组件封装原则_如何基于antd封装自己的react组件并发布到npm 楚云卿 react组件封装原则
    引言在前端项目开发过程中，有大量重复的内容，比如布局相似的模块，较多的功能表单等，我们可以提炼成组件来提升效率，减少重复建设。文章以实际工作中的项目为例，介绍如何将项目中常用的组件进行封装并发布到npm中。1前提要求在开始前你需要具备以下条件：安装了Node&npm安装了Git基本掌握npm，git使用方法熟练使用JavaScript&ES6&CSS基本掌握React熟悉React,antd2开始
  • 前端-webpack一些常用配置的作用 大嘴史努比 前端webpacknode.js
    1.LoaderLoader用于对模块的源代码进行转换。它可以将非JavaScript文件（如CSS、图片、字体等）转换为webpack能够处理的模块。常用Loader及其作用Loader作用babel-loader将ES6+代码转换为ES5，兼容旧版浏览器。css-loader解析CSS文件，处理@import和url()等语法。style-loader将CSS插入到DOM中，通过标签生效。sa
  • Selenium工具使用Python语言实现下拉框定位操作 测试1998 职场和发展python软件测试自动化测试selenium测试用例测试工具
    点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快我们通常遇到的下拉框有显性的下拉框和隐性的下拉框；有的下拉框还可以进行单选或多选操作，在selenium中如何实现下拉框的定位通常使用select标签进行定位。对于一些页面中隐性的下拉框，则需要CSS/JS动态加载，非标准的HTMLSELECT元素，通过Python语言如何实现定位，让我们一起来研究一下吧.select的方法列表如下：显性
  • 深入解析CSS动画：从基础到实战的完整指南 斯~内克 csscss前端
    一、CSS动画的现代意义与核心优势在Web开发领域，CSS动画已成为构建现代交互体验的核心技术。相比传统的JavaScript动画实现方式，CSS动画具有以下显著优势：硬件加速优化：浏览器可自动使用GPU加速，实现更流畅的动画效果声明式语法：通过简洁的代码描述复杂动画序列性能优势：浏览器原生支持，无需额外脚本解析维护便捷：动画逻辑与业务代码分离，易于修改和扩展响应式支持：可结合媒体查询实现多设备适
  • vue项目全局引入scss文件 马康鑫 vue.jsscss前端
    在Vue项目中，可以通过以下步骤全局引用SCSS文件：1、首先，确保你的Vue项目已经安装了SCSS的相关依赖，可以使用npm或者yarn进行安装。例如，使用npm安装依赖的命令如下：npminstallnode-sasssass-loader--save-dev2、在Vue项目的根目录下，创建一个名为vue.config.js的文件（如果已经存在则跳过此步骤）。3、在vue.config.js文
  • Effeckt.css项目：CSS交互动画应用集锦 weixin_33982670 javascriptViewUI
    目前，网上有大量基于CSS转换的实验和示例，但它们都过于分散，而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来，例如：弹窗、按钮、导航、列表、页面切换等等。Effeckt.css是一个集合了众多新鲜而又实用的CSS/jQuery动画效果应用，既适用于网站也适用于手机Web开发，例如：弹窗、按钮、导航、列表、页面切换等等，这些特效动画都能给你的网站提升一定用户体验，
  • Java开发中，spring mvc 的线程怎么调用？ 小麦麦子 springmvc
    今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。 问题：     在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局
  • maven依赖范围 bitcarter maven
    1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包 2.compile 只有编译和打包时才会依赖 3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包 4.runtime 运行时依赖，编译不依赖 5.默认compile 依赖范围compile是支持传递的，test不支持传递 1.传递的意思是项目A，引用
  • Jaxb org.xml.sax.saxparseexception : premature end of file darrenzhu xmlprematureJAXB
    如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误： org.xml.sax.saxparseexception : premature end of file 很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In
  • CSS Specificity 周凡杨 html权重Specificitycss
      有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。     规则：   HTML标签的权重是1 Class 的权重是10 Id 的权重是100
  • java与servlet g21121 servlet
    servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。 下面是java官方网站上对servlet的介绍： java官网对于servlet的解释 写道 Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha
  • eclipse中安装maven插件 510888780 eclipsemaven
    1.首先去官网下载 Maven： http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz 下载完成之后将其解压， 我将解压后的文件夹：apache-maven-3.2.3， 并将它放在 D:\tools目录下， 即 maven 最终的路径是：D:\tools\apache-mave
  • jpa@OneToOne关联关系 布衣凌宇 jpa
    Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。 Nruser实体类 //***************************************************************** @Entity @Table(name="nruser") @DynamicInsert @Dynam
  • 我的spring学习笔记11-Spring中关于声明式事务的配置 aijuans spring事务配置
    这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中
  • java 动态代理简单实现 antlove javahandlerproxydynamicservice
    dynamicproxy.service.HelloService package dynamicproxy.service; public interface HelloService { public void sayHello(); }   dynamicproxy.service.impl.HelloServiceImpl package dynamicp
  • JDBC连接数据库 百合不是茶 JDBC编程JAVA操作oracle数据库
             如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中;   JDBC链接数据库的代码和固定写法;     1,加载oracle数据库的驱动;     &nb
  • 单例模式中的多线程分析 bijian1013 javathread多线程java多线程
    谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。 饿汉式： package com.bijian.study; public class Singleton { private Singleton() { } // 注意这是private 只供内部调用 private static
  • javascript读取和修改原型特别需要注意原型的读写不具有对等性 bijian1013 JavaScriptprototype
            对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有
  • 【持久化框架MyBatis3六】MyBatis3集成第三方DataSource bit1129 dataSource
    MyBatis内置了数据源的支持，如：   <environments default="development"> <environment id="development"> <transactionManager type="JDBC" /> <data
  • 我程序中用到的urldecode和base64decode,MD5 bitcarter cMD5base64decodeurldecode
    这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码： string Base64Decode(const char* Data,int DataByte,int& OutByte) { //解码表 const char DecodeTable[] = { 0, 0, 0, 0, 0, 0
  • 腾讯资深运维专家周小军：QQ与微信架构的惊天秘密 ronin47
    社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心
  • java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素 bylijinnan java
    public class MinOfShiftedArray { /** * Q69 旋转数组的最小元素 * 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。 * 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。 */ publ
  • 看博客，应该是有方向的 Cb123456 反省看博客
    看博客，应该是有方向的:  我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客.  我刚突然想到的:  1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。  2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的.    为什么要写
  • [开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖 comsci 开源项目
         为什么这样说呢？  因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。       所以，为避免这种不确定性风险，我
  • 一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ） cwqcwqmax9 sql
    见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011 Web翻页优化实例 提交时间: 2004-6-18 15:37:49      回复    发消息  环境： Linux ve
  • Hibernat and Ibatis dashuaifu Hibernateibatis
    Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi
  • 备份MYSQL脚本 dcj3sjt126com mysql
    #!/bin/sh # this shell to backup mysql #[email protected] (QQ:1413161683 DuChengJiu) _dbDir=/var/lib/mysql/ _today=`date +%w` _bakDir=/usr/backup/$_today [ ! -d $_bakDir ] && mkdir -p
  • iOS第三方开源库的吐槽和备忘 dcj3sjt126com ios
    转自 ibireme的博客   做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。   目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。   首先整理了一份 Github上排名靠
  • html wlwmanifest.xml eoems htmlxml
    所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。 步骤： 加入到function.php remove_action('wp_head', 'wp_generator'); //wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog remov
  • 浅谈Java定时器发展 hacksin java并发timer定时器
    java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。 Timer与ScheduleThreadPoolExecutor对比： 1.    Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列
  • 移动端页面侧边导航滑入效果 ini jqueryWebhtml5cssjavascirpt
    效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码： <!DOCTYPE html> <h
  • AspectJ+Javasist记录日志 kane_xie aspectjjavasist
    在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。   @Override public String get(String key) { // long start = System.currentTimeMillis(); // System.out.println("Be
  • redis学习笔记 MJC410621 redisNoSQL
    1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。 1，处理超大量的数据 2，运行在便宜的PC服务器集群上， 3，击碎了性能瓶颈。 1)对数据高并发读写。 2)对海量数据的高效率存储和访问。 3)对数据的高扩展性和高可用性。 redis支持的类型： Sring 类型 set name lijie get name lijie set na
  • 使用redis实现分布式锁 qifeifei
    在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下：   public Long setnx(final byte[] key, final byte[] value) { checkIsInMulti(); client.setnx(key, value); ret
  • BI并非万能，中层业务管理报表要另辟蹊径 张老师的菜 大数据BI商业智能信息化
           BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。        BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有
  • 安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题 wudixiaotie function
    1.在~/.bashrc最后加入 [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"  2.重新启动terminal输入：   rvm use ruby-2.2.1 --default  把当前安装的ruby版本设为默
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他