oopsboom
oopsboom

H5基础——02CSS高级技巧

目录

精灵图
字体图标
CSS三角
CSS用户界面样式
vertical-align属性应用
溢出的文字省略显示
常见布局技巧

精灵图

为什么需要精灵图？
CSS精灵技术（也称CSS Sprites 、CSS雪碧 ）
精灵技术目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度
核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器请求一次就可以了。

精灵图的使用
1.多个小背景图片整合到一张大图
2.移动背景图片位置 background-position
3.移动距离就是这个目标图片的x和y坐标
4.因为一般情况下，都是往上往下移动，所有数值为负

.box{
	background:url(images/sprites.png)  no-repeat   -15px   -106px;
字体图标iconfont

使用场景：主要用于显示网页中通用、常用的一些小图标
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体
 
字体图标优点

  • 轻量级：一个字体图标要比一系列的图像要小。一旦字体加载，图标就会马上渲染出来，减少了服务器请求
  • 灵活性：本质是文字，可以随意改变文字的颜色、产生阴影、透明效果、旋转等
  • 兼容性：几乎支持所有浏览器
  • 字体图标不能代替精灵图 只是对工作中图标部分技术的提升和优化

总结：
1.如果遇到一些结构和样式比较简单的小图标，就用字体图标
2.如果遇到一些结构和样式复杂的小图片，用精灵图

字体图标下载
推荐网站
iconmoon字库： http://icomoon.io
阿里iconfont字库： http://www.iconfont.cn/

使用：google 百度下
 
 
 

CSS三角

比如实现这样的效果：

H5基础——02CSS高级技巧_第1张图片

源码：


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* width和height都设为0 */
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }

        /* 把其他的盒子设置为透明  三角大小取决于border大小 */
        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px 20px;
        }
    style>
head>

<body>
    <div class="box1">div>
    <div class="box2">div>
body>

html>
用户界面样式

什么是用户界面样式？
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单域拖拽

鼠标样式

属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

轮廓线outline
给表单添加outline：0；或者outline：none； 可去掉默认的蓝色边框

防止文本域拖拽
实际开发中，我们文本域右下角是不可以拖拽读的
textarea{ resize：none；}
 
 

vertical-align属性应用

用于设置一个元素的垂直对齐方式，但只针对行内元素或者行内块元素有效

语法
vertical-align：baseline| top| middle | bottom
值 描述
baseline 默认 元素放在父元素基线上
top 元素顶端与行中最高元素顶端对齐
middle 此元素放在父元素中部
bottom 元素顶端与行中最低的元素的顶端对齐

常用：给图片添加 vertical-align：middle；实现图片居中

 

溢出文字省略号显示

1.单行文本溢出显示省略号 ——必须满足3个条件

/* 1.先强制一行内显示文本 */     /*  */
white-space:nowrap;//默认normal 自动换行
 /*  2.超出的部分隐藏*/ 
 overflow·：hidden；
  /*  3.文字用省略号替代超出部分*/ 
  text-overflow：ellipsis；

2.多行文本溢出显示省略号
有较大兼容性问题 适合于webkit浏览器或移动端（移动端大部分是webkit内核）

overflow:hidden;
text-overflow:ellipsis;
/* 弹性伸缩盒子模型显示*/
display：-webkit-box；
/* 限制在一个块元素显示的文本的行数*/
 -webkit-line-clamp：2；
 /* 设置或检索伸缩盒子对象的子元素的排列方式*/
  -webkit-box-orient：vertical；
CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
CSS初始化是指重设浏览器样式。

你可能感兴趣的:(H5)

  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • Axure移动端原型模板实例100+，APP原型设计模版，高保真高交互含大组件库 默林工作室 AxureRP原型模板axure原型模板
    作品概况页面数量：共100+页（长期更新中…）源文件格式：rp格式，兼容AxureRP9/10，非程序软件无源代码适用领域：APP、小程序、H5作品特色本品为「移动端原型模板实例100+」，属于APP+H5+小程序的页面实例原型模板，主要运用了中继器＋动态面板，栏目丰富样式多多，高保真高交互高复用（带仿真交互），可以快速组装成美观大方的原型图。该原型模板的页面尺寸为375×812像素，推荐演示设备
  • 输入上/下标数字以及字母 ruisi_we 其他
    输入上/下标数字以及字母H5上标标签H5下标标签Word附上一些常用上下标H5上标标签//X²X2//5²52H5下标标签//X₂X2//5₂X2Word选中你要修改成上标或下标的字符，点击字体。要变成上标还是下标就看你了。附上一些常用上下标//上标⁰¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ//下标₀₁₂₃₄₅₆₇₈₉₊₋₌₍₎//上标ᵃᵇᶜᵈᵉᵍʰⁱʲᵏˡᵐⁿᵒᵖʳˢᵗᵘᵛʷˣʸᙆᴬᴮᒼᴰᴱᴳᴴᴵᴶᴷᴸᴹ
  • uniapp设计H5 tabbar会遮挡内容区的解决办法 qq_39016177 uni-app
    uniapp设计H5tabbar会遮挡内容区的解决办法1.现象底部tabbar会遮挡内容区最底部的文字2.解决方法—css中增加个padding-bottom:var(–window-bottom)这样就是好了官方依据官方文档链接https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F诸君有用且点赞
  • uniapp H5 关掉全部头部header qq_39016177 uni-app
    uniappH5关掉全部头部header1.进入pages.json文件"globalStyle":{//"navigationStyle":"custom","navigationBarTextStyle":"black","navigationBarTitleText":"","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":
  • H5新增标签和属性 yx_back HtmlH5新增属性H5新增标签
    H5新增标签和属性H5新增标签1、结构标签2、媒体标签3、表单标签4、其他功能标签H5新增属性1、对于js进行添加的属性。2、网页中标签中加入小图标的样式代码3、iframe新增属性4、其他属性H5全局属性可直接在标签里插入的：data-自定义属性名字；H5新增标签1、结构标签header：某个区块的头部信息/标题；section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节
  • Windows系统下安装Redis bjzhang75 windowsredis数据库
    文章目录1、下载Redis安装包2、解压压缩包3、运行Redis4、Redis连接检测5、Redis相关设置5.1设置环境变量PATH5.2Redis配置文件修改1、下载Redis安装包Windows版本的Redis可以在Github中下载：下载Redis2、解压压缩包将下载的压缩包解压到某个目录下，比如：C:\redis。3、运行Redis在cmd窗口中运行命令redis-serverredis
  • uni-app开发微信小程序 hong161688 uni-app微信小程序小程序
    uni-app是一个使用Vue.js开发所有前端应用的框架，它支持编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/字节跳动/QQ/京东等）平台。使用uni-app开发微信小程序，可以充分利用Vue.js的开发效率和小程序平台的原生能力，实现跨平台的高效开发。以下将详细介绍使用uni-app开发微信小程序的全过程，包括项目搭建、开发、调试、测试及发布等环节，内容将尽量达到或超
  • 使用 uni-app 开发微信小程序：深入教程与技巧 代码伐木匠 笔记本uni-app微信小程序notepad++
    使用uni-app开发微信小程序：深入教程与技巧uni-app是一个使用Vue.js语法开发跨平台应用的框架，能够编译到iOS、Android、H5、微信小程序等多个平台。通过uni-app，你可以一套代码同时生成多个端的应用，极大提升开发效率。本文将带你深入了解如何使用uni-app开发微信小程序，并提供大量实践经验与技巧。1.环境配置与项目创建要开始使用uni-app开发微信小程序，首先需要搭
  • React Native动画的锚点anchorPoint 沉默的依恋 ReactNative
    在RN动画开发的过程中,有需求让图片绕中心点以外的其它点旋转,本以为是一个简单的问题,猜想Facebook应该有提供类似的API.然而在官网找了一圈没有anchorPoint这个API,后来想了想,RN与H5非常像,应该有transformOrigin这个属性,然而,还是没有,在github的issues中有人提问过什么时候更新这个属性,但是官网仍旧没有计划;为了达到这种效果,其实有一种间接的方法
  • SeuratObject转h5ad格式 星星醉了 笔记
    Python的MetaCells版本输入貌似一定要h5ad格式，所以就探索了一下~这个是最方便的：SeuratDisk#安装这个包,试了直接installl和biomanager都不行,只能githubremotes::install_github("mojaveazure/seurat-disk")#载入library(SeuratDisk)library(Seurat)#一个叫seurat.h
  • seurat自学笔记1.0 单细胞数据导入 Sanye2022 pythonpandas
    Python读取.h5ad文件importanndataimportpandasaspdadata=anndata.read("/home/R/R_data/Seurat/PBMC10/output/adata.h5ad")#adata.X.todense()#将稀疏矩阵转成普通矩阵#X=pd.DataFrame(adata.X.todense())#cell_name=adata.obs.ind
  • Uni-app 开发微信小程序 vvvae1234 uni-app
    随着移动互联网的发展，微信小程序已经成为一种流行的应用开发模式。Uni-app作为一种跨平台的开发框架，使用Vue.js语法，能够方便快速地开发出微信小程序、H5、App等多端应用。本指南将引导您从环境配置到实战案例开发，帮助您快速掌握使用Uni-app开发微信小程序的技巧。2.Uni-app概述2.1什么是Uni-app？Uni-app是一个使用Vue.js语法的跨平台开发框架，允许开发者用一套
  • HTML5中的数据存储sessionStorage、localStorage 阿立聊代码 HTML实战html5前端html
    第8章HTML5中的数据存储之前通常使用Cookie存储机制将数据保存在用户的客户端。H5增加了两种全新的数据存储方式：WebStroage和WebSQLDatabase.前者用于临时或永久保存客户端少量数据，后者是客户端本地化的一套数据库系统。8.1WebStorage存储简介WebStorageAPI分为会话数据和长期数据，相应的API分为两类：sessionStorage(保存会话数据)lo
  • 从学习vue到uni-app的心得感悟 crazy_章鱼哥 学习uni-app前端javascript
    前言你是否想过，只用一套代码，就能开发出适用于多个平台的前端应用？你是否想过，只用Vue.js这样一个简洁强大的框架，就能实现各种炫酷的功能和效果？你是否想过，只用uni-app这样一个神器，就能成为一个高手？如果你有这样的想法，那么就跟我一起来学习uni-app吧！uni-app是一个基于Vue.js的全端开发框架，它可以让你用一套代码，同时运行在H5、小程序、App等多个平台上。它具有跨平台、
  • java api gateway_微服务中的 API 网关（API Gateway） Showtime 100 javaapigateway
    背景我们知道在微服务架构风格中，一个大应用被拆分成为了多个小的服务系统提供出来，这些小的系统他们可以自成体系，也就是说这些小系统可以拥有自己的数据库，框架甚至语言等，这些小系统通常以提供RestApi风格的接口来被H5,Android,IOS以及第三方应用程序调用。但是在UI上进行展示的时候，我们通常需要在一个界面上展示很多数据，这些数据可能来自于不同的微服务中，举个例子。在一个电商系统中，查看一
  • 老杨股票基金定投直播第588天 老杨定投直播
    老杨股票基金定投直播第588天今日买入：无。今日卖出：无。今日盈亏：300ETF赚3738元，恒生ETF赚7107元，黄金ETF赚1533元，德国30赚4508元，纳指ETF赚5268元。累计盈亏率：$300ETF(SH510300)$-3.87%，$恒生ETF(SZ159920)$0.7%，$黄金ETF(SZ159934)$-2.34%，德国30-0.7%，纳指ETF18.59%。每周一买入，计
  • uniapp 小程序样式兼容 zpjing~.~ uni-app小程序前端
    一、遇到的问题使用uniapp一起开发h5和小程序版本，在h5上样式是正常的，但是小程序里样式未生效二、遇到的情况1、*标签经过小程序编译后会变成label标签，css中span样式的位置label标签*标签位置添加class，class在h5和小程序中都兼容2、ulli*标签标签经过小程序编译后会变成view标签*标签位置添加class，class在h5和小程序中都兼容3、引用子组件div中几个
  • element-ui layout布局 铺满整个空间方法 遇事不决AI解决 uicss3cssvue.jsjavascript
    h5布局文件上传css样式有些朋友用height:100%并不能铺满，这个时候可以使用height:100vh即可铺满html,body,.el-container{/*设置内部填充为0，几个布局元素之间没有间距*/padding:0px!important;/*外部间距也是如此设置*/margin:0px!important;/*统一设置高度为100%*/height:100vh;}有任何问题都
  • HTML文档中折行的使用,10_h5是如何做移动端适配的？折行的时候如何实现不断行... Mr.Zzzzzzz HTML文档中折行的使用
    一、百分比适配1、要点元素的宽度使用了百分比来定宽，根据屏幕的宽度进行自适应适合页面内容结构均匀分配,固定高度,结构不是很复杂,注意要设置viewport视口内容宽度等于设备的宽度使用百分比定宽的元素，百分比参考的是该元素最近的，定了宽度的父元素2、示例固定高度,宽度自适应,100%比做适配*{padding:0;margin:0;}body{font-size:16px;overflow:hid
  • H5漂流瓶交友源码_社交漂流瓶H5源码 北漂的老猿 好代码交友漂流瓶
    简介：社交漂流瓶搭建教程环境：Nginx1.20.1-MySQL5.6.50-PHP-7.3上传源码至网站根目录，创建并导入数据库数据库信息修改：/config/database.php网站运行目录/public好代码免费下载：百度网盘
  • WebView交互架构项目实战（三），史上超级详细 m0_66264881 程序员架构移动开发android
    returnsplashTargetPath+“/”;}***1：常用JS本地化及延迟加载*******资源等文件(不需要更新)本地存储，在需要的时候直接从本地获取。哪些资源需要我们去存储在本地呢，当然是一些不会被更新的资源，例如图片文件，js文件，css文件，比预加载更粗暴的优化方法是直接将常用的JS脚本本地化，直接打包放入apk中。比如H5页面获取用户信息，设置标题等通用方法，就可以直接写入一
  • 2018-06-15 h5开发记录 superKelly
    php加载流程php->html->js+cssphp1.smarty赋值$smarty->assign("loadMsg",array('pic'=>'error','footDesc'=>'ec:'.$res));$smarty->caching=false;2.发起请求$url=Config::getApiActivityUrl().'/activity/anniversary/getGue
  • dm368用的mt9p031 sensor datasheet名词详解 highfly591
    720P-60fps：720p表示视频的分辨率可以简单地理解为视频的尺寸大小为1280×720的意思fps表示帧数一般录像使用25fps-30fps的帧数，如果60fps的话那就是高速摄影了换句话说拍出来的东西正常播放时看着是慢动作的样子的另外这也是一般游戏常用的帧数对显卡的要求很高。1/2.5-inch5Mp：指镜头的对角线长1/2.5inch。1英寸=25.4mm。1/2.5inch=10.1
  • javaShop JAVA版多用户B2B2C商城源码（PC+H5+小程序+APP） 「已注销」 java小程序开发语言
    javaShopJAVA版多用户B2B2C商城源码（PC+H5+小程序+APP）友情提示：此源码需要有java基础的开发人员JAVA版多用户B2B2C商城源码（PC+H5+小程序+APP）商城前台：http://buyer.javamall.com.cn商城后台：http://admin.javamall.com.cn管理员账号：admin密码：111111商户端:https://seller.j
  • javaShop JAVA版多用户B2B2C商城源码（PC +H5+小程序+APP） 「已注销」
    javaShopJAVA版多用户B2B2C商城源码（PC+H5+小程序+APP）友情提示：此源码需要有java基础的开发人员JAVA版多用户B2B2C商城源码（PC+H5+小程序+APP）商城前台：http://buyer.javamall.com.cn商城后台：http://admin.javamall.com.cn管理员账号：admin密码：111111商户端:https://seller.j
  • 葡萄检测-目标检测数据集（包括VOC格式、YOLO格式） 数据集_深度学习 目标检测YOLO人工智能计算机视觉葡萄
    葡萄检测-目标检测数据集（包括VOC格式、YOLO格式）数据集：链接：https://pan.baidu.com/s/1YMwAaSJc8H5SI0f8RVSidw?pwd=iygs提取码：iygs数据集信息介绍：共有1646张图像和一一对应的标注文件标注文件格式提供了两种，包括VOC格式的xml文件和YOLO格式的txt文件。标注的对象共有以下几种：[‘grape’]标注框的数量信息如下：（标注
  • 记录-小程序720°VR（跳转H5页面实现） 久违的小技巧 小程序小程序vrjavascript
    全景浏览提前准备1拍照支架/照片合成软件（KolorAutopanoGiga4.0）或者全景相机2pannellum（pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建，没有插件。）3H5页面引入pannellum.js/css文件，swiper/jquery文件（因为需要在全景图底部显示可切换图片，与dom操作/ajax
  • JAVA——异常的处理 章鱼丸子吖 java开发语言
    目录一、异常1.异常概念2.异常体系3.异常分类4.异常的产生过程解析二、异常的处理1.抛出异常throw2.Objects非空判断3.声明异常throws4.捕获异常try…catch5.finally代码块6.异常注意事项（1）多个异常分别处理（2）多个异常一次捕获，多次处理（3）多个异常一次捕获一次处理三、自定义异常1.概述2.自定义异常的练习一、异常1.异常概念异常，就是不正常的意思。在生
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
  • getElementById的用法 bijian1013 element
            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n
  • 励志经典语录 bijian1013 励志人生
    经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
  • [MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs
  • 【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
    1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
  • yum方式部署zabbix ronin47 yum方式部署zabbix
    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
  • Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EEHibernate4
    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
  • Netty源码学习-FrameDecoder bylijinnan javanetty
    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
  • SQL行列转换方法 chicony 行列转换
    create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
  • 中文编码测试 ctrain 编码
    循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
  • hive 客户端查询报堆内存溢出解决方法 daizj hive堆内存溢出
    hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us
  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
      卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
  • Eclipse简单有用的配置 dcj3sjt126com eclipse
    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
  • 在tomcat上面安装solr4.8.0全过程 eksliang Solrsolr4.0后的版本安装solr4.8.0安装
    转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址
  • Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞androidAPP分析
    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要
  • HoverTree项目已经实现分层 hvt 编程.netWebC#ASP.ENT
    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
  • Google Maps API v3: Remove Markers 移除标记 天梯梦 google maps api
    Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
  • jQuery选择器总结 lq38366 jquery选择器
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  • 基础数据结构和算法六：Quick sort sunwinner AlgorithmQuicksort
    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作 刘星宇 htmlWeb
    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下：
  • Mybatis实用Mapper SQL汇总示例 wdmcygah sqlmysqlmybatis实用
    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他