JS.Huang
JS.Huang

【CSS3】transfrom 的使用

CSS3 transfrom:

  • 浏览器坐标系
  • transfrom 的特点
  • transfrom 的属性值
    • 平移 translate
    • 旋转 rotate
    • 缩放 scale
    • 倾斜 skew
  • transfrom 复合写法注意事项
  • transform-origin
  • position: relative & transfrom
  • 3D效果的实现
    • perspective
    • perspective-origin
    • transform-style
        • eg：画一个立方体

浏览器坐标系

  • x 轴：左 → 右
  • y 轴：上 → 下
  • z 轴：里 → 外

transfrom 的特点

  • 不会脱离文档流，即不会影响页面的布局
  • 可以优化动画的性能
  • 默认以元素自身的中心位置为原点

transfrom 的属性值

transfrom 应用于元素的 2D / 3D 转换。这个属性允许你将元素旋转，缩放，移动，倾斜等

平移 translate

  • translate(x, y) / (x)：x、y 分别控制元素在 x、y 轴上的平移
  • translateY()：在 Y 轴上平移
  • translateX()：在 X 轴上平移
  • translateZ()：在 Z 轴上平移
  • 单位：px、% (相对于自己而言)

旋转 rotate

  • rotate() / rotateZ() → Z 轴
  • rotateX() → X 轴
  • rotateY() → Y 轴
  • 单位：deg (度数)

缩放 scale

  • scale(x, y) / (x & y)：x、y 分别控制元素宽度、高度的倍数
    • 小于 1 缩小；大于 1 放大 (元素里面的内容也会跟着变化)
    • 负数-镜像倒置，相当于绕 Z 轴旋转了180度

倾斜 skew

  • skew(x, y) / (x)：x、y 分别控制元素绕 x、y 轴翻转的度数
  • skewX()
  • skewY()
  • 单位：deg

transfrom 复合写法注意事项

  • 元素的 X、Y 轴的方向是根据元素确定的，所以旋转后 x、y 轴的方向会改变
  • 渲染顺序符合队列 → 即先写先生效，后写后生效
  • eg：transform: rotate(30deg) rotateX(30deg) rotateY(30deg);

transform-origin

  • 用于设置原点的位置，能影响元素的旋转、缩放、倾斜

  • 该属性必须和 transform 属性一起使用

transform-origin: 0 0; /* 设置圆心位置 */
transform-origin: center;
  • x y：设置原点所在的 x、y 轴的位置（单位：px、%
  • left、right、bottom、top、center 中的 1~2 个
    • left top → 0% 0% → 元素的左上角
    • right bottom → 100% 100% → 元素的右下角
  • 默认是 center → 50% 50% → 元素的中间

position: relative & transfrom

  • 相同点：都不会脱离文档，即不会影响页面的布局
  • 差别：transform 可以优化动画的性能

position 会引起网页的重排，transform 只会引起网页的重绘

3D效果的实现

perspective

  • 即视距，也叫景深；就是我们离显示器的距离，数值越大，离我们越远
  • 给父级标签设置景深，这时这个父级元素叫做 “舞台元素”，我们相当于站到父级元素上看他的子元素，会有 “近大远小” 的视觉效果
  • 默认值是 none，即没有 3D 视觉效果
  • 如果他的子元素也设置了 perspective，视觉效果会叠加

perspective-origin

  • 定义 3D 元素所基于的 X 轴和 Y 轴
  • 当为元素定义 perspective-origin 属性时，其子元素会获得透视效果
  • 注意：使用此属性必须先使用 perspective 属性，而且只影响 3D 转换元素

transform-style

  • 给父级元素设置 transform-style: preserve-3d; 表示将子元素呈现在三维空间中，这时该元素叫 “容器”
  • 默认值是 flat，表示将子元素呈现在二维空间中
  • 注意：使用此属性必须先使用 transform 属性
eg：画一个立方体
  1. 设置 perspective，设置景深
  2. 设置 transform-style，进行 3D 填充
  3. 设置 transform，绘制正方体
  4. 设置 animation，设置动画效果
DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index2.css">
    <title>Documenttitle>
head>

<body>
    <ul>
        <li class="front">前li>
        <li class="rear">后li>
        <li class="left">左li>
        <li class="right">右li>
        <li class="up">上li>
        <li class="down">下li>
    ul>
body>

html>

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

/* 舞台元素 */
body {
    /* 设置景深 */
    perspective: 1000px;
}

/* 容器 */
ul {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    animation: rotate 10s infinite linear;
    /* 进行3d填充 */
    transform-style: preserve-3d;
}

/* 制作动画效果 */
@keyframes rotate {
    to {
        transform: rotateX(360deg) rotateY(360deg) rotate(360deg);
    }
}

ul li {
    line-height: 200px;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #000;
    background-color: rgba(70, 187, 152, .5);
}

ul li.front {
    transform: translateZ(100px);
}

ul li.rear {
    transform: translateZ(-100px);
}

ul li.left {
    transform: translate(-50%) rotateY(-90deg);
}

ul li.right {
    transform: translate(50%) rotateY(90deg);
}

ul li.up {
    transform: translateY(-50%) rotateX(90deg);
}

ul li.down {
    transform: translateY(50%) rotateX(90deg);
}

你可能感兴趣的:(CSS,笔记,css3)

  • 揭秘 CSS Houdini：用浏览器魔法解锁 CSS 的终极潜力 寒鸦xxx csshoudini前端
    一、为什么我们需要CSSHoudini？1.1传统CSS的困境当我们试图用CSS实现一个波浪形边框时，通常会经历这样的挣扎：/*传统实现方案*/.wave-border{position:relative;overflow:hidden;}.wave-border::after{content:'';position:absolute;/*需要复杂计算和多个伪元素拼接*/}这种实现方式存在三个致命
  • Python+Playwright常用元素定位方法 HAMYHF python功能测试
    CSSselector选择器在CSS中，定位元素主要通过选择器完成，以下是几种常见的CSS选择器定位方法：标签选择器(element):直接使用HTML元素名称来定位，例如p会选择所有段落元素。属性选择器(attribute):选择所有具有指定属性的元素，无论该属性的值是什么。例如，[title]会选择所有包含title属性的元素。选择具有指定属性，并且该属性值完全等于给定值的元素。例如，[typ
  • JavaScript网页设计案例：打造交互式个人简历网站 程序媛小果 前端javascript开发语言ecmascript
    在当今数字化时代，个人简历不再局限于纸质文档，而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言，为网页设计提供了无限可能，使得网页不仅仅是静态的信息展示，而是具有丰富交互性的平台。本文将通过一个案例，展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站，它不仅展示个人信息、工作经历、教育背景和
  • 使用 Docker 基本命令创建并发布带有新功能的镜像到阿里云 2021级计算机网络技术2班梁嘉敏 docker阿里云容器
    1.关于Docker镜像1.基础假定您在开发一个网上商城，您使用的是一台笔记本电脑而且您的开发环境具有特定的配置。其他开发人员身处的环境配置也各有不同。您正在开发的应用依赖于您当前的配置且还要依赖于某些配置文件。此外，您的企业还拥有标准化的测试和生产环境，且具有自身的配置和一系列支持文件。您希望尽可能多在本地模拟这些环境而不产生重新创建服务器环境的开销。请问？您要如何确保应用能够在这些环境中运行和
  • 【学习笔记】Elasticsearch之环境搭建 聪明马的博客 elasticsearch学习笔记elasticsearch
    Elasticsearch官网本文是自己在学习Elasticsearch的过程中，记下的觉得非常有用的笔记，希望对大家认识Elasticsearch有一点点帮助。1.什么是Elasticsearch官网上是这么介绍的：Elasticsearchisadistributeddocumentstore.Insteadofstoringinformationasrowsofcolumnardata,El
  • CSS 滚动条样式修改（详细） mr_cmx csscss3html
    1、滚动条整体部分使用::-webkit-scrollbar示例：.container::-webkit-scrollbar{width:20px;//修改滚动条宽度}2、滚动条中的滑块使用::-webkit-scrollbar-thumb示例：.container::-webkit-scrollbar-thumb{border-radius:8px;box-shadow:inset005pxrg
  • React学习笔记（组件通信）_千峰教育 react m0_54846402 程序员react.js学习笔记
    reduxprinciple-+//定义一个dispatch的方法，接收到动作之后，自动调用constdispatch=(action)=>{changeState(action)renderCount(countState)}```创建createStore方法Reduxprinciple02reduxprinciple-+//定义一个方法，用于集中管理state和dispatchconstcr
  • 拯救者机型背光键盘无法开启 famous_pengfei 计算机外设笔记本电脑
    如果你是联想拯救者系列笔记本电脑的用户，想必对背光键盘这一酷炫功能十分喜爱。然而，当背光键盘突然无法开启时，这无疑会让人感到困惑和沮丧。别担心，联想官方知识库已经为你准备好了详细的解决方案。文章中提到，Windows10系统下，用户可以通过开始菜单进入LenovoSettings来开启背光键盘。这个方法简单易懂，即使是电脑小白也能轻松上手。此外，文章还提供了详细的图文说明，帮助用户更直观地理解操作
  • 蓝队基础：企业网络安全架构与防御策略 重生之物联网转网安 网络安全安全
    声明学习视频来自B站up主**泷羽sec**有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，此文章为对视频内容稍加整理发布，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关，切勿触碰法律底线，否则后果自负！！！！有兴趣的小伙伴可以点击下面连接进入b站主页[B站泷羽sec](https://space.bilibili.com/35032
  • 2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽安全-黑客4148 安全web安全网络网络安全CTF
    目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.
  • 2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽安全-黑客4148 网络安全web安全linux密码学CTF
    目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.
  • Python入门笔记 「已注销」 计算机
    文章目录第0周课程导学第1周Python基本语法元素保留字数据类型语句与函数输入函数第2周Python基本图形绘制turtle库绝对坐标海龟坐标turtle角度坐标体系RGB色彩体系画笔控制函数运动控制函数方向控制函数循环语句第3周基本数据类型整型浮点数科学计数法复数类型数值运算操作符二元操作符有对应的增强赋值操作符数值运算函数字符串类型的表示字符串切片字符串类型及操作字符串类型格式化time库时
  • dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript) weixin_39979245 dreamweaverhtml语言
    Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN：978
  • html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作 律保阁-Michael html5中css的含义
    HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48
  • html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准 vvv666s
    ②学会运用HTML语言中的标记设置颜色、文本格式和列表；熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法；③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；④熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；⑤掌握JavaScript语言的语法；⑥掌握在HTML语言代码中嵌入
  • RT-Thread I2C 驱动框架学习笔记 DgHai RT-Threadmcu单片机
    RT-ThreadI2C驱动框架（5.1.0）II2C驱动包括两大部分，I2C驱动总线驱动和I2C设备驱动。I2C总线驱动负责控制I2C总线的硬件，包括发送和接收数据的时序控制，以及处理总线冲突等。它与嵌入式系统的硬件层交互，实现对I2C总线的底层操作，使得应用程序可以通过I2C总线与外部设备进行通信。I2C设备驱动负责管理和控制连接在I2C总线上的具体外部设备。它与I2C总线驱动和嵌入式系统的驱
  • CCNP350-401学习笔记（351-400题） 殊彦_sy CCNP题库学习
    351、WhichnewenhancementwasimplementedinWi-Fi6?A.4096QuadratureAmplitudeModulationModeB.ChannelbondingC.Wi-FiProtectedAccess3D.UplinkandDownlinkOrthogonalFrequencyDivisionMultipleAccess352、HowdoesIGMPf
  • 前端开发入门指南：HTML、CSS和JavaScript基础知识 方向感超强的 javascriptcsshtml前端
    引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与
  • 16、电科院FTU检测标准学习笔记-基本性能2 six2me 配电自动化(FTU)测试笔记学习笔记FTU配电检测
    作者简介：本人从事电力系统多年，岗位包含研发，测试，工程等，具有丰富的经验在配电自动化验收测试以及电科院测试中，本人全程参与，积累了不少现场的经验————————————————————————————————————目录交流工频电量影响量试验频率带来的影响谐波变化带来的影响不平衡电流对功率的影响三相功率测量元件之间相互作用引起的改变故障电流采集电流过载检测（大电流）状态量输出（遥控）输入SOE分
  • C语言流程控制学习笔记 前端熊猫 C语言c语言学习笔记
    1.顺序结构顺序结构是程序中最基本的控制结构，代码按从上到下的顺序依次执行。大多数C语言程序都是由顺序结构组成的。2.选择结构选择结构根据条件的真假来决定执行哪一段代码。在C语言中，选择结构主要有以下几种：2.1if语句if语句用于根据条件的真假来执行相应的代码块。if(condition){//当条件为真时执行的代码}2.2if-else语句if-else语句用于在条件为真时执行一段代码，为假时
  • 网页中加载 SVG 的七大方式 前端熊猫 Svgjavascripthtmlsvgvue
    一、直接使用标签加载外部SVG文件优点：简单易用：与加载其他图片格式（如PNG、JPEG）相同。浏览器支持良好：现代浏览器普遍支持。可缓存：SVG文件可以被浏览器缓存，减少重复请求。缺点：无法直接操作SVG内部元素：如果需要对SVG内部的元素进行交互或样式修改，这种方法不适用。适用场景：静态图像展示：仅需要展示SVG图像，不需要与之交互。二、将SVG作为CSS背景图片.icon{width:100
  • jQuery UI CSS 框架 API lly202406 开发语言
    jQueryUICSS框架API概述jQueryUI是一个基于jQuery的用户界面和交互库，它提供了一套丰富的交互组件和视觉效果，旨在帮助开发者快速构建具有吸引力和互动性的网页应用。jQueryUICSS框架API是jQueryUI的一部分，它允许开发者通过简单的CSS类来控制UI组件的样式和外观。本文将详细介绍jQueryUICSS框架API的使用方法、常用类和功能，帮助开发者更好地利用这一工
  • 部署前端项目2 augenstern416 前端
    前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V
  • CSS属性 augenstern416 CSScss前端
    1.CSS定位方式initial：设置该属性为浏览器默认值inherit：规定应该从父元素继承position属性的值。static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20”会向元素的LEFT位置添加20像素。absolute：生成绝对定位
  • 【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 网安詹姆斯 web安全CTF网络安全大赛pythonlinux
    【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、S
  • 前端基础入门：HTML、CSS 和 JavaScript 阿绵 前端前端htmlcssjs
    在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元
  • 网页制作03-html,css,javascript初认识のhtml的图像设置 Ama_tor 网页制作专栏htmlcss前端
    一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持
  • 小白入门笔记：CMake编译过程详解 3Ｄ视觉工坊 3D视觉从入门到精通笔记c++开发语言
    作者丨SkyShaw@知乎点击进入—>3D视觉工坊学习交流群1、你好，CMake1.1CMake是什么？我觉得针对这个问题最简单（但不是最正确的）的回答应该是：“CMake是服务于将源代111码转换成可执行的文件的工具”。将源码转换为可工作应用会比较神奇。不仅是效果本身(即设计并赋予生命的工作机制)，而且是将理念付诸于过程的行为本身。CMake本身是一个工具集，由五个可执行的程序组成：cmake、
  • LLM论文笔记 14: The Impact of Positional Encoding on Length Generalization in Transformers Zhouqi_Hua 大模型论文阅读论文阅读人工智能深度学习笔记语言模型
    Arxiv日期：2023.12.15机构：McGillUniversity/IBM/Facebook/ServiceNow关键词长度泛化位置编码CoT核心结论1.decoder-only中不显式使用位置编码（NoPE）可以提高长度泛化性能2.（证明了）decoder-onlytransformer如果NoPE同时具备绝对APE和RPE的能力3.暂存器（cot）对于长度泛化和任务相关，同时关注短期和
  • CSS 修改 SVG图标的颜色 小达学徒 htmlcsssvg图标颜色改变
    方法1、利用filter中的drop-shadow给icon加样式(利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)filter:drop-shadow(red80px0);transform:translateX(-80px);给父元素加样式（父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域）overflow:hidden;filter的drop-shadow标准用法drop-sh
  • java线程Thread和Runnable区别和联系 zx_code javajvmthread多线程Runnable
    我们都晓得java实现线程2种方式，一个是继承Thread，另一个是实现Runnable。 模拟窗口买票，第一例子继承thread，代码如下 package thread; public class ThreadTest { public static void main(String[] args) { Thread1 t1 = new Thread1(
  • 【转】JSON与XML的区别比较 丁_新 jsonxml
    1.定义介绍 (1).XML定义 扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。 XML是标
  • c++ 实现五种基础的排序算法 CrazyMizzz C++c算法
    #include<iostream> using namespace std; //辅助函数，交换两数之值 template<class T> void mySwap(T &x, T &y){ T temp = x; x = y; y = temp; } const int size = 10; //一、用直接插入排
  • 我的软件 麦田的设计者 我的软件音乐类娱乐放松
         这是我写的一款app软件，耗时三个月，是一个根据央视节目开门大吉改变的，提供音调，猜歌曲名。1、手机拥有者在android手机市场下载本APP，同意权限，安装到手机上。2、游客初次进入时会有引导页面提醒用户注册。（同时软件自动播放背景音乐）。3、用户登录到主页后，会有五个模块。a、点击不胫而走，用户得到开门大吉首页部分新闻，点击进入有新闻详情。b、
  • linux awk命令详解 被触发 linux awk
    awk是行处理器: 相比较屏幕处理的优点，在处理庞大文件时不会出现内存溢出或是处理缓慢的问题，通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理，然后输出 awk命令形式: awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file [-F|-f|-v]大参数，-F指定分隔符，-f调用脚本，-v定义变量 var=val
  • 各种语言比较 _wy_ 编程语言
                        Java Ruby PHP 擅长领域                  
  • oracle 中数据类型为clob的编辑 知了ing oracle clob
    public void updateKpiStatus(String kpiStatus,String taskId){ Connection dbc=null; Statement stmt=null; PreparedStatement ps=null; try { dbc = new DBConn().getNewConnection(); //stmt = db
  • 分布式服务框架 Zookeeper -- 管理分布式环境中的数据 矮蛋蛋 zookeeper
    原文地址： http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ 安装和配置详解 本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础，最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取，Zookeeper 的安装非常简单，下面将从单机模式和集群模式两
  • tomcat数据源 alafqq tomcat
    数据库 JNDI(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。 没有使用JNDI时我用要这样连接数据库： 03.  Class.forName("com.mysql.jdbc.Driver");  04.  conn
  • 遍历的方法 百合不是茶 遍历
                                                          遍历 在java的泛
  • linux查看硬件信息的命令 bijian1013 linux
    linux查看硬件信息的命令 一.查看CPU： cat /proc/cpuinfo   二.查看内存： free   三.查看硬盘： df   linux下查看硬件信息 1、lspci 列出所有PCI 设备； lspci - list all PCI devices:列出机器中的PCI设备（声卡、显卡、Modem、网卡、USB、主板集成设备也能
  • java常见的ClassNotFoundException bijian1013 java
    1.java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory   添加包common-logging.jar2.java.lang.ClassNotFoundException: javax.transaction.Synchronization    
  • 【Gson五】日期对象的序列化和反序列化 bit1129 反序列化
    对日期类型的数据进行序列化和反序列化时，需要考虑如下问题：   1. 序列化时，Date对象序列化的字符串日期格式如何 2. 反序列化时，把日期字符串序列化为Date对象，也需要考虑日期格式问题 3. Date A -> str -> Date B,A和B对象是否equals   默认序列化和反序列化     import com
  • 【Spark八十六】Spark Streaming之DStream vs. InputDStream bit1129 Stream
      1. DStream的类说明文档：   /** * A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous * sequence of RDDs (of the same type) representing a continuous st
  • 通过nginx获取header信息 ronin47 nginx header
    1. 提取整个的Cookies内容到一个变量，然后可以在需要时引用，比如记录到日志里面， if ( $http_cookie ~* "(.*)$") {         set $all_cookie $1; }     变量$all_cookie就获得了cookie的值，可以用于运算了
  • java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 bylijinnan java
    参考了网上的http://blog.csdn.net/peasking_dd/article/details/6342984 写了个java版的： public class Print_1_To_NDigit { /** * Q65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 * 1.使用字符串
  • Netty源码学习-ReplayingDecoder bylijinnan javanetty
    ReplayingDecoder是FrameDecoder的子类，不熟悉FrameDecoder的，可以先看看 http://bylijinnan.iteye.com/blog/1982618 API说，ReplayingDecoder简化了操作，比如： FrameDecoder在decode时，需要判断数据是否接收完全： public class IntegerH
  • js特殊字符过滤 cngolon js特殊字符js特殊字符过滤
    1.js中用正则表达式 过滤特殊字符, 校验所有输入域是否含有特殊符号function stripscript(s) {    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&mdash;—|{}【】‘；：”“'。，、？]"
  • hibernate使用sql查询 ctrain Hibernate
    import java.util.Iterator; import java.util.List; import java.util.Map; import org.hibernate.Hibernate; import org.hibernate.SQLQuery; import org.hibernate.Session; import org.hibernate.Transa
  • linux shell脚本中切换用户执行命令方法 daizj linuxshell命令切换用户
    经常在写shell脚本时，会碰到要以另外一个用户来执行相关命令，其方法简单记下：   1、执行单个命令：su - user -c "command" 如：下面命令是以test用户在/data目录下创建test123目录 [root@slave19 /data]# su - test -c "mkdir /data/test123" 
  • 好的代码里只要一个 return 语句 dcj3sjt126com return
    别再这样写了：public boolean foo() {    if (true) {         return true;     } else {          return false;    
  • Android动画效果学习 dcj3sjt126com android
    1、透明动画效果 方法一：代码实现 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, fals
  • linux复习笔记之bash shell (4)管道命令 eksliang linux管道命令汇总linux管道命令linux常用管道命令
    转载请出自出处： http://eksliang.iteye.com/blog/2105461     bash命令执行的完毕以后，通常这个命令都会有返回结果，怎么对这个返回的结果做一些操作呢？那就得用管道命令‘|’。     上面那段话，简单说了下管道命令的作用，那什么事管道命令呢？     答：非常的经典的一句话，记住了，何为管
  • Android系统中自定义按键的短按、双击、长按事件 gqdy365 android
    在项目中碰到这样的问题： 由于系统中的按键在底层做了重新定义或者新增了按键，此时需要在APP层对按键事件（keyevent）做分解处理，模拟Android系统做法，把keyevent分解成： 1、单击事件：就是普通key的单击； 2、双击事件：500ms内同一按键单击两次； 3、长按事件：同一按键长按超过1000ms（系统中长按事件为500ms）； 4、组合按键：两个以上按键同时按住；
  • asp.net获取站点根目录下子目录的名称 hvt .netC#asp.nethovertreeWeb Forms
    使用Visual Studio建立一个.aspx文件(Web Forms)，例如hovertree.aspx,在页面上加入一个ListBox代码如下： <asp:ListBox runat="server" ID="lbKeleyiFolder" />   那么在页面上显示根目录子文件夹的代码如下： string[] m_sub
  • Eclipse程序员要掌握的常用快捷键 justjavac javaeclipse快捷键ide
      判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。   曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  写道 程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可
  • c++编程随记 lx.asymmetric C++笔记
     为了字体更好看，改变了格式……   &&运算符：   #include<iostream> using namespace std; int main(){      int a=-1,b=4,k;      k=(++a<0)&&!(b--
  • linux标准IO缓冲机制研究 音频数据 linux
    一、什么是缓存I/O(Buffered I/O)缓存I/O又被称作标准I/O,大多数文件系统默认I/O操作都是缓存I/O。在Linux的缓存I/O机制中，操作系统会将I/O的数据缓存在文件系统的页缓存(page cache)中，也就是说，数据会先被拷贝到操作系统内核的缓冲区中，然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间。1.缓存I/O有以下优点:A.缓存I/O使用了操作系统内核缓冲区，
  • 随想 生活 暗黑小菠萝 生活
    其实账户之前就申请了，但是决定要自己更新一些东西看也是最近。从毕业到现在已经一年了。没有进步是假的，但是有多大的进步可能只有我自己知道。   毕业的时候班里12个女生，真正最后做到软件开发的只要两个包括我，PS：我不是说测试不好。当时因为考研完全放弃找工作，考研失败，我想这只是我的借口。那个时候才想到为什么大学的时候不能好好的学习技术，增强自己的实战能力，以至于后来找工作比较费劲。我
  • 我认为POJO是一个错误的概念 windshome javaPOJO编程J2EE设计
                  这篇内容其实没有经过太多的深思熟虑，只是个人一时的感觉。从个人风格上来讲，我倾向简单质朴的设计开发理念；从方法论上，我更加倾向自顶向下的设计；从做事情的目标上来看，我追求质量优先，更愿意使用较为保守和稳妥的理念和方法。    &
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他