分类 前端笔记 下的文章

mongodb 数据库操作

最近学习了一些mongodb相关的资料;通过熬夜终于对mongodb有了初步的了解和认识。
首先mgdb是分布式数据库,比较灵活。不像ms sql;我个人总觉得MSsql是一个庞大臃肿的机器一样。不过还是有他存在的道理的。比如关联表的处理上。
mongdb也有可视化的工具,推荐的一款是robo mongo跟SQLITE很类似;
robomongo

Tags: mongodb

单反相机iso,快门,光圈

请输入图片描述

Tags: 单反相机iso, 光圈

返回304与200代码的区别什么?

304

304

在嗅探抓包过程中,常见的有两种200和304。这两个状态码都关系到能否获取重要信息。
当客户第一次请求服务器资源,服务器成功返回资源,这时状态码为200;往往看到200就表示资源可访问
如果刷新还是 200 则表示没有经过网络请求;304代表与服务器通信了,然而资源没有发生改变就是304 Not Modified

Tags: 304

keyframes优先级-webkit-

css3中有动画属性这个2012年的时候就有了。
但是那时候的浏览器版本不统一,很多时候写css3需要加前缀才可以.

-moz-,-webkit-, keyframes
需要加这些前缀才可

不过随着手机移动的发展,在中国程序员偏向于chrome和firefox两大阵营。
加前缀是小气的象征,为了不被诟病,各大浏览器开始妥协。其实也是一种规则的遵守而已!
大家都遵守这样即可,约定俗成的东西。
今天我徒弟问了一个问题,在我以往的项目经验中不曾遇到过。
我把代码贴出来

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <style type="text/css">
            .d1{width:200px;
            height:200px;
            border:1px solid  #333;
            }
            .d1:hover{
                            
                -webkit-animation-name:change;
                -webkit-animation-duration:5s;
                -webkit-animation-timing-function: linear;
            }


                @keyframes change{
         

                }
    
             @-webkit-keyframes change{
                
                0%{
                    margin-left:0px ;
                    margin-top:0px;
                    background-color:blue;
                }
                    25%{
                    margin-left:200px ;
                    margin-top:0px;
                    background-color:yellow;
                }
                    50%{
                    margin-left:200px;
                    margin-top:200px;
                    background-color:red;
                }
                    75%{
                    margin-left:0px ;
                    margin-top:200px;
                    background-color:green;
                }
                    100%{
                    margin-left:0px ;
                    margin-top:0px;
                    background-color:blue;
                }
            }
     


        

        </style>
    </head>
    <body>
        <div class="d1" id="d1">
            
        </div>
    </body>
</html>

按道理应该执行动画的,safari下可以执行动画效果,可惜在chrome下不执行,使我马上想到了优先级!!!
都是时代的错误造成的,不是什么大问题!
当然解决问题的方法有很多种,改帧动画名,撤销一个属性等……或者是给@keyframes change加上帧动画属性

Tags: keyframes, 优先级

CSS3弹出框样式

请输入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<title>dialog</title>   
<style type="text/css"> 
.dialog-mask{ background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1000; }
.dialog-panel{
background-color: #ffffff;
border-radius: 3px;
left: 50%;
max-width: 300px;
overflow: hidden;
position: fixed;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
z-index: 5000;
}
</style>
</head>
<body>
<div  id="" title="为程序猿准备的ID" >
<div class="dialog-mask"></div>
<div class="dialog-panel">
<div class="weui-dialog__bd">弹窗内容,告知当前状态、信息和解决方法,
描述文字尽量控制在三行内弹窗内容 </div> 
</div>
</div>      
</body>
</html>

Tags: css3弹出框样式, 上下垂直居中弹出框