韩曙亮
韩曙亮

【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )

文章目录

  • 一、" 透视 " 概念简介
    • 1、" 透视 " 概念引入
    • 2、视距与成像关系
  • 二、CSS3 中 " 透视 " 属性设置
    • 1、" 透视 " 语法设置
    • 2、代码示例 - " 透视 " 语法设置
      • 添加了透视后的代码示例
      • 执行结果





一、" 透视 " 概念简介



1、" 透视 " 概念引入


在本博客中引入 3D 效果 透视视图 Perspective 概念 ;

3D 视图中 产生 3D 效果 , 最终要的是有透视效果 , 通俗的讲 " 透视 " 就是实现 " 近大远小 " 的效果 ;

透视 就是 将 3D 空间中的物体 投影显示到 2D 平面中 ;


透视视图 ( Perspective View ) : 近大远小 , 符合正常人眼观察 3D 世界的规律 ;

  • 近大 : 物体 距离 观察点 ( 视点 ) 比较近时 , 显示效果比较大 ;
  • 远小 : 物体 距离 观察点 ( 视点 ) 比较远时 , 显示效果比较小 ;

下图就是利用了 透视视图 原理 , 照像机离鸟很近 , 离人很远 ;
【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )_第1张图片


2、视距与成像关系


下图中 , 【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )_第2张图片 是 人的眼镜 , 【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )_第3张图片 是 3D 空间中的物体 , 【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )_第4张图片 是一个 2D 平面 , 透视是 将 中间的 3D 物体投射到该 2D 平面中 ;

  • 如果 中间的 3D 物体 向前移动 , 显示在 2D 平面中的投影会变大 ;
  • 如果 中间的 3D 物体 向后移动 , 显示在 2D 平面中的投影会变小 ;

【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )_第5张图片


视距 : 人的 眼睛 到 屏幕 中的距离 , 就是 视距 , 也就是 上图中的 d 距离 ;

  • 视距 越小 , 也就是 视点 与 2D 平面之间 近 , 2D 平面的成像越大 ;
  • 视距 越大 , 也就是 视点 与 2D 平面之间 远 , 2D 平面的成像越小 ;

视距示例 : 看电脑屏幕 , 如果距离比较近 , 则视距小 , 成像较大 , 如 VR 眼睛 , 可以成像很大 ;





二、CSS3 中 " 透视 " 属性设置



1、" 透视 " 语法设置


透视 属性 需要写在 被观察元素 的 父容器 上 ;

透视 属性 语法 :

perspective: d;

设置 透视 属性 值 是 像素 px , 设置的是 视距 , 也就是 视点 到 投影平面 的距离 ;

  • 视距越小 , 成像越大 ;
  • 视距越大 , 成像越小 ;

perspective 透视属性使用示例 :

        body {
            /* 透视 属性 需要写在 被观察元素 的  父容器 上
                视距越小 成像越大 
                如果想要网页中的元素看起来大一些 可以减小视距 */
            perspective: 500px;
        }

2、代码示例 - " 透视 " 语法设置


添加了透视后的代码示例


核心代码如下 : 需要为 div 设置透视效果 , 需要设置到 div 的父容器 body 上 ;

        body {
            /* 透视 属性 需要写在 被观察元素 的  父容器 上
                视距越小 成像越大 
                如果想要网页中的元素看起来大一些 可以减小视距 */
            perspective: 500px;
        }

添加了透视后的代码示例 :

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>3D 转换 - 平移title>
    <style>
        body {
            /* 透视 属性 需要写在 被观察元素 的  父容器 上
                视距越小 成像越大 
                如果想要网页中的元素看起来大一些 可以减小视距 */
            perspective: 500px;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 设置 3D 转换 */
            transform: translateX(100px) translateY(100px) translateZ(100px)
        }
    style>
head>

<body>
    <div>div>
body>

html>

执行结果

执行结果 :

【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )_第6张图片

参考上一篇博客 【CSS3】CSS3 3D 转换 ① ( CSS3 3D 转换简介 | 3D 物体与 2D 物体区别 | 3D 空间坐标系 | 常用的 3D 转换属性 | 3D 位移转换语法 | 代码示例 ) 中 , 没有设置透视的效果 , 显然 添加了透视后 , 3D 物体在 网页 中成像比较大 ;

【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )_第7张图片

你可能感兴趣的:(CSS,css3,3d,前端,透视,视距)

  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 每日一题——第八十三题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：将输入的整形数字输出,输出1990，输出"1990"#include#defineMAX_INPUT1024intmain(){intarrr_num[MAX_INPUT];intnum,i=0;printf("请输入一个数字：");scanf_s("%d",&num);while(num!=0){arrr_num[i++]=num%10;num/=10;}printf("\"");for(
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 【PG】常见数据库、表属性设置 江无羡 数据库
    PG的常见属性配置方法数据库复制、备份相关表的复制标识单表操作批量表操作链接数据库复制、备份相关表的复制标识单表操作通过ALTER语句单独更改一张表的复制标识。ALTERTABLE[tablename]REPLICAIDENTITYFULL;批量表操作通过代码块的方式，对某个schema中的所有表一起更新其复制标识。SELECTtablename,CASErelreplidentWHEN'd'TH
  • 每日一题——第八十八题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：输入一个9位的无符号整数，判断其是否有重复数字#include#include#includeintmain(){charnum_str[10];printf("请输入一个9位数的无符号数：");scanf_s("%9d",&num_str);if(strlen(num_str)!=9){printf("输入的不是一个9位无符号整数，请重新输入");}else{if(hasDuplicate
  • Linux MariaDB使用OpenSSL安装SSL证书 Meta39 MySQLOracleMariaDBLinuxWindowsssllinuxmariadb
    进入到证书存放目录，批量删除.pem证书警告：确保已经进入到证书存放目录find.-typef-iname\*.pem-delete查看是否安装OpenSSLopensslversion没有则安装yuminstallopensslopenssl-devel开启SSL编辑/etc/my.cnf文件（没有的话就创建，但是要注意，在/etc/my.cnf.d/server.cnf配置了datadir的，
  • 你可能遗漏的一些C#/.NET/.NET Core知识点 追逐时光者 C#.NETDotNetGuide编程指南c#.net.netcoremicrosoft
    前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D
  • (179)时序收敛---＞(29)时序收敛二九 FPGA系统设计指南针 FPGA系统设计(内训)fpga开发时序收敛
    1目录（a）FPGA简介（b）Verilog简介（c）时钟简介（d）时序收敛二九（e）结束1FPGA简介（a）FPGA（FieldProgrammableGateArray）是在PAL（可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电路数有限的缺点。（b）
  • (180)时序收敛---＞(30)时序收敛三十 FPGA系统设计指南针 FPGA系统设计(内训)fpga开发时序收敛
    1目录（a）FPGA简介（b）Verilog简介（c）时钟简介（d）时序收敛三十（e）结束1FPGA简介（a）FPGA（FieldProgrammableGateArray）是在PAL（可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电路数有限的缺点。（b）
  • (158)时序收敛---＞(08)时序收敛八 FPGA系统设计指南针 FPGA系统设计(内训)fpga开发时序收敛
    1目录（a）FPGA简介（b）Verilog简介（c）时钟简介（d）时序收敛八（e）结束1FPGA简介（a）FPGA（FieldProgrammableGateArray）是在PAL（可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电路数有限的缺点。（b）F
  • (159)时序收敛---＞(09)时序收敛九 FPGA系统设计指南针 FPGA系统设计(内训)fpga开发时序收敛
    1目录（a）FPGA简介（b）Verilog简介（c）时钟简介（d）时序收敛九（e）结束1FPGA简介（a）FPGA（FieldProgrammableGateArray）是在PAL（可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电路数有限的缺点。（b）F
  • (160)时序收敛---＞(10)时序收敛十 FPGA系统设计指南针 FPGA系统设计(内训)fpga开发时序收敛
    1目录（a）FPGA简介（b）Verilog简介（c）时钟简介（d）时序收敛十（e）结束1FPGA简介（a）FPGA（FieldProgrammableGateArray）是在PAL（可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电路数有限的缺点。（b）F
  • (153)时序收敛---＞(03)时序收敛三 FPGA系统设计指南针 FPGA系统设计(内训)fpga开发时序收敛
    1目录（a）FPGA简介（b）Verilog简介（c）时钟简介（d）时序收敛三（e）结束1FPGA简介（a）FPGA（FieldProgrammableGateArray）是在PAL（可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电路数有限的缺点。（b）F
  • (121)DAC接口---＞(006)基于FPGA实现DAC8811接口 FPGA系统设计指南针 FPGA接口开发(项目实战)fpga开发FPGAIC
    1目录（a）FPGA简介（b）IC简介（c）Verilog简介（d）基于FPGA实现DAC8811接口（e）结束1FPGA简介（a）FPGA（FieldProgrammableGateArray）是在PAL（可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电
  • FPGA复位专题---（3）上电复位？ FPGA系统设计指南针 FPGA系统设计(内训)fpga开发
    （3）上电复位？1目录（a）FPGA简介（b）Verilog简介（c）复位简介（d）上电复位？（e）结束1FPGA简介（a）FPGA（FieldProgrammableGateArray）是在PAL（可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电路数有限
  • (182)时序收敛---＞(32)时序收敛三二 FPGA系统设计指南针 FPGA系统设计(内训)fpga开发时序收敛
    1目录（a）FPGA简介（b）Verilog简介（c）时钟简介（d）时序收敛三二（e）结束1FPGA简介（a）FPGA（FieldProgrammableGateArray）是在PAL（可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电路数有限的缺点。（b）
  • 数幸福D10 3c807316efec
    王多妈妈幸福能力提升计划依靠皇上托举皇上做一个五半三平的小女人一：感知到的幸福和快乐1：点赞皇上①下班前皇上问我晚上吃饭准备怎么弄，我们买点菜回家做饭吧皇上问我想吃什么，我说多可以，皇上很用心的准备晚饭，一回到家皇上先回家做饭，我说后备箱还有我的行李，皇上说等一下我再下来拿好吗？语气特别好，眼神多是商量的，皇上现在总是有意识的考虑我的感受②吃完饭我们准备一起接女儿放学，皇上说碗他洗，我想着一起收拾
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • react-intl——react国际化使用方案 苹果酱0567 面试题汇总与解析java开发语言中间件springboot后端
    国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
  • 项目：事半功倍的法宝 小小效能
    行动的三大流程：记录、排程和执行，也讲了易效能的4D原则以及T-step标签法。这些流程和方法能够解决我们眼前的一地鸡毛，让我们有更多时间和精力去关注更为长远的事情，完成工作、生活和人生中重要的项目。项目管理能够让我们围绕结果去做事情，达成事半功倍的效果，也就是做更少的事情，但达成更好的效果。如果我们能够不断地达成一个又一个的项目，那么我们的人生无疑会像滚雪球一样，在长坡道上面不断积累。一、项目的
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 更改npm镜像源为淘宝镜像 骆小骆 基于node.js
    npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
  • 《转介绍方法论》学习笔记 小可乐的妈妈
    一、高效转介绍的流程：价值观---执行----方案一）转介绍发生的背景：1、对象：谁向谁转介绍？全员营销，人人参与。①员工的激励政策、客户的转介绍诱因制作客户画像：a信任；支付能力；意愿度；便利度（根据家长具备四个特征的个数分为四类）B性格分类C职业分类D年龄性别②执行：套路，策略，方法，流程2、诱因：为什么要转介绍？认同信任；多方共赢；传递美好；零风险承诺打动人心，超越期待。选择做教育，就是选择
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • github中多个平台共存 jackyrong github
    在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1） 设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
  • ip地址与整数的相互转换(javascript) alxw4616 JavaScript
    //IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
  • 读书笔记-jquey+数据库+css chengxuyuancsdn htmljqueryoracle
    1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
  • javaSE javaEE javaME == API下载 Array_06 java
    oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
  • shiro入门学习 cugfy javaWeb框架
    声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 首先配置我们的web.xml代码如下，固定格式，记死就成 <filter>         <filter-name>shiroFilter</filter-name> &nbs
  • Array添加删除方法 357029540 js
         刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除             Array.prototype.del = function(n){
  • navigation bar 更改颜色 张亚雄 IO
    今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。       翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下    
  • unicode转换成中文 adminjun unicode编码转换
      在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成 中文
  • 一站式 Java Web 框架 firefly aijuans Java Web
    Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 更新日志： 增加自定义系统错误页面功能
  • 设计模式——单例模式 ayaoxinchao 设计模式
    定义          Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”   分析          从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。   &nb
  • Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
    不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
  • JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11单元测试
            下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：    
  • [Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
    Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)：   #!/bin/bash #!!!Change the name!!! #The zookeepe
  • 【Spark八十】Spark RDD API二 bit1129 spark
    coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
  • Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
    在modules目录中只有httpd.exp，那些so文件呢？ 我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
  • Java基础-克隆 BrokenDreams java基础
            Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 克隆。         Java提供了java.lang.
  • 读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
  • HDR图像PS教程集锦&心得 cherishLC PS
    HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 软件有photomatix和nik hdr efex。 一、教程 叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 二、心得 1、去除阴影部分的
  • maven-3.3.3 mvn archetype 列表 crabdave ArcheType
    maven-3.3.3 mvn archetype 列表 可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml   [INFO] Scanning for projects... [INFO]                
  • linux shell 中文件编码查看及转换方法 daizj shell中文乱码vim文件编码
    一、查看文件编码。     在打开文件的时候输入:set fileencoding     即可显示文件编码格式。 二、文件编码转换     1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式       &
  • MySQL--binlog日志恢复数据 dcj3sjt126com binlog
    恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                  
  • 数据库中数据表数据迁移方法 dcj3sjt126com sql
    刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用   下面看看如何使用   语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍       有三张表a、b、c，现在需要从表b
  • Java反转字符串 dyy_gusi java反转字符串
           前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
  • UI设计中我们为什么需要设计动效 gcq511120594 UIlinux
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用
  • JBOSS服务部署端口冲突问题 HogwartsRow java应用服务器jbossserverEJB3
    服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。   1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml   2、./server/default/deploy/jbossweb.sar/server.xml   3、.
  • 第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdbreidstwemproxy
    目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
  • ZooKeeper原理及使用 liyonghui160com
               ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
  • 程序员解决问题的60个策略 pda158 框架工作单元测试
    根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的“else”条件 在应用到主程序之前知道如何在孤立的情况下使用   日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
  • Create the Google Play Account sillycat Google
    Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
  • JSP三大指令 vikingwei jsp
    JSP三大指令   一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%>   * pageEncoding和contentType：     > pageEncoding：它
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他