banchi6453
banchi6453

css3之3D 旋转立方体与哆啦A梦

主要记录两个css3 3D转换的示例

 

㈠哆啦A梦

三个哆啦A梦的图片，分别让其围绕X轴，Y轴，Z轴旋转60度，鼠标放上开始发生变化。

具体代码如下图所示：

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>3d变换title>
 6     <style type="text/css">
 7         #stage{
        
 8             width: 910px;
 9             margin:100px auto;
10             perspective:100px;
11         }
12         .box{
        
13             width:300px;
14             height: 327px;
15             float: left;
16             transition:linear 1s;
17             transition-style:preserve-d;
18         }
19         img{
        
20             width:300px;
21             height: 327px;
22         }
23         .x:hover{
        
24             transform:rotateX(60deg);
25         }
26         .y:hover{
        
27             transform:rotateY(60deg);
28         }
29         .z:hover{
        
30             transform:rotateZ(60deg);
31         }
32     style>
33 head>
34 <body>
35     <div id="stage">
36         <div class="box x">
37             <img src="图片/A.jpg"/>
38         div>
39         <div class="box y">
40             <img src="图片/A.jpg"/>
41         div>
42         <div>
43         <div class="box z">
44                 <img src="图片/A.jpg"/>
45         div>
46     div>
47 body>
48 html>

 

效果如下所示：

⑴鼠标放在第一个图片效果如下：

 

css3之3D 旋转立方体与哆啦A梦_第1张图片

 

⑵鼠标放在第二个图片效果如下：

css3之3D 旋转立方体与哆啦A梦_第2张图片

⑶鼠标放在第三个图片效果如下：

css3之3D 旋转立方体与哆啦A梦_第3张图片

 

㈡纯HTML+CSS制作的旋转的立方体

一个名为“坚持就是胜利”的旋转立方体，代码如下;

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>旋转立方体title>
 8     <style>
 9     *{
        
10         margin:0;
11         padding:0;
12     }
13     body{
        
14         background: #222;
15     }
16     div.wrap{
        
17         width:200px;
18         perspective: 1000px; 
19         position: absolute;
20         top:50%;
21         left:50%;
22         transform:translateX(-50%) translateY(-50%);
23     }
24     .cube{
        
25         width:200px;
26         height: 200px;
27         position: relative;
28         transform-style:preserve-3d;
29         transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);
30         animation: move 20s infinite linear;
31     }
32     .cube>div{
        
33         width:100%;
34         height:100%;
35         background:black;
36         position: absolute;
37         box-shadow:0 0 10px currentColor;
38         font-size: 50px;
39         text-align: center;
40         line-height: 200px;
41     }
42     .cube:hover>div{
        
43         background: currentColor;
44         box-shadow: 0 0 30px currentColor;
45     }
46     .cube .out-front{
        
47         transform: translateZ(100px);
48         color:deeppink;
49     }
50     .cube .out-back{
        
51         transform: translateZ(-100px) rotateY(-180deg);
52         color:seagreen;
53     }
54     .cube .out-left{
        
55         transform: translateX(-100px) rotateY(-90deg);
56         color:skyblue;
57     }
58     .cube .out-right{
        
59         transform: translateX(100px) rotateY(90deg);
60         color:lightcoral;
61     }
62     .cube .out-top{
        
63         transform: translateY(-100px) rotateX(90deg);
64         color:lightslategrey;
65 
66     }
67     .cube .out-bottom{
        
68         transform: translateY(100px) rotateX(-90deg);
69         color:gold;
70 
71     }
72     @keyframes move{
        
73         0%{
74             transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
75         }
76         100%{
        
77             transform: rotateX(360deg) rotateY(720deg) rotateZ(720deg);
78         }
79         /*from 和 to 也可以*/
80     }
81 
82     style>
83 head>
84 <body>
85     <div class="wrap">
86         <div class="cube">
87             <div class="out-front">就div>
88             <div class="out-back">坚div>
89             <div class="out-left">持div>
90             <div class="out-right">胜div>
91             <div class="out-top">利div>
92             <div class="out-bottom">是div>
93         div>
94     div>
95     
96 body>
97 html>

 

部分效果图如下：

css3之3D 旋转立方体与哆啦A梦_第4张图片

 

★ 以上代码的部分解释：

X-UA-Compatible：X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。

IE=edge告诉IE使用最新的引擎渲染网页。

通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。 

 

currentColor：当前的文字颜色。具体内容可以参考以下链接：

https://www.bbsmax.com/A/RnJWrgYzqY/

 

 

有关魔方的知识可以参考以下这个链接：

https://www.cnblogs.com/susouth/p/9992923.html

 

      希望有所帮助！

转载于:https://www.cnblogs.com/shihaiying/p/11342930.html

你可能感兴趣的:(css3之3D 旋转立方体与哆啦A梦)

  • 力扣 hot100 Day49 qq_51397044 Hot100leetcode算法数据结构
    105.从前序与中序遍历序列构造二叉树给定两个整数数组preorder和inorder，其中preorder是二叉树的先序遍历，inorder是同一棵树的中序遍历，请构造二叉树并返回其根节点。//抄的classSolution{private:unordered_mapindex;TreeNode*myBuildTree(constvector&preorder,constvector&inord
  • 本周第一次约练 2cfbdfe28a51
    中原焦点团队中24刘霞2021.2.1分享第77天：在今天的约练过程当中，咨询师展示了如何将焦点与催眠很好地结合在一起，感受到了焦点的更多可能性，自己也能够做的更多。同时，也学到了咨询师认真的态度，细致的钻研。咨询中，目标的澄清很重要，方向感会更加清晰。
  • “显著性”（Saliency）是计算机视觉中的一个重要概念，主要指的是图像或视频中最吸引人注意力的区域或对象 步步咏凉天 计算机视觉人工智能
    “显著性”（Saliency）是计算机视觉中的一个重要概念，主要指的是图像或视频中最吸引人注意力的区域或对象。它模拟的是人类视觉系统对视觉场景中“显著”区域的感知能力。显著性可以用于图像理解、目标检测、图像压缩、图像分割等多个任务。下面是对显著性在计算机视觉中的几个关键方面的解释：一、显著性检测（SaliencyDetection）显著性检测的目标是预测图像中最能吸引人注意的区域，通常输出一个与输
  • 自然拼读之简笔画(纪念) 大U同学
    啾宝图绘书今天要寄送给我的小侄女。当然，还未画完。图片发自App图片发自App图片发自App图片发自App图片发自App图片发自App图片发自App图片发自App图片发自App图片发自App图片发自App最开始也是以这个简笔画练手的。在此存档哈哈。
  • 《给孩子最好的礼物》P18~19 七乡杏坛
    “父亲是一个银行，发行知识，支付爱。”读到这一句话，我内心非常的感动，文中的父亲本是一所学校的教授。为了给生病的儿子治病，他在工作之余，买起了冰棍，后来他干脆提前离休，在校园里开了一家小卖部。他用自己的辛勤劳作，为身患绝症的儿子累积了一道用生命筑起的防护墙。父亲二字，是多么的朴实，又是多么的伟大。作为家长，要当孩子的成长路上的指南针，舍得付出自己的时间与心思，才会收获一个健康又上进的孩子。看看今晚
  • 汉朝为何分为“西汉”和“东汉”？宋朝为何有“北宋”与“南宋”之分？ 我没忘记
    汉朝是中国历史上极具有代表性的、具有承先启后的重要地位的大一统王朝，与后来的唐朝并称“强汉盛唐”。但是汉朝分为两个历史时期，即西汉（前202年－9年）与东汉（25年－220年），那么这两个时期的汉朝为何会被称之为“西汉”与“东汉”呢？还有宋朝也是被分为“南宋”与“北宋”，更不用说更早时期的“西周”与“东周”、“西晋”与“东晋”等等，这是如何一回事呢？汉光武帝其实无论是西汉、东汉还是北宋、南宋，它们
  • 【原生JS教程】第3节：运算符与表达式 全栈前端老曹 原生JS教程与实战前端教程javascript开发语言ecmascript前端
    第3课：运算符与表达式引言运算符是JavaScript中用于操作数据的基本工具，表达式则是由变量、常量、运算符等构成的可求值代码片段。掌握运算符的分类和使用方式，是编写逻辑判断、数据处理和复杂计算的基础。通过本节课的学习，你将掌握：JavaScript中常见的运算符类型（算术、比较、逻辑、三元等）运算符的优先级与结合性表达式的基本概念与使用场景常见运算符陷阱与最佳实践本节内容概要✅1.算术运算符（
  • 国产开源！TinyPiXOS国产自主轻量级移动嵌入式设备桌面操作系统！运用纯C/C++从底层重构出超轻量级的整体图形技术栈，打造一款独立可控、轻量且高度定制化的嵌入式桌面操作系统方案。 TinyPiXOS开发者联盟 TinyPiXOS开源c语言c++系统架构linux嵌入式硬件arm开发
    目录TinyPiXOS——国产自主轻量级移动嵌入式设备桌面操作系统开源工程系统优势系统特点为什么要造“轮子”？我们做了什么？核心模块自主研发GUI桌面系统交互设计和开发适用场景关于自有内核的开发规划关于多窗口操作的说明如何参与项目如何学习TinyPiXOS关注我们TinyPiXOS——国产自主轻量级移动嵌入式设备桌面操作系统TinyPiXOS以开源Linux为基础，通过创新的内核级轻量化改造与精简
  • 从代码到终端部署：Prompt如何颠覆传统DevOps流程 LCG元 工具运维promptdevops运维
    文章目录基于Prompt工程的DevOps架构重构实践一、架构演进与技术对比1.1架构演进路径1.2核心流程对比二、核心实现方案2.1Prompt解析引擎实现（Python）2.2Kubernetes集成部署（YAML模板）三、生产部署实践3.1安全增强方案3.2性能优化数据四、技术前瞻与演进4.1未来三年技术路线图五、完整技术图谱六、核心代码实现（TypeScript前端）七、部署验证测试基于P
  • 解锁Prompt+DevOps新姿势：终端系统重塑的三大核心策略
    文章目录引言：Prompt驱动的DevOps范式迁移核心策略一：智能决策流水线构建横向架构对比纵向实现流程Python实现示例核心策略二：自适应终端部署体系TypeScript客户端实现YAML部署配置模板核心策略三：智能运维闭环构建安全审计实现方案性能对比分析技术前瞻性分析附录：完整技术图谱技术架构部署验证引言：Prompt驱动的DevOps范式迁移在云原生与AI工程化交汇的今天，Prompt技
  • CSS实现前端响应式布局
    一、响应式布局概述响应式布局的定义与重要性响应式布局是一种能够使网页在不同设备上（如桌面电脑、平板电脑、手机等）都能呈现出良好视觉效果和用户体验的设计方法。它通过使用灵活的布局、可适应的图像和媒体查询等技术，确保网页能够根据设备的屏幕尺寸、分辨率和方向进行自动调整和优化。在当今数字化时代，响应式布局至关重要。随着移动设备的广泛使用，用户越来越多地通过各种设备访问网页。如果网页不能在不同设备上良好地
  • 【国内超大型智能算力中心建设白皮书 2024】 AI大模型 lose and dream 人工智能开源git开源软件githubgitlab开放原子
    文末有福利！智算中心建设通过领先的体系架构设计，以算力基建化为主体、以算法基建化为引领、以服务智件化为依托，以设施绿色化为支撑，从基建、硬件、软件、算法、服务等全环节开展关键技术落地与应用。一、体系架构（一）总体架构图8智算中心总体架构智能算力中心建设白皮书，重点围绕基础、支撑、功能和目标四大部分，创新性地提出了智算中心总体架构。其中，基础部分是支撑智算中心建设与应用的先进人工智能理论和计算架构；
  • 全栈开发的现状与未来——机遇与挑战并存 Willin 老王躺平不摆烂 chatgptAIGC程序员创富ecmascriptjavascript
    目录全栈开发的现状与未来：机遇与挑战并存1.全栈开发的就业市场现状与趋势1.1当前市场需求与薪资水平1.2行业竞争与公司偏好1.3未来几年发展预测2.全栈开发的技能要求与职业发展2.1核心技能栈：从前端到后端2.2新兴技术：AI与低代码/无代码2.3职业发展路径与晋升空间2.4多元化发展机会3.全栈开发的行业挑战与应对策略3.1主要行业挑战3.2应对策略与建议全栈开发依然充满机遇，市场需求旺盛，薪
  • 大学 b99b9fce07d4
    graduate每个人都怀揣着一个大学梦，期盼过段无拘无束的大学生活，在适当的年华释放着属于青春的色彩，将"我的青春我做主"落实到行动中，但试问，真正做到不曾留下遗憾的又有多少人。回想曾经的自己，抱着同样的理想懵懵懂懂的进入了大学，迄今已三年有余，时间是个好东西，让原来的我们褪去了初中的幼嫩，长出"锋利"的羽毛，学会了飞翔。
  • 道德经 第二十九章 大庆思考笔记
    [原文]将欲取①天下而为②之，吾见其不得已③。天下神器④，不可为也，不可执也⑤。为者败之，执者失之。是以圣人无为⑥，故无败，故无失。夫⑦物⑧或行或随⑨；或觑或吹⑩；或强或羸⑾；或载或隳⑿。是以圣人去甚、去奢、去泰⒀。[译文]想要治理天下，却又要用强制的办法，我看他不能够达到目的。天下的人民是神圣的，不能够违背他们的意愿和本性而加以强力统治，否则用强力统治天下，不能够违背他们的意愿和本性而加以强力统
  • 《论语》：八佾第三（2） 么么虎南行记
    三家者，以《雍》彻。子曰：“‘相维辟公，天子穆穆，’奚取于三家之堂？”①三家：鲁国当政的三家大夫孟孙、叔孙、季孙。《雍》：《诗经．周颂》中的为周天子举行祭礼后撤去祭品、祭器时所唱的诗。彻．同“撤”，古代祭礼完毕后撤祭馔，乐人唱诗以娱神。②“相维辟公，天子穆穆"。出资《诗经》里《雍》这首诗中的二句：各路诸侯们都在助祭，天子恭敬地主祭。相(xiàng)：助祭的人。维：用于句中的助词，可以译为“是”。辟
  • 高并发解决方案：SpringBoot+Redis分布式缓存实战 fanxbl957 Web缓存springbootredis
    博主介绍：Java、Python、js全栈开发“多面手”，精通多种编程语言和技术，痴迷于人工智能领域。秉持着对技术的热爱与执着，持续探索创新，愿在此分享交流和学习，与大家共进步。DeepSeek-行业融合之万象视界(附实战案例详解100+)全栈开发环境搭建运行攻略：多语言一站式指南(环境搭建+运行+调试+发布+保姆级详解)感兴趣的可以先收藏起来，希望帮助更多的人高并发解决方案：SpringBoot
  • SpringBoot缓存技术全解析：Redis+Caffeine二级缓存架构 fanxbl957 Web缓存springbootredis
    博主介绍：Java、Python、js全栈开发“多面手”，精通多种编程语言和技术，痴迷于人工智能领域。秉持着对技术的热爱与执着，持续探索创新，愿在此分享交流和学习，与大家共进步。DeepSeek-行业融合之万象视界(附实战案例详解100+)全栈开发环境搭建运行攻略：多语言一站式指南(环境搭建+运行+调试+发布+保姆级详解)感兴趣的可以先收藏起来，希望帮助更多的人SpringBoot缓存技术全解析：
  • 2022年4月22日《0–8岁儿童纪律教育》培训感悟 星星_e1d9
    –––刘文克+春蕾怡馨幼儿园1、儿童发展关键时期是指在儿童成长的过程中，在某一特定的时期内，对某种特定的知识和行为十分敏感。2、儿童通过体育游戏习得的技能也是避免和解决问题的重要技能。儿童学习交往和与他人有效合作以及管理自己的行为与情绪。
  • #1122#感官占领的方法运用 张景楠
    1、【眼睛】：你看到了什么？好比你卖一款特别浓稠的希腊酸奶，写“浓稠可口”是不够的，我们要写“像乳白色的奶香冰淇淋一样，只能用勺子挖着吃。”2、【鼻子】：你闻到了什么？好比你卖香薰蜡烛，不要写“香味浓郁”，而是写“北非百合花的高雅花束，混合着刚割下的青草香气与高山上清新空气的味道”。3、【耳朵】：你听到了什么？好比你卖音响系统，不要写“震撼音效”，而是写“当电影里一辆摩托车呼啸而过时，马达的轰鸣声
  • 2019-03-09 1c63abd2a32c
    1、壮壮与亮亮的打算在山东省临清市的一个小村子里，住着几十户人家，小牛壮壮与小羊亮亮就出生在这里。现在，它们已经是一对如兄弟一样的好朋友，几乎没有闹过矛盾。壮壮住在村子的西北角，亮亮则住在村子的东南角，从壮壮家走到亮亮家，至少要走上5分钟，可见它两家的距离有多大。早上，壮壮与亮亮在村口汇合，来到村边的草地上吃起草来。中午，它们在草地上打滚、睡觉。下午，它们在草地上玩的不亦乐乎。傍晚，只听村里传来的
  • 《周老三的爱情十五》 柳夏一季
    “老乡，这个时候还没休息呀？”王昨晚与一位小老板吃宵夜，半夜才回到出租房，见周老三的那间房门还没关，旁边还有“噗噗噗”的响声。原来周老三还没睡，到这个时候了，还在鼓捣他那一堆破烂，因为，昨天房东来收房租费时就发了一通牢骚，说堆在过道旁的破烂都落不了脚了。看房东那意思，都不像把房子租给周老三了，嫌他堆这么多破烂很不卫生的样子。本来周老三早就有想搬到另外一处出租房的，但早先说要退租的那位一下子又变卦，
  • 后端开发：Spring Boot 的分布式缓存方案 大厂资深架构师 SpringBoot开发实战springboot分布式缓存ai
    后端开发：SpringBoot的分布式缓存方案关键词：SpringBoot、分布式缓存、Redis、Caffeine、缓存策略、缓存失效摘要：本文深入探讨了在SpringBoot后端开发中分布式缓存方案的相关技术。首先介绍了分布式缓存在现代应用中的重要性及本文的研究范围，接着阐述了核心概念如分布式缓存的原理与架构，详细讲解了常用的核心算法原理及具体操作步骤，包括使用Python代码示例说明。通过数
  • 北恒私募高级班周一丰，马建军受骗无法出金!慈善投票真相不是你想的那么简单! 昌龙律法
    不少市民群众将闲置资金用于炒股、投资等，各种网上理财投资产品也越来越多，这让诈骗分子有了可趁之机。他们打着“低门槛、高收益”的幌子，制作虚假APP，通过网络交友等手段推荐“理财投资”产品，再通过小额盈利赢得投资人信任，继而增加资金投入数额。一旦大资金转入，骗子马上就会关闭APP或者编造亏损、要提现需要缴纳税费、手续费等理由诱骗投资人继续转账，从而掏空投资人的口袋。若你也不幸被骗遇到此类平台一定不要
  • 知智慧一头顶的星空与内心的道德 快乐姐星球
    管理是一生的日常，成事是一生的修行。我是冯唐。今天讲的这堂课，不仅是给那些功成名就、手握重兵、手握重权的人，其实也是给各位正在修炼成事的人，也是给我自己讲的一堂课。不要欺世，“欺骗”的“欺”，“世界”的“世”，永远不要欺负这个世界。你只能欺负一时，你不可能欺负一辈子；即使你欺负了这辈子，倒霉也会发生在你周围的人身上，发生在你喜欢的这些人身上，甚至会给你来生造成某种影响，如果你相信有来生。天理人心曾
  • 顶刊潜力！国家产融合作试点城市DID 皮皮学姐分享-ppx 人工智能其他经验分享大数据科技
    1632顶刊潜力！国家产融合作试点城市DID数据来源国家产融合作试点城市是由工业和信息化部、财政部、中国人民银行、金融监管总局、中国证监会联合组织的项目。‌国家产融合作试点城市旨在通过产融合作的方式，引导金融资源有效支持实体经济，推动产业与金融的协调发展，探索产融合作新模式新路径，强化对新型工业化的金融支撑。试点城市将采取设立专项基金、提供贷款支持、建设产融信息对接服务平台等措施，促进产业链与金融
  • 三月三日之研报 只是意外一凡凡
    今天上班，空闲的时候看了《手把手教你读财报》，和班班请教，明白了成本和权益的区别，也明白了权益的计算方式。看到了班班留的作业，《雨虹的好公司分析》，翻出了之前班班提供的20份研报，看的是一头雾水，之前也只是大致的浏览了目录，好多的信息，好像都全是重点又好像都不是重点，看的脑壳疼……有参照着劲嘉的好公司分析，在理杏仁里把那些基础数据找了出来，试着写了一点，真的是继续不下去……怎么办？很没有头绪和重点
  • 如何与父母和解？ 玲玲情绪转化教练
    跟你说，昨天旁听了一个个案，是关于与父母和解的，我相信这个话题，很多的小伙伴都很感兴趣，尤其不是跟父母长大的孩子……故事是这样的！她说，自从弟弟出生之后，就跟奶奶吃住在一块，她觉得父母对他不公平，为什么弟弟一出生，我就要跟奶奶在一起，于是对父母，还有弟弟都有很多的怨气……虽然现在也是跟父母在同一个城市，离的也很近，但是关系却很疏远，有的时候为了不让父母担心，她从来不跟父母讲自己的近况，父母跟她说身
  • 秋天的雨有感 心里暖暖的
    伴随这几天的秋雨，我们班今天学习了一篇令人陶醉的课文《秋天的雨》，这篇课文写的真是应景啊！这篇课文主要讲了秋雨用它那盒五彩缤纷的颜料，送给了大自然许许多多的色彩，让大地母亲更加美丽迷人，还送给了熟透了的果实们好多好多香甜的气味儿，使人们都垂涎欲滴，并吹起金色的小喇叭，催促小运动物们做好过冬的准备。这些方面都是对秋天的赞美。这篇课文写的特别应景，因为现在就是秋季，可以让孩子们更加深刻的体会秋天之美。
  • 怎么在支付宝查看菜鸟的【领寄件的优惠券】？ 直返APP淘客项目
    探索菜鸟裹裹的优惠秘境：优惠券领取与寄件秘籍在数字化生活的便捷舞台上，菜鸟裹裹不仅成为了我们寄送包裹的得力助手，还隐藏着诸多令人心动的优惠惊喜。想象一下，在寄送快递的同时，还能享受运费减免的乐趣，是不是让人倍感兴奋呢?那么，接下来就让我们一起揭开菜鸟裹裹优惠券的神秘面纱，并了解寄件券的那些小秘密吧!优惠券探寻之旅第一步：打开菜鸟裹裹，邂逅优惠首先，轻触手机屏幕上的菜鸟裹裹图标，仿佛推开了一扇通往优
  • 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其他