少莫千华
少莫千华

【CSS】旋转中的视差效果

效果

index.html

DOCTYPE html>
<html lang="en">
  <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"/>
    <title> Document title>
    <link type="text/css" rel="styleSheet" href="index.css" />
  head>
  <body>
    <div class="container">
      
      <div class="item"><img src="./1.jpg" alt="">div>
      <div class="item"><img src="./2.jpg" alt="">div>
      <div class="item"><img src="./3.jpg" alt="">div>
      <div class="item"><img src="./4.jpg" alt="">div>
      <div class="item"><img src="./5.jpg" alt="">div>
    div>
  body>
html>

index.css

.container{
  width: 500px;
  height: 500px;
  margin: 0 auto;
  margin-top: 120px;
  /*设置item元素布局为网关布局*/
  display: grid;
  /*设置container元素的3列，宽度为1fr--r*/
  grid-template-columns: repeat(3,1fr);
  /*设置container元素的3行，高度为1fr--r*/
  grid-template-rows: repeat(3,1fr);
  /*设置container元素的网格布局模版--r*/
  grid-template: 
    'A A B'
    'C D B'
    'C E E';
  /*设置container元素的网格间距--r*/
  grid-gap: 5px;
  /*设置container元素的变量--r*/
  --r: 360deg;
  /*rotation: 给img元素设置旋转动画,其中变量为--r= -360deg 逆时针旋转*/
  /*10s: 动画总耗时10s*/
  /*linear: 动画使用线性过度*/
  /*infinite: 循环执行动画*/
  animation: rotation 10s linear infinite;
}

/* 设置第1个item item 在grid-template对应的区域A*/
.item:nth-child(1){
  grid-area: A;
}

/* 设置第2个item item 在grid-template对应的区域B*/
.item:nth-child(2){
  grid-area: B;
}

/* 设置第3个item item 在grid-template对应的区域C*/
.item:nth-child(3){
  grid-area: C;
}

/* 设置第4个item item 在grid-template对应的区域D*/
.item:nth-child(4){
  grid-area: D;
}

/* 设置第5个item item 在grid-template对应的区域E*/
.item:nth-child(5){
  grid-area: E;
}

.item {
  /*设置item元素布局为弹性布局*/
  display: flex;
  /*设置item元素水平居中*/
  justify-content: center;
  /*设置item元素垂直居中*/
  align-items: center;
  overflow: hidden;
  /*设置item元素边框*/
  /*2px: 宽度2px*/
  /*solid: 线型为实线*/
  border:  2px solid;
}

.item img{
  /*设置img元素的变量--r*/
  --r: -360deg;
  /*设置img元素旋转的图像尺寸，解决旋转过程中的白边问题*/
  width: 260%;
  height: 260%;
  /*保持图像的宽高比*/
  object-fit: cover;
  /*rotation: 给img元素设置旋转动画,其中变量为--r= -360deg 逆时针旋转*/
  /*10s: 动画总耗时10s*/
  /*linear: 动画使用线性过度*/
  /*infinite: 循环执行动画*/
  animation: rotation 10s linear infinite;
}

/*旋转动画 旋转 变量--r*/
@keyframes rotation {
  to {
    transform: rotate(var(--r));
  }
}

知识点

1. grid-template 与 grid-area 搭配使用快速布局

.grid-container {
  display: grid;
  grid-template:
    "header header" auto
    "sidebar main" 1fr
    "footer footer" auto; /* 定义网格的结构 */
  grid-gap: 10px; /* 设置行和列之间的间隔为10px */
  height: 500px;
}

.item {
  background-color: #ccc;
  padding: 20px;
}

.item1 {
  grid-area: header; /* 放置在名为 "header" 的区域 */
}

.item2 {
  grid-area: sidebar; /* 放置在名为 "sidebar" 的区域 */
}

.item3 {
  grid-area: main; /* 放置在名为 "main" 的区域 */
}

.item4 {
  grid-area: footer; /* 放置在名为 "footer" 的区域 */
}

在这个示例中，我们使用 grid-template 属性来定义网格的结构。通过使用字符串，我们指定了网格的行和列，以及它们的名称。每一行和列都可以具有不同的大小和单位。

通过给每个网格项设置相应的 grid-area 值，我们将它们放置在指定的区域中。这里的区域名称对应于 grid-template 中定义的行和列的名称。

这个示例中的网格布局结构如下：

header header
sidebar main
footer footer

通过以上示例，您可以看到如何使用 grid-template 和 grid-area 属性创建一个具有命名区域的网格布局，并将网格项放置在指定的位置,相同名称将会合并成一个区域。

2. 巧用变量和反向旋转

在源代码动画中使用变量--r，是的顺时针旋转父元素.container和逆时针旋转子元素.item img共用一个rotation 动画。
这里子元素采用与父元素的反向旋转以抵消整体旋转导致子元素内部图片旋转，改善视觉体验。

.container{
  --r: 360deg;
  animation: rotation 10s linear infinite;
}

.item img{
  --r: 360deg;
  animation: rotation 10s linear infinite;
}

@keyframes rotation {
  to {
    transform: rotate(var(--r));
  }
}

资源

1.jpg

【CSS】旋转中的视差效果_第1张图片

2.jpg

【CSS】旋转中的视差效果_第2张图片

3.jpg

【CSS】旋转中的视差效果_第3张图片

4.jpg

【CSS】旋转中的视差效果_第4张图片

5.jpg

【CSS】旋转中的视差效果_第5张图片

你可能感兴趣的:(语言-HTML,css,css3,前端,旋转,变量,网关布局模版)

  • js获取文件夹中的所有文件和子文件夹 枫叶&情缘 JavaScriptjq前端javascript前端开发语言
    获取文件夹中的所有文件和子文件夹打开文件夹/***获取按钮元素并添加点击事件处理函数*/varbtn=document.querySelector('button');btn.onclick=asyncfunction(){//显示文件选择器constdirectoryHandle=awaitwindow.showDirectoryPicker();//处理目录awaitproecssHandle
  • 代码制作数字流星雨_C语言实现流星雨 初酿乖乖 代码制作数字流星雨
    #include/***********************宏定义**********************/#definePI3.1415926//圆周率#defineWIDTH200//屏幕宽度，流星出生区域#defineHEIGHT150//屏幕高度，流星出生区域#defineV20//流星速度，单次移动的像素数#defineLENGTH20//流星字符数#defineDELAY30/
  • 编程语言发展史之：逻辑编程语言 AI天才研究院 AI大模型企业级应用开发实战大数据人工智能语言模型JavaPython架构设计
    作者：禅与计算机程序设计艺术1.简介逻辑编程（logicalprogramming）是一种编程范式，旨在以一种逻辑的方式来表示程序，而不是像命令式编程一样直接面向计算模型或执行指令。逻辑编程倾向于通过构造计算机所理解的数学逻辑模型来解决问题。它特别适用于那些对数据结构和算法模型十分敏感的问题。与函数式编程相比，逻辑编程更加强调数据、关系和抽象等抽象概念之间的对应关系，因此更容易设计出正确而优雅的程
  • RabbitMQ消息发送与接收 VksgShapes rabbitmqruby分布式
    RabbitMQ是一个功能强大的开源消息代理，用于在应用程序之间传递消息。它实现了AMQP（高级消息队列协议），提供了可靠的消息传递机制，支持多种消息模式和灵活的消息路由。在本篇文章中，我们将详细介绍如何在应用程序中使用RabbitMQ进行消息的发送和接收。我们将使用Python作为示例编程语言，并使用Pika作为RabbitMQ的Python客户端。安装依赖库首先，我们需要安装Pika库。可以使
  • Python程序设计 第6章：函数和函数式编程 若北辰 Python程序设计python开发语言
    Python程序设计Python是全球范围内最受欢迎的编程语言之一，学好Python将对个人职业生涯产生很大的助力，Python在机器学习、深度学习、数据挖掘等领域应用极为广泛。在数据科学家/数据分析师、人工智能工程师、网络安全工程师、软件工程师/全栈工程师、自动化测试工程师等岗位，年入50万，很普遍，学好Python，高薪就业不是问题，因此推出Python程序设计系列文章：Python程序设计第
  • 【Python】函数 Guiat Pythonpython
    个人主页：Guiat归属专栏：Python文章目录1.函数的定义1.1基本定义方式1.2函数名和参数2.函数的调用2.1基本调用方式2.2参数传递3.函数的返回值3.1`return`语句3.2返回多个值4.函数的作用域4.1局部变量4.2全局变量5.匿名函数（Lambda函数）5.1定义和使用5.2应用场景6.递归函数6.1定义和原理6.2优缺点正文1.函数的定义1.1基本定义方式在Python
  • python函数的定义（含扩展） GodGump linux下python编程
    python函数的定义deffunc(arg1,arg2,arg3):函数体returnarg4,arg5,arg6补充：如果想给某个参数一个默认值，不用每次都输入的话，可以采用以下方法（以参数arg2默认值设为233为例子）deffunc(arg1,arg2=233,arg3):函数体returnarg4,arg5,arg6还有一点是python支持在函数体内定义全局变量global在函数体内声
  • 【T2I】R&B: REGION AND BOUNDARY AWARE ZERO-SHOT GROUNDED TEXT-TO-IMAGE GENERATION Akttt T2I计算机视觉人工智能text2img深度学习
    CODE:2309https://github.com/StevenShaw1999/RnBABSTRACT近期的文本到图像（T2I）扩散模型在以文本提示作为输入生成高质量图像方面取得了显著进展。然而，这些模型无法传达布局指令所指定的合适空间构图。在这项工作中，我们探索了使用扩散模型进行零样本接地T2I生成，即无需训练辅助模块或微调扩散模型就能生成与输入布局信息相对应的图像。我们提出了一种区域与边
  • 纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查) 与鱼有约 前端vscodeide
    纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查)简介本项目为一个纯前端实现的本地文件管理器网页（index.html），可在Chrome/Edge浏览器中直接打开，具备类似VSCode的本地文件夹操作体验。无需后端，所有功能均在浏览器端实现。主要功能选择本地文件夹用户点击左上角文件夹按钮，授权后可浏览和操作本地文件夹内容。文件树展示以树形结构展示所选文件夹下的所有文件和子文件夹
  • 构建下一代云原生大模型多租户平台：架构设计与关键挑战 慌ZHANG 人工智能云原生后端云原生人工智能
    个人主页：慌ZHANG-CSDN博客期待您的关注一、引言：从单用户部署到多租户平台的转型趋势随着开源大语言模型（LLM）能力日益强大，企业部署与应用大模型已从“验证可行性”的早期阶段，逐步迈向“规模化服务”的中后期阶段。在这一背景下，“多租户”成为企业级AI平台建设的核心议题之一：SaaS平台希望一个模型服务多个客户；大企业希望多个部门共享模型资源但相互隔离；教育、医疗等敏感行业需要更精细的数据与
  • WHAT - TTF 和 OTF 字体格式 @PHARAOH 前端javascript字体
    文章目录基础定义核心区别轮廓技术（绘制字体的“骨架”）功能扩展兼容性文件大小如何选择？一个小贴士更多关于前端开发中字体介绍请阅读：WHAT-前端开发中的字体基础定义格式全称简介TTFTrueTypeFont由苹果和微软在1980年代联合开发的字体格式。OTFOpenTypeFontAdobe和微软开发的更现代的字体格式，基于TTF或PostScript。核心区别轮廓技术（绘制字体的“骨架”）TTF
  • Vue3 - 详解播放m3u8视频流+HLS拉流推流完整方案，vue3如何播放m3u8格式文件实时视频播放教程（流媒体播放、直播视频流、实时摄像头监控视频流对接、后端服务器切片分片传输视频流边下边播） 王二红 +Vue3开发问题汇总vue3m3u8hlsvue3播放m3u8视频流教程vue播放m3u8文件vue3直播视频流播放摄像头实时监控画面视频流
    前言如果您需要Vue2版本，请访问这篇文章。在vue3（PC端+移动端H5）项目开发中，实现m3u8+hls视频流播放、实时流媒体播放高性能无延迟方案及源码，vue3播放3mu8文件/直播视频流，实时流媒体播放需求、做直播实时传输播放、摄像头监控画面视频流、服务器后端视频切片分段返给前端+边下边播等需求，解决前端网页播放视频流卡顿加载慢、无法载入黑屏、播放不流畅、CORS跨域、安卓苹果浏览器兼容等
  • [Python 基础课程]字符串 叶 落 Python基础课程pythonpython基础python入门
    字符串字符串几乎是所有编程语言中最常用的数据类型。在Python中，我们可以使用引号’或"来创建字符串。greeting='Hello,world!'name="Python"empty_string=''number_string="12345"mixed_string="Hello123!"多行字符串如果想让字符串在代码中展示更加清晰，比如展示出json的结构或json样式，可以使用多行字符串
  • 《机器学习数学基础》补充资料：什么是随机变量 CS创新实验室 机器学习数学基础机器学习人工智能数学概率
    卓永鸿提供本文介绍什么是随机变量及为什么要发展此种概念。我们先来看这个问题：一个边长为aaa的正三角形，CCC为其外接圆，外接圆半径为RRR。若在圆内随机作一弦，则弦长lll大于aaa的概率为何？法1：随机半径法先拉出一条圆半径，然后随机在半径上取一点，再画出通过此点并垂直半径的弦。易知当弦心距小于R/2R/2R/2时，弦长lll大于aaa，故概率为1/21/21/2。法2：随机端点法在圆周上随机
  • 38、Seabor的联合图和成对图的绘制【用Python进行AI数据分析进阶教程】 理工男大辉郎 python人工智能数据分析
    用Python进行AI数据分析进阶教程38：Seabor的联合图和成对图的绘制关键词：Seaborn、联合图（JointPlot）、成对图（PairPlot）、数据类型、变量关系摘要：本文介绍了Seaborn库中的联合图（JointPlot）和成对图（PairPlot）的绘制方法。联合图用于展示两个变量之间的关系及各自分布，支持散点图、直方图、核密度估计图等多种类型，适用于连续型变量分析，可自定义
  • 网关只负责转发，为什么门思的LoRa设备还能查历史数据？ 门思科技 网关网络物联网人工智能服务器开源
    在物联网系统中，LoRaWAN网关常被认为只是一个“传送工”，将设备发来的数据直接送往网络服务器，不做处理，也不做存储。但如今有用户发现，一些网关竟然可以“记住”设备历史数据，还能提供查询接口。这到底是怎么做到的？这是否意味着LoRaWAN网关正在“进化”？网关本不负责存数据，这事儿得从LoRaWAN架构说起在标准的LoRaWAN网络架构中，网关并不处理数据内容。它只负责接收无线信号，然后通过以太
  • 【技术科普】LoRaWAN 网络怎么搭？推荐试试 ThinkLink 免费版服务器 门思科技 LoRaWAN网络服务器网络服务器运维
    在LoRaWAN项目落地过程中，除了终端设备和网关，很多人最容易忽视的是网络服务器（NetworkServer，简称NS）。然而，它却是系统能否长期稳定运行的关键之一。本文将从LoRaWAN网络结构出发，科普网络服务器的核心职责，并介绍一款适合开发者、技术团队免费试用的轻量化网络服务器——ThinkLink免费版，助力快速构建自己的LoRaWAN网络。一、LoRaWAN网络架构中，NS扮演什么角色
  • Github 2024-11-01 开源项目月报 Top19 老孙正经胡说 github开源Github趋势分析开源项目PythonGolang
    根据GithubTrendings的统计，本月(2024-11-01统计)共有19个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目9TypeScript项目3JavaScript项目3Svelte项目1JupyterNotebook项目1Ruby项目1HTML项目1Rust项目1Java项目1C++项目1Go项目1Python中的算法实现集合创建周期：2831天
  • 江协科技 OLED库 OLED_Print( )函数自动换行 Crkylin 科技
    voidOLED_Printf(int16_tX,int16_tY,uint8_tFontSize,char*format,...){charString[256];//定义字符数组va_listarg;//定义可变参数列表数据类型的变量argva_start(arg,format);//从format开始，接收参数列表到arg变量vsprintf(String,format,arg);//使用v
  • StackPanel和Grid lph1972 c#
    StackPanel只会在它的排列方向上填充内容，不会在另一方向上自动拉伸子元素，这就是它的核心行为。Grid是任意方向填充例所以常用stackpanel嵌套Grid横向stackpanel宽度自动延伸Width="{x:Staticsys:Double.NaN}"Height="500"填控件剩下需要再布局的部分嵌套GridHorizontalAlignment不是StackPanel本身的布局
  • GitHub已破4.5w star，从“零样本”到“少样本”TTS，5秒克隆声音，冲击传统录音棚！ 小华同学ai github
    嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。免费订阅，与10万+技术人共享升级秘籍！你是否为录音成本高、声音不灵活、又想为多语言音频内容节省预算却苦不堪言？GPT‑SoVITS应运而生，它让“5秒语音克隆”“1分钟微调自定义说话人”“多语言切换”变得轻而易举。让无论是主播、配音师，还是科技爱好者，都能轻松拥有定制化声音输出。痛点场景配
  • SWING HACKS电子书及范例代码 CY20080125 swingswinghacks
    SWINGHACKS电子书及范例代码购书地址:http://www.oreilly.com.cn/index.php?func=book&isbn=978-7-302-14334-5介绍Java编程语言一般是和重要的企业级应用程序联系在一起的，运行它们的服务器可能就位于蒙大拿的某个冰冷的机房里。不过，是桌面应用催生了Java，未来也必将是桌面应用让Java能更加光彩夺目。通过AWT和现在的Swin
  • 用systemd管理GreatSQL服务详解 数据库mysql
    用systemd管理GreatSQL服务详解1.GreatSQL服务文件官网greatsql.service文件[Unit]Description=GreatSQLServerDocumentation=man:mysqld(8)Documentation=http://dev.mysql.com/doc/refman/en/using-systemd.htmlAfter=network.targ
  • JavaScript-异步编程 斜杠青年C javascript开发语言前端
    一、日常前端开发使用的异步编程方法回调函数事件监听PromiseGeneratorasync/await二、同步编程和异步编程的区别1、什么是同步同步是执行某段代码时，在该代码没有得到返回结果前，其他代码是无法执行的，但是一旦拿到返回值，就可以执行其他的代码2、什么是异步异步就是当某段代码执行异步过程调用发出后，这段代码不会立刻得到返回结果，而是在异步调用发出之后，一般通过回调函数处理这个调用之后
  • LeetCode 解题解决方案 —— 使用 Rust 实现 凌朦慧Richard
    LeetCode解题解决方案——使用Rust实现leetcode-rustmyleetcodesolutionsinrust项目地址:https://gitcode.com/gh_mirrors/le/leetcode-rust1.项目介绍该项目是用户aylei在GitHub上创建的一个仓库，名为leetcode-rust，它包含了用Rust语言编写的LeetCode题目的解题方案。这个仓库的目的
  • 【大模型面试必备】130道大模型问题深度解析，附详细答案，非常详细收藏这一篇就够了！ 大模型学习 大模型架构数据库langchain人工智能面试
    Attention1、讲讲对Attention的理解？Attention机制是一种在处理时序相关问题的时候常用的技术，*主要用于处理序列数据。*核心思想：在处理序列数据时，网络应该更关注输入中的重要部分，而忽略不重要的部分，它通过学习不同部分的权重，将输入的序列中的重要部分显式地加权，从而使得模型可以更好地关注与输出有关的信息。在序列建模任务中，比如机器翻译、文本摘要、语言理解等，输入序列的不同部
  • Nginx 运维实战与 HTML 静态网页开发全攻略
    一、技术背景：静态站点的黄金时代1.静态网页的复兴浪潮性能优势：对比动态站点，静态资源响应速度提升60%+，首屏加载时间平均缩短1.2秒（基于WebPageTest实测数据）技术演进：Jamstack架构普及（2024年市场占有率达37%），Hugo、Nuxt.js等静态站点生成器（SSG）推动企业级应用典型场景：企业官网（占比78%）、产品着陆页（转化率提升23%）、博客系统（WordPress
  • 字节工程师实战传授：用 Go 实现 AI 原生应用全流程 CSDN资讯 人工智能godeerfloweino
    作为一名Gopher，你是否也曾在深夜看着Python生态的繁荣而心生羡慕？当LangChain、LlamaIndex等框架层出不穷，我们不禁会想，渴望已久的、专为Go语言打造的顺滑AI开发体验，究竟在哪里？我们常常看到一个个惊艳的AI应用，想用自己最熟悉的Go来复刻，却发现从Agent的定义到复杂的任务编排，每一步都充满着挑战，最终产出的“胶水代码”也难以维护和扩展，距离一个优雅的生产级应用相去
  • 前端计算机视觉：使用 OpenCV.js 在浏览器中实现图像处理 亿只小灿灿 前端OpenCV前端计算机视觉opencv
    一、OpenCV.js简介与环境搭建OpenCV（OpenSourceComputerVisionLibrary）是一个强大的计算机视觉库，广泛应用于图像和视频处理领域。传统上，OpenCV主要在后端使用Python或C++等语言。但随着WebAssembly(Wasm)技术的发展，OpenCV也有了JavaScript版本——OpenCV.js，它可以直接在浏览器中高效运行，为前端开发者提供了前
  • Docker进阶命令与参数——AI教你学Docker LuckyLay AI教你学Dockerdockereureka容器
    2.1进阶命令与参数Docker在日常运维和开发中，除了常用的run、ps、logs等基础命令，还提供了一些功能强大、实用性很高的进阶命令。这些命令可用于容器信息洞察、变更管理、文件操作与资源动态调整等场景。一、dockerinspect作用深入查看容器、镜像、网络、卷等对象的详细元数据（JSON格式）。包含环境变量、挂载点、网络配置、进程信息、资源限制等丰富信息。用法dockerinspect常
  • 怎么样才能成为专业的程序员？ cocos2d-x小菜 编程PHP
      如何要想成为一名专业的程序员？仅仅会写代码是不够的。从团队合作去解决问题到版本控制，你还得具备其他关键技能的工具包。当我们询问相关的专业开发人员，那些必备的关键技能都是什么的时候，下面是我们了解到的情况。   关于如何学习代码，各种声音很多，然后很多人就被误导为成为专业开发人员懂得一门编程语言就够了？！呵呵，就像其他工作一样，光会一个技能那是远远不够的。如果你想要成为
  • java web开发 高并发处理 BreakingBad javaWeb并发开发处理高
    java处理高并发高负载类网站中数据库的设计方法（java教程,java处理大量数据，java高负载数据） 一：高并发高负载类网站关注点之数据库 没错,首先是数据库,这是大多数应用所面临的首个SPOF。尤其是Web2.0的应用，数据库的响应是首先要解决的。 一般来说MySQL是最常用的，可能最初是一个mysql主机，当数据增加到100万以上，那么，MySQL的效能急剧下降。常用的优化措施是M-S（
  • mysql批量更新 ekian mysql
    mysql更新优化： 一版的更新的话都是采用update set的方式，但是如果需要批量更新的话，只能for循环的执行更新。或者采用executeBatch的方式，执行更新。无论哪种方式，性能都不见得多好。 三千多条的更新，需要3分多钟。 查询了批量更新的优化，有说replace into的方式，即： replace into tableName(id,status) values
  • 微软BI（3） 18289753290 微软BI SSIS
    1) Q：该列违反了完整性约束错误；已获得 OLE DB 记录。源:“Microsoft SQL Server Native Client 11.0” Hresult: 0x80004005 说明:“不能将值 NULL 插入列 'FZCHID'，表 'JRB_EnterpriseCredit.dbo.QYFZCH'；列不允许有 Null 值。INSERT 失败。”。 A：一般这类问题的存在是
  • Java中的List g21121 java
            List是一个有序的 collection（也称为序列）。此接口的用户可以对列表中每个元素的插入位置进行精确地控制。用户可以根据元素的整数索引（在列表中的位置）访问元素，并搜索列表中的元素。         与 set 不同，列表通常允许重复
  • 读书笔记 永夜-极光 读书笔记
       1.  K是一家加工厂,需要采购原材料,有A,B,C,D 4家供应商,其中A给出的价格最低,性价比最高,那么假如你是这家企业的采购经理,你会如何决策?          传统决策: A:100%订单  B,C,D:0%     &nbs
  • centos 安装 Codeblocks 随便小屋 codeblocks
    1.安装gcc,需要c和c++两部分,默认安装下,CentOS不安装编译器的,在终端输入以下命令即可yum install gccyum install gcc-c++   2.安装gtk2-devel,因为默认已经安装了正式产品需要的支持库,但是没有安装开发所需要的文档.yum install gtk2* 3. 安装wxGTK    yum search w
  • 23种设计模式的形象比喻 aijuans 设计模式
    1、ABSTRACT FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory 　　工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：
  • 开发管理 CheckLists aoyouzi 开发管理 CheckLists
    开发管理 CheckLists(23) -使项目组度过完整的生命周期 开发管理 CheckLists(22) -组织项目资源 开发管理 CheckLists(21) -控制项目的范围开发管理 CheckLists(20) -项目利益相关者责任开发管理 CheckLists(19) -选择合适的团队成员开发管理 CheckLists(18) -敏捷开发 Scrum Master 工作开发管理 C
  • js实现切换 百合不是茶 JavaScript栏目切换
    js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用思路: 1,先将要显示的设置为display:bisible 否则设为none 2,设置栏目的id ,js获取栏目的id,如果id为Null就设置为显示 3,判断js获取的id名字;再设置是否显示   代码实现:   html代码: <di
  • 周鸿祎在360新员工入职培训上的讲话 bijian1013 感悟项目管理人生职场
            这篇文章也是最近偶尔看到的，考虑到原博客发布者可能将其删除等原因，也更方便个人查找，特将原文拷贝再发布的。“学东西是为自己的，不要整天以混的姿态来跟公司博弈，就算是混，我觉得你要是能在混的时间里，收获一些别的有利于人生发展的东西，也是不错的，看你怎么把握了”，看了之后，对这句话记忆犹新。  &
  • 前端Web开发的页面效果 Bill_chen htmlWebMicrosoft
    1.IE6下png图片的透明显示： <img src="图片地址" border="0" style="Filter.Alpha(Opacity)=数值(100),style=数值(3)"/> 或在<head></head>间加一段JS代码让透明png图片正常显示。 2.<li>标
  • 【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC) bit1129 垃圾回收
      CMS概述 并发标记清理垃圾回收(Concurrent Mark and Sweep GC）算法的主要目标是在GC过程中，减少暂停用户线程的次数以及在不得不暂停用户线程的请夸功能，尽可能短的暂停用户线程的时间。这对于交互式应用，比如web应用来说，是非常重要的。   CMS垃圾回收针对新生代和老年代采用不同的策略。相比同吞吐量垃圾回收，它要复杂的多。吞吐量垃圾回收在执
  • Struts2技术总结 白糖_ struts2
      必备jar文件 早在struts2.0.*的时候，struts2的必备jar包需要如下几个： commons-logging-*.jar   Apache旗下commons项目的log日志包 freemarker-*.jar          
  • Jquery easyui layout应用注意事项 bozch jquery浏览器easyuilayout
    在jquery easyui中提供了easyui-layout布局，他的布局比较局限，类似java中GUI的border布局。下面对其使用注意事项作简要介绍：      如果在现有的工程中前台界面均应用了jquery easyui，那么在布局的时候最好应用jquery eaysui的layout布局，否则在表单页面（编辑、查看、添加等等）在不同的浏览器会出
  • java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ bylijinnan java
    public class CopySpecialLinkedList { /** * 题目：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ 拷贝pNext指针非常容易，所以题目的难点是如何拷贝pRand指针。 假设原来链表为A1 -> A2 ->... -> An，新拷贝
  • color Chen.H JavaScripthtmlcss
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">    <HTML>    <HEAD>&nbs
  • [信息与战争]移动通讯与网络 comsci 网络
          两个坚持:手机的电池必须可以取下来                光纤不能够入户,只能够到楼宇       建议大家找这本书看看:<&
  • oracle flashback query(闪回查询) daizj oracleflashback queryflashback table
    在Oracle 10g中，Flash back家族分为以下成员： Flashback Database Flashback Drop Flashback Table Flashback Query(分Flashback Query,Flashback Version Query，Flashback Transaction Query) 下面介绍一下Flashback Drop 和Flas
  • zeus持久层DAO单元测试 deng520159 单元测试
    zeus代码测试正紧张进行中,但由于工作比较忙,但速度比较慢.现在已经完成读写分离单元测试了,现在把几种情况单元测试的例子发出来,希望有人能进出意见,让它走下去. 本文是zeus的dao单元测试: 1.单元测试直接上代码   package com.dengliang.zeus.webdemo.test; import org.junit.Test; import o
  • C语言学习三printf函数和scanf函数学习 dcj3sjt126com cprintfscanflanguage
    printf函数 /* 2013年3月10日20:42:32 地点：北京潘家园 功能： 目的： 测试%x %X %#x %#X的用法 */ # include <stdio.h> int main(void) { printf("哈哈！\n"); // \n表示换行 int i = 10; printf
  • 那你为什么小时候不好好读书? dcj3sjt126com life
    dady, 我今天捡到了十块钱, 不过我还给那个人了 good girl! 那个人有没有和你讲thank you啊 没有啦....他拉我的耳朵我才把钱还给他的, 他哪里会和我讲thank you   爸爸, 如果地上有一张5块一张10块你拿哪一张呢.... 当然是拿十块的咯... 爸爸你很笨的, 你不会两张都拿   爸爸为什么上个月那个人来跟你讨钱, 你告诉他没
  • iptables开放端口 Fanyucai linuxiptables端口
    1，找到配置文件 vi /etc/sysconfig/iptables   2，添加端口开放，增加一行，开放18081端口 -A INPUT -m state --state NEW -m tcp -p tcp --dport 18081 -j ACCEPT   3，保存 ESC :wq!   4，重启服务 service iptables
  • Ehcache（05）——缓存的查询 234390216 排序ehcache统计query
    缓存的查询 目录 1.    使Cache可查询 1.1     基于Xml配置 1.2     基于代码的配置 2     指定可搜索的属性 2.1     可查询属性类型 2.2 &
  • 通过hashset找到数组中重复的元素 jackyrong hashset
      如何在hashset中快速找到重复的元素呢?方法很多，下面是其中一个办法： int[] array = {1,1,2,3,4,5,6,7,8,8}; Set<Integer> set = new HashSet<Integer>(); for(int i = 0
  • 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL lanrikey history
    后退时关闭当前页面 <script type="text/javascript"> jQuery(document).ready(function ($) {         if (window.history && window.history.pushState) {
  • 应用程序的通信成本 netkiller.github.com 虚拟机应用服务器陈景峰netkillerneo
    应用程序的通信成本 什么是通信 一个程序中两个以上功能相互传递信号或数据叫做通信。 什么是成本 这是是指时间成本与空间成本。 时间就是传递数据所花费的时间。空间是指传递过程耗费容量大小。 都有哪些通信方式 全局变量 线程间通信 共享内存 共享文件 管道 Socket 硬件（串口，USB） 等等 全局变量 全局变量是成本最低通信方法，通过设置
  • 一维数组与二维数组的声明与定义 恋洁e生 二维数组一维数组定义声明初始化
    /**  *  */ package test20111005; /**  * @author FlyingFire  * @date:2011-11-18 上午04:33:36  * @author ：代码整理  * @introduce :一维数组与二维数组的初始化  *summary：  */ public c
  • Spring Mybatis独立事务配置 toknowme mybatis
    在项目中有很多地方会使用到独立事务，下面以获取主键为例   （1）修改配置文件spring-mybatis.xml  <!-- 开启事务支持 -->  <tx:annotation-driven transaction-manager="transactionManager" />   &n
  • 更新Anadroid SDK Tooks之后，Eclipse提示No update were found xp9802 eclipse
    使用Android SDK Manager 更新了Anadroid SDK Tooks 之后， 打开eclipse提示 This Android SDK requires Android Developer Toolkit version 23.0.0 or above, 点击Check for Updates  检测一会后提示 No update were found 
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他