weixin_34343000
weixin_34343000

Html5 和 CSS的简单应用

本文是利用几个简单的小例子，来实现html+css的简单应用。

菱形链接菜单

本例是采用html5+css3.0设置的菜单链接。其中主要用到了以下几个方面：

  1.  CSS3.0中的2D变换，如：旋转transform:rotate(45deg);移动，放大transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/等功能。
  2. 用到了margin:25px;/*margin表示元素与其他元素之间的空白*/。
  3. 超链接标签a中垂直居中的设置：设置height 和line-height属性
  4. 鼠标放上去的样式

Html5 和 CSS的简单应用_第1张图片

具体代码如下：

 1 DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>CSS 3.0设置菱形divtitle>
 5     <style type="text/css"> 
 6         .menu
 7         {
 8              border-bottom:1px solid black;
 9             
10             }
11     .menu div
12     { 
13         width:100px;
14         height:100px;
15         text-align:center;
16         margin:25px;/*margin表示元素与其他元素之间的空白*/
17         float:left;
18         border:1px solid black;
19         transform:rotate(45deg);/*rotate表示旋转45°*/
20      }
21      .m1
22      {
23          background-color:Red;
24       }
25      .m2
26      {
27          background-color:Blue;
28       }
29       .m3
30      {
31          background-color:Green;
32       }
33       .m4
34      {
35          background-color:Yellow;
36       }
37       .m5
38      {
39          background-color:Gray;
40       }
41       .m6
42      {
43          background-color:Olive;
44       }
45       .m7
46      {
47          background-color:Orange;
48       }
49      .menu a
50      {
51          text-decoration:none;/*不显示下划线*/
52          width:70px;
53          height:70px;
54          margin:15px;
55          display:block;
56          color:Black;
57          text-align:center;
58          line-height:70px;
59          transform:rotate(-45deg);/*因为外层Div进行旋转，所以a标签也会旋转，所以需要逆向旋转回来*/
60       }
61       
62       .menu a:hover
63       {
64           transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/
65       }
66     style>
67 head>
68 <body>
69 <header>
70     <h1>这是一个CSS3.0的示例h1>
71     <div class="menu">
72         <div class="m1"><a href="#">基础语言a>div>
73         <div class="m2"><a href="#">前端开发a>div>
74         <div class="m3"><a href="#">移动开发a>div>
75         <div class="m4"><a href="#">数据处理a>div>
76         <div class="m5"><a href="#">互联网a>div>
77         <div class="m6"><a href="#">IT硬件a>div>
78         <div class="m7"><span><a href="#">其他a>span>div>
79     div>
80     
81 header>
82 <div style="clear:left;border-top:1px solid black;">div>
83 <div style=" margin-top:2px; border-top:1px solid black;">ada div>
84 body>
85 html>
View Code

 三维正方体

本例是采用div+css实现三维正方体，主要涉及到以下几个知识点：

  1.  transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。
  2.  transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。
  3.  position: relative; 元素的定位。

如下图所示：

Html5 和 CSS的简单应用_第2张图片

具体代码如下：

 1 .wrap {
 2     width: 200px;
 3     height: 200px;
 4     margin: 200px auto;
 5     position: relative;
 6     transform-style: preserve-3d;
 7     transform: rotateX(30deg) rotateY(30deg);
 8 }
 9 
10 .wrap div {
11     width: 200px;
12     height: 200px;
13     position: absolute;
14     border: 1px solid blue;
15     text-align: center;
16     line-height: 200px;
17     font-size: 15px;
18 }
19 
20 #top {
21     transform: rotateX(90deg) translateZ(100px);
22 }
23 
24 #bottom {
25     transform: rotateX(90deg) translateZ(-100px);
26     border-left: dashed;
27 }
28 
29 #before {
30     transform: translateZ(100px);
31     border-bottom: dashed;
32     border-left: dashed;
33 }
34 
35 #after {
36     transform: translateZ(-100px);
37 }
38 
39 #left {
40     transform: rotateY(-90deg) translateZ(100px);
41 }
42 
43 #right {
44     transform: rotateY(90deg) translateZ(100px);
45     
46 }
View Code

一扇打开的门

本例是实现一扇打开的门，涉及的知识点如下：

  1. transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。
  2.  transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。
  3.  position: relative; 元素的定位。
  4.  border-radius: 20px;定义元素的角的弧度半径。

效果图如下：

Html5 和 CSS的简单应用_第3张图片

具体代码如下：

 1 #door{
 2     width:200px;
 3     height: 200px;
 4     margin: 200px auto;
 5     /*border: 1px solid black;*/
 6     position: relative;
 7     transform-style: preserve-3d;
 8 }
 9 #door div{
10     width:200px;
11     height: 200px;
12     border: 1px solid black;
13     position: absolute;
14     text-align: center;
15 }
16 
17 #left{
18     transform:rotateX(45deg) rotateY(-45deg) translateX(-200px) translateY(-70px) scaleY(1.4);
19 }
20 
21 #middle{
22     transform:rotateY(45deg) ;
23     background-color: greenyellow;
24 }
25 
26 #right{
27     transform:rotateX(45deg) rotateY(45deg) translateX(200px) translateY(-70px)  scaleY(1.4);
28 }
29 
30 #door #left1{
31     width:101px;
32     height: 200px;
33     border:0px;
34     position:absolute;
35     margin-left: 0px;
36     padding: 0px;
37     background-color: darkred;
38     
39 }
40 #door #left2{
41     width:100px;
42     height: 200px;
43     border:0px;
44     position:absolute;
45     margin-left: 100px;
46     padding: 0px;
47     background-color: darkred;
48 }
49 
50 #door .ball{
51     width:20px;
52     height: 20px;
53     border-radius: 20px;
54     background-color: gold;
55     margin-top: 10px;
56     margin-left: 50px;
57     position:relative;
58 }
View Code


明星照片墙

本例是实现一款自由的明星照片墙，涉及到的知识点如下：

  1.  position:absolute; 绝对定位。
  2.  transform: scale(1.2); 缩放，大于0：放大，小于0：缩小。
  3. transform: rotate(-30deg); 旋转，二维空间旋转。

效果图如下：

Html5 和 CSS的简单应用_第4张图片

具体代码如下：

 1 #star{
 2     width:800px;
 3     height: 800px;
 4     background-image: url(../img/bg.jpg);
 5     background-repeat: repeat;
 6 }
 7 
 8 #star div{
 9     width:180px;
10     height: 180px;
11     border: 1px solid lightblue;
12     position:absolute;
13 }
14 
15 #star div:hover{
16     transform: scale(1.2);
17 }
18 
19 #star p{
20     margin-top: 2px;
21     padding: 0px;
22     text-align: center;
23     color: blue;
24 }
25 
26 #star img{
27     width: 180px;
28     height: 150px;
29 }
30 
31 #s1{
32     transform: rotate(-30deg);
33     top:40px;
34     left: 20px;
35 }
36 
37 #s2{
38     transform: rotate(30deg);
39     top:350px;
40     left: 400px;
41 }
42 
43 #s3{
44     transform: rotate(45deg);
45     top:200px;
46     left: 200px;
47 }
48 
49 #s4{
50     transform: rotate(60deg);
51     top:50px;
52     left: 450px;
53 }
54 
55 #s5{
56     transform: rotate(-45deg);
57     top:600px;
58     left: 500px;
59 }
60 
61 #s6{
62     transform: rotate(-60deg);
63     top:400px;
64     left: 50px;
65 }
66 
67 #s7{
68     transform: rotate(-45deg);
69     top:600px;
70     left: 200px;
71 }
View Code


备注：

关于CSS的定位【position】，详细说明如下：

  1. static:默认定位方式，文档流方式，单独占满一行。left,top,bottom,right不起作用。
  2. absolute:绝对定位，脱离了文档流，不会单独占满一行。方位只会受left,top,bottom,right的影响。默认距离浏览器左上角的距离。如果父元素做了定位，就相对于的是最近的父元素。如果父元素没有定位，则相对于body进行定位。
  3. relative:相对定位，没有脱离文档流，会单独占满一行，方位会受到left,top,bottom,right的影响。相对于离它最近的父元素。
  4. fixed：固定定位，脱离了文档流，不会单独占满一行。lef,top,bottom,right始终相对于body。

关于CSS的块级元素并排，说明如下：

  1. float:块级元素实现漂浮。left,right.
  2. clear:清除浮动，可以清除左浮动和右浮动。

-----------------------------------------------------------------------------------------------------------------

 

转载于:https://www.cnblogs.com/hsiang/p/6139660.html

你可能感兴趣的:(Html5 和 CSS的简单应用)

  • 《喜迁莺》好心情 挹洗俏月
    原文:梅雨霁，暑风和，高柳咽蝉多；小园台榭绕池波，鱼戏动新荷。薄纱幮（chu），轻羽扇，枕冷簟(dian)凉深院；此时情绪此时天，无事小神仙。作者：周邦彦，字美成，号清真居士。钱塘人，宋徽猷阁待制。杭州钱塘（今浙江杭州）人，北宋文学家，宋词“婉约派”的代表词人之一。周邦彦自少性格疏散，但勤于读书。梅雨也停了，伴着暑气吹来的风也柔和了，高高的柳树上有很多知了；园子里的亭台楼阁被池水环绕，鱼儿在戏水不
  • Python 并行新思路：不移除 GIL 的多核并发之道 清水白石008 pythonPython题库python服务器开发语言
    Python并行新思路：不移除GIL的多核并发之道引言大家好，我是[您的名字]，一位在Python领域深耕多年的软件专家。今天，我们来探讨一个Python开发者经常面临的挑战：全局解释器锁(GIL)以及如何在它的限制下，充分利用多核CPU的并行计算能力。GIL，这个Python语言的“老朋友”，长期以来一直备受争议。它确保了在CPython解释器中，同一时刻只有一个线程执行Python字节码。这简
  • 【无标题】两个路由器不同网段互通 zhc28888 网络
    宽带接到A路由器WAN,LAN1口连接B路由器WAN口（动态IP），LAN2口连接电脑PC,B路由器LAN口下的电脑PC1能PING通PC,PC电脑PING不同PC1,如何设置能互通？(设置A路由表：目的192.168.0.0，255.255.255.0，192.168.3.2,pc电脑只能PING通192.168.0.1）
  • 《我都要死了你让我觉醒前世记忆》林寻安妙汐_(我都要死了你让我觉醒前世记忆)全集在线阅读 热门小说_2
    书名：我都要死了你让我觉醒前世记忆主角：林寻安妙汐简介：她有心中的白月光，却无法与之相伴，只能选择他作为合约替身。他拿着工资为白月光做饭，两人相处得很愉快。然而，合约即将结束时，他却被诊断出重病，只剩两个月的寿命。此时，合约老婆却希望假戏真做。可以关注微信公众号【书香名斋】去回个书名或主配角，即可免费阅读【我都要死了你让我觉醒前世记忆】小说全文！>>>>>>>>>>戳我继续阅读>>>>>>>>>戳
  • 2021-2-21晨间日记 客归呀
    今天是什么日子起床：8.30就寝：12.00天气：晴心情：充满阳光纪念日：第一天加入任务清单昨日完成的任务，最重要的三件事：写小说3000字，剪视频，和亲人聊天改进：小说字数字数加，视频录制习惯养成：每天坚持写小说周目标·完成进度百分之七十学习·信息·阅读做题，头条文章阅读健康·饮食·锻炼每天一瓶牛奶人际·家人·朋友和家人朋友聊天，教亲朋好友一些手机操作工作·思考写随笔最美好的三件事1.每天进步2
  • 京东返利平台有哪些?推荐七个大家都在用的京东返利app 氧券超好用
    京东返利平台盘点：七个公认好用的京东返利APP推荐随着我国电商行业的飞速发展，越来越多的消费者开始享受线上购物带来的便利。而在众多电商平台中，京东作为领军企业，自然吸引了大量的消费者。为了让用户在享受购物乐趣的同时还能获得额外返利，京东推出了多个返利平台。本文将为大家盘点七个广受好评的京东返利APP，帮助大家实现购物省钱又赚钱。1.京粉京粉是京东旗下的分销推广平台，主要通过图文展示、短链、长图等多
  • 雨天日更、学习与提升， 生字游戏
    首先应该注明，致自己，说成小心眼最合适，因文化成度低有些文字的词语难易运用好，所以才有如此的霞小的心思，说自私不为过只是想找个提升自己满足心理的需求，致自己安慰一翻。艺多不压身、是有意还是无意进入写的提升之门。应该说无意事实是有意的，只能说好心之人常善有，介绍进入了这个写的程序。经过看到写群里的人于事才发现、自己走进一辉煌时代年青人群里，这是他们年青人的摇蓝梦想之地，但我也仿佛佣有了一个青年人的梦
  • 苏岩张晚《重生后，打脸渣男贱女》最新章节阅读_(苏岩张晚)热门小说_苏岩张晚《重生后，打脸渣男贱女》完结版免费阅读_重生后，打脸渣男贱女全文免费阅读_重生后，打脸渣男贱女(苏岩张晚)完整版免费阅... 笔趣阁官方小说
    苏岩张晚《重生后，打脸渣男贱女》最新章节阅读_(苏岩张晚)热门小说_苏岩张晚《重生后，打脸渣男贱女》完结版免费阅读_重生后，打脸渣男贱女全文免费阅读_重生后，打脸渣男贱女(苏岩张晚)完整版免费阅读_(重生后，打脸渣男贱女)全章节免费在线阅读主角配角：苏岩张晚简介：彻底摆烂后，我决定休学旅游我退出了全国绘画比赛，有人却比我更急男友的白月光拼命联系我，想让我重新拿起画笔此刻的我早已在千里之外赶海浮潜，
  • python学智能算法（二十四）|SVM-最优化几何距离的理解
    引言前序学习过程中，已经对几何距离的概念有了认知，学习链接为：几何距离这里先来回忆几何距离δ的定义：δ=min⁡i=1...myi(w∥w∥⋅xi+b∥w∥)\delta=\min_{i=1...m}y_{i}(\frac{w}{\left\|w\right\|}\cdotx_{i}+\frac{b}{\left\|w\right\|})δ=i=1...mminyi(∥w∥w⋅xi+∥w∥b)对上
  • 全新开发范式：uni-app X助力全平台原生应用 程序媛夏天 小白学鸿蒙uni-app
    在2025年数字技术发展的关键节点上，国产操作系统正在经历从愿景走向现实的深刻变革。DCloud于5月12日发布的HBuilderX4.64正式版，标志着uni-appx已实现对鸿蒙、Android、iOS、Web、微信小程序等主流平台的全覆盖，为开发者带来了全新的跨平台开发体验。一、技术革新：Web技术栈与原生性能的完美融合uni-appx的突破性在于其独特的设计理念：“开发态基于Web技术栈，
  • 一次奖励 慢时光慢慢闪光
    下午第第节课做正式作业本上的作业。做作业之前先把上一次作业的情况说了一下，重点表扬加分的孩子，请他们站起来，让大家为他们鼓掌。理由是，上一次作业是在家里写的，能在不在老师监督下认真的同学都是很对自己严格要求的，真正自律的孩子，一来奖励自律，二来鼓励下一次在家里做作业要向这些孩子学习，偶尔正式作业本上的作业在学校里完不成，带回家做容易写字潦草，应付任务，通过奖励能激励不认真的孩子。奖励方式采取随机抽
  • 设计模式入门：抽象工厂模式 happyJared
    UML类图抽象工厂模式代码示例定义苹果类接口，包含一个描述方法/***苹果抽象类*/publicinterfaceIApple{/***具体描述*/voiddescribe();}红苹果，实现了接口苹果和定义的方法/***红苹果*/publicclassRedAppleimplementsIApple{@Overridepublicvoiddescribe(){System.out.println
  • stm32内存分析
    1、0x00-0x7FFFF有什么用？？为什么是512KMbyteSRAMSystem-MemoryFlash的内存映射;映射中最大的内存大小2、SystemMemory有什么用出厂预置的Bootloader系统启动控制固件更新支持调式与恢复3、I-busD-BUSS-BUS能不能访问SRAM?当启动模式是SRAM时可以4、初始化flash时，用的是那个总线去访问？？I-busD-busS-BUS
  • Kotlin flow实践总结 Android技术圈
    Flow是什么按顺序发出多个值的数据流。本质就是一个生产者消费者模型，生产者发送数据给消费者进行消费。冷流：当执行collect的时候（也就是有消费者的时候），生产者才开始发射数据流。生产者与消费者是一对一的关系。当生产者发送数据的时候，对应的消费者才可以收到数据。热流：不管有没有执行collect（也就是不管有没有消费者），生产者都会发射数据流到内存中。生产者与消费者是一对多的关系。当生产者发送
  • 第五十四章 元旦快乐 低价解防沉迷
    等那些警察走了之后，林至拍干净自己衣服上的灰，坐在了沙发上，他抬起头看了一眼站在茶几后面的林末至和余末，心里忽然觉得很不舒服。林末至就站在余末的身边，他冷眼看着林至，一声不吭。现在已经快凌晨了，往常这个时候林末至早该休息了。不过还好，明天是元旦，他可以连放三天假，也可以趁着这三天的时间来解决这些事情。“林至，我今天就要把小至给带走。”余末环顾了一眼这个家，自从她离开了以后，这里就没有再打扫过，她都
  • 焦点解决法 胡涂涂tutu
    图片发自AppSFBT是一种什么样的方法呢？它是一种以问题解决为目标的思维导向。它重视问题解决的行动。它努力寻找问题不发生或问题没那么严重时的例外情况。它极度愿意相信当事人的能力。我们可以做些什么去处理当下问题，让问题不再继续？今日焦点：感恩大自然的馈赠，阳光明媚，微风习习，感受很好。感恩舅老娘的爱护，看到我买菜，把她种的荆芥和香葱都给了我，当我买些香蕉给她时，她说什么也不要，甚至快发脾气了。感恩
  • 链路两段不同网段怎么通信_eNSP小实验：不同网段 直连接口 如何互通？ weixin_39662263 链路两段不同网段怎么通信
    小实验：不同网段直连接口如何互通？1.当两个路由器不同网段的直连接口封装的链路层协议为PPP协议时：由于在PPP链路协商时彼此可以学习到对方的IP地址，并且自动将对端不在同一个网段的主机路由加到直连路由表中。故只要双方在接口配置了IP地址就可彼此ping通。AR1配置：#sysnameAR1#interfacePos4/0/0link-protocolpppipaddress100.1.1.125
  • 60秒早报 2023-02-22 星期三 南门里美
    【微语】不畏人言，不惧岁月。愿你有前进一寸的勇气，亦有后退一尺的从容。1、农业农村部：进一步扩大转基因玉米大豆产业化应用试点范围。开展高价彩礼等重点领域突出问题专项治理；2、多地学校因新冠、甲流等停课，专家：稳妥做法不必慌；3、中国银保监会：原则同意北大方正集团财务有限公司进入破产程序；4、一主播被指在四川凉山农村做“伪慈善“引热议：资助老人3000元摆拍后收回2800元！官方：涉事主播行拘，账号
  • 贾素凤焦点网络初14坚持分享第 282天 六月荷花草
    第160场约练：1、抱怨的背后一定有一个正向的期待，用心的去倾听了解对方的想法，找到他在乎的点。2、看到即疗愈，看到他的努力付出，感受到他的不容易，理解尊重。3、多看自己做到的部分，做的好的地方，正向思考的向度会带给我们成长的力量以及对美好愿景的向往。第161场约练：1、咨询过程中从对方述说的信息中准确判断对方想要的是什么很重要，迟疑不定会影响我们的引导方向。2、澄清对方诉说的信息跟他想要的目标有
  • 写作业 冯丽的简书
    在每次要写作业的时候，大宝总喜欢扣扣书，摸摸橡皮的。好不容易写了两字又跑到厕所尿尿，每次写作业的时候会有很多很多理由要墨迹好一会。这样的行为让他的爸爸很上火，如果是让宝爸陪他写作业总少不了哭鼻子。因为在好话说尽的还不见他有写作业的行动时，宝爸就会用到简单粗暴的方式让他写作业：吵骂，语言威胁中带着恐吓：如果你不写作业，下次就怎么怎么着……我儿子的性格也挺倔的，但是面对比自己强大的对手只好含泪把作业写
  • 树莓派i2c通信C语言,基于I2C的STM32与树莓派通信 茶话股经 树莓派i2c通信C语言
    传统的串口通信会丢失数据，不可靠，故采用I2C(同步串行总线)通信。树莓派上使用python脚本，后期将使用c或java重写，目前没有需求。树莓派作主机(Master)，stm32作从机(Slave)。特别需要注意的是，I2C的通信虽然只需要两根线就能通信，但是需要第三根线接地GND(提供判断低电位的能力)，否则不能正常识别stm32从机使用ArduinoIDE编程以下是STM32的代码：#inc
  • 教学反思集 马明洋河南信阳
    谈教学反思，必离不开叶澜教授的一句名言“一个教师写一辈子教案不可能成为名师，写三年教学反思，就有可能成为名师”。不仅如此，美国学者波斯纳提出的“经验+反思=成长”的“教师成长公式”……这些都足以证明教学反思的重要性。那现在怎样写教学反思呢？今天先谈一点,围绕一个点深入剖析——针对的是现在教学现状:教学反思存在着面面俱到，但各项都很肤浅模糊，浮在表面。造成的原因有很多，也是环境造成的——关于写教后记
  • 2018-09-18 口述笔录
    有话就要说出来，有不满就要骂出来，有情绪就要发泄，有爱就要讲。我们的青春很快就过去，不要整天怕这怕那，不要把所有的事情都压抑在自己的心里面，这样很容易会得心病!
  • 公用表表达式（CTE）详解：针对 MySQL 和 SQL Server 数据库
    公用表表达式（CTE，CommonTableExpressions）是一种在SQL中定义临时结果集的方法，该结果集在单个查询的执行过程中可以被引用。CTE提高了查询的可读性和结构化，特别适用于复杂的子查询和递归查询。本文将详细介绍CTE的概念和用法，并分别针对MySQL和SQLServer数据库进行说明。什么是公用表表达式（CTE）CTE是一个命名的临时结果集，它在查询的执行范围内有效。CTE的定
  • 如何提高JPA项目的扩展性：模块解耦的实践与策略
    在企业级开发中，JPA（JavaPersistenceAPI）因其对象关系映射的强大能力，常被用于构建业务层与数据层之间的桥梁。然而，随着项目复杂度增加，JPA项目常常面临模块之间强依赖、跨模块实体耦合、难以演进等问题，严重影响系统的可扩展性和可维护性。相比之下，MyBatis项目由于其“SQL即服务”的特性，天然具备更强的解耦性。本文将分析JPA项目中常见的模块依赖问题，探讨其背后的原因，并提供
  • 高省、好省、粉象、福袋生活、高佣联盟、美逛佣金显示与下单时不一样？ 高省APP
    最近很多高省、好省、粉象、福袋生活、高佣联盟、美逛的宝宝反馈下单后，佣金显示与下单时不一样。导致这个问题的原因是用了小红包，提交订单时，红包选项一定要关闭，切记不要勾选红包，用红包没佣金或者佣金变得很低。高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。古楼导师高省邀请码555888，注册送2皇冠会员，送万元推广大
  • 我与《写作》的故事 开心果子
    要想提高写作能力，就要磨练写故事的能力，昨天读了叶老师与阅读的故事，今天又再写作的故事里相逢，跟叶老师隔着书本进行了一场对话，我就是那大部分小伙伴中的一员，在微信读书《认知觉醒》的书评里认识了叶老师，通过叶老师的写作，来到这里与大家相聚。我也来讲讲，我与写作的故事。2022年8月7日，我读到了《逆熵增成长之路》的写作篇，开始注册写下第一篇文章《日更百天挑战》，到今天24天，写了28篇小短文，2.2
  • 2020-07-25 京心达_周莎
    2020.7.25今日体验：每个人都有可能犯错，彼此之间的伤害很难避免。凡事看淡一些，不要满怀怨恨，怒气冲天。生气就是拿别人的过错来惩罚自己。心中装满怨恨，也就失去了阳光与温暖。
  • 每日复盘分享 Collue
    3-90/Day47/有效学习，从每日复盘分享开始【2021.9.4团队管理篇】开好月度启动会的方法【一】收获新知一、公司要开月度启动会的原因1、因为上月目标完成，大家的心力、体力都有些疲惫；大家的状态有所回落。然而每个月的目标又都很高，所以要开启动会议，正式宣布战役的开启，让大家进入战斗状态。2、一个公司是否有效率取决于管理者是否有效率，管理者是否有效率，取决于管理者有没有良好的工作习惯。每个月
  • 善于把闪光点发扬光大 面向大海5679
    一位入职场不久的年轻人明明很优秀，但却从不懂得推销自己。导致很多很好展示自己的机会就这样眼睁睁被别人捷足先登。二凤决定帮帮这位初出茅庐的小伙子，让他把自己的闪光点一一列举，并对应到平时的有关工作中去。其实，每个人都有自己的长处，也都有好的一面。每个人都有自己的优点，即每个人都有自己独特的闪光点，闪光点如种子，如果对它辛勤耕耘，总有一天会茁壮成长为参天大树。作为每一个自然人，要善于在自己身上找到闪光
  • java责任链模式 3213213333332132 java责任链模式村民告县长
    责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。 就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。 下面代码模拟这样的效果： 创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** *
  • linux、mysql、nginx、tomcat 性能参数优化 ronin47
    一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大
  • php命令行界面 dcj3sjt126com PHPcli
    常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块 执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("
  • Filter&Session 171815164 session
    Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge
  • 连接池与Spring,Hibernate结合 g21121 Hibernate
            前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。         1.下载相关内容：     &nb
  • [简单]mybatis判断数字类型 53873039oycg mybatis
           昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下:       Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis
  • 项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space 程序员是怎么炼成的 eclipsejvmtomcatcatalina.sheclipse.ini
       在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space.     解决办法是点击eclipse里的tomcat，在
  • 我的crm小结 aijuans crm
    各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主
  • spring里配置使用hibernate的二级缓存几步 antonyup_2006 javaspringHibernatexmlcache
    ．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi
  • JAVA基础面试题 百合不是茶 抽象实现接口String类接口继承抽象类继承实体类自定义异常
    /*   * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、   *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于   * 寄存器（register），快于堆。堆（heap）：用于存储对象。   */  &
  • 让sqlmap文件 "继承" 起来 bijian1013 javaibatissqlmap
            多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用 ，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项
  • 精通Oracle10编程SQL(13)开发触发器 bijian1013 oracle数据库plsql
    /* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O
  • 【EhCache三】EhCache查询 bit1129 ehcache
    本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。   要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性   数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu
  • CXF框架入门实例 白糖_ springWeb框架webserviceservlet
    CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。 它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。 在apache cxf官网提供
  • angular.equals boyitech AngularJSAngularJS APIAnguarJS 中文APIangular.equals
    angular.equals   描述: 比较两个值或者两个对象是不是 相等。还支持值的类型，正则表达式和数组的比较。   两个值或对象被认为是 相等的前提条件是以下的情况至少能满足一项： 两个值或者对象能通过=== （恒等） 的比较 两个值或者对象是同样类型，并且他们的属性都能通过angular
  • java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1] bylijinnan java
    这道题的具体思路请参看 何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A
  • FastDFS 的安装和配置 修订版 Chen.H linuxfastDFS分布式文件系统
    FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.
  • [强人工智能]拓扑扫描与自适应构造器 comsci 人工智能
          当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢?       那么,现在我们必须设计新的模块和代码包来处理上面的问题
  • oracle merge into的用法 daizj oraclesqlmerget into
    Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE
  • 不适合使用Hadoop的场景 datamachine hadoop
    转自：http://dev.yesky.com/296/35381296.shtml。 　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。 当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop!  实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha
  • YII findAll的用法 dcj3sjt126com yii
    看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10));   第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值； 更完善的查询需要
  • vim 常用 NERDTree 快捷键 dcj3sjt126com vim
    下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。 切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳
  • Java把目录下的文件打印出来 蕃薯耀 列出目录下的文件文件夹下面的文件目录下的文件
    Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:
  • linux远程桌面----VNCServer与rdesktop hanqunfeng Desktop
    windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。   linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。   下面分别介绍，以windo
  • guava中的join和split功能 jackyrong java
    guava库中，包含了很好的join和split的功能，例子如下： 1） 将LIST转换为使用字符串连接的字符串    List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom");
  • Web开发技术十年发展历程 lampcy androidWeb浏览器html5
    回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
  • 架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好) nannan408 buffer
    1.前言。   如题。 2.代码。   IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession
  • ORA-00054:resource busy and acquire with NOWAIT specified Everyday都不同 oraclesessionLock
    [Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。   step1，查看被lock的session：   select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj
  • javascript学习笔记 tntxia JavaScript
      javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是
  • Java enum的用法详解 xieke90 enum枚举
    Java中枚举实现的分析：     示例：  public static enum SEVERITY{ INFO,WARN,ERROR }     enum很像特殊的class，实际上enum声明定义的类型就是一个类。 而这些类都是类库中Enum类的子类      (java.l
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他