【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

时间:2022-09-25 23:47:20

转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html

代码部分有小改动。

导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。

本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果。

导航条是梯形形状的。

aaarticlea/png;base64,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" alt="" />

背景区域的毛玻璃效果。

【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

把导航条和毛玻璃效果在一篇文章中分享其实是有原因的。因为这两个效果的实现离不开一个重要的思想。

用语言来描述就是:父元素设置position:relative,其伪元素(after或者before)设置 position:absolute,并且让top,bottom,left,right都为0,伪元素占满父元素的整个空间,最后设置z-index将背景放在父元素后边。

具体代码如下。

【CSS】梯形、平行四边形导航条与毛玻璃效果【转】
.container {
position: relative;
} .container::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
 z-index: -1;
}
【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

什么意思呢?稍安勿躁,我会在接下来的两个实战例子中对这段代码的意思一一道来。

文章结构:

1.导航条

  1.1:平行四边形导航条

  1.2:梯形导航条

2.毛玻璃效果

3.结束语

4.参考文章

1.导航条

1.1:平行四边形导航条

平行四边形制作的思想:平行四边形的制作运用了CSS3 2D 变形中的skew()倾斜属性,因为我们只是在水平方向上倾斜,所以在使用skew()时需要将第二个参数指定为0,否则x,y轴方向都会发生倾斜,这并不是我们想要的效果。或者是使用skewX()。具体的代码实现如下。<div class="keith">

【CSS】梯形、平行四边形导航条与毛玻璃效果【转】
<style>
.keith li {
position: relative;
width:100px;
float: left;
text-align: center;;
}
.keith li::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
background: #2175BC;
    -moz-transform: skewX(-25deg);      
    -ms-transform: skewX(-25deg);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
    .keith li:hover::after {
background: #2586D7;
}
</style>
<div class="keith">
<ul>
<li>博客园</li>
<li>首页</li>
<li>新随笔</li>
<li>联系</li>
<li>订阅</li>
<li>管理</li>
</ul>
</div>
【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

上面代码中,只显示了部分重要部分。在设置平行四边形的时候需要注意以下几点:

1.给 li 元素设置relative,然后伪元素after设置absolute和LRBT四个方向的定位。原因在于我们需要让伪元素相对与 li 元素定位,并且让伪元素填满整个 li 元素的空间,这样的话给伪元素设置的背景就会铺满整个 li 元素 。最重要的是,在伪元素上设置skewX(),只会对伪元素进行倾斜,并不会对父元素上的文字进行倾斜。

2.设置z-index:-1。这里如果不设置z-index值为负值的话,就看不到在 li 元素里面的文字了,因为absolute会提高自身元素的层级,所以要让伪元素z-index为-1,让其的层级位居 li 元素之后。

3.使用skewX()函数让 伪元素(不是 li 元素) 元素旋转 25度,注意写上属性前缀,防止浏览器兼容性问题。

4.将伪元素和伪类结合使用的时候,必须要注意的是先伪类,再伪元素。如果是li::after:hover 这样设置的话是没有任何效果的。正确的写法:li:hover::after。

示例效果如下。

aaarticlea/png;base64,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" alt="" />

aaarticlea/png;base64,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" alt="" />(hover状态)

1.2:梯形导航条

梯形导航条的是实现思想:梯形导航条使用了CSS3 3D 变形中的三个属性:perspective(),rotateX()和transform-origin。

perspective()是用于设置用户和元素3D空间Z平面之间的距离,值越小,用户与3D空间Z平面距离越近,视觉效果会明显;反之,值越大,用户与3D空间Z平面距离越远,视觉效果越小。

ratateX()是用于3D空间中x轴的旋转,大家可以想象一下在高中时期学的空间直角坐标系,跟那个x轴的旋转是一样的道理。

transform-origin是用于指定元素的旋转中心点位置。

具体属性的使用方法可以去查阅相关文档,这里就不再赘述了。具体代码实现如下:

【CSS】梯形、平行四边形导航条与毛玻璃效果【转】
<style>
.keith li {
position: relative;
width:100px;
float: left;
text-align: center;;
}
.keith li::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
background: #2175BC;
-moz-transform: perspective(0.5em) rotateX(5deg);
-ms-transform: perspective(0.5em) rotateX(5deg);
-webkit-transform: perspective(0.5em) rotateX(5deg);
transform: perspective(0.5em) rotateX(5deg);
}
.keith li:hover::after {
background: #2586D7;
}
</style>
<div class="keith">
<ul>
<li>博客园</li>
<li>首页</li>
<li>新随笔</li>
<li>联系</li>
<li>订阅</li>
<li>管理</li>
</ul>
</div>
【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

上面代码中,只显示重要部分。注意以下几个问题:

1.前四个问题与平行四边形导航条的制作思路基本相同。其中,在伪元素上设置perspective()和rotateX(),只会对伪元素进行3D处理和在空间中X轴的旋转,并不会对父元素上的文字进行任何的处理。文字还是会按照默认效果显示。如果在父元素上设置perspective()和rotateX(),则会影响之后的所有子元素。也就是所有的子元素(包括文字)都会进行旋转。文字被旋转了,阅读十分困难的。这个逻辑应该不难理解。

2.用于控制梯形是左倾斜还是右倾斜的属性是transform-origin。梯形不倾斜:bottom。左倾斜:bottom left;右倾斜:bottom right。

示例效果如下:

aaarticlea/png;base64,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" alt="" />

aaarticlea/png;base64,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" alt="" />(切换状态)

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAA6CAIAAABQ2eUYAAANNUlEQVR4nO2c228bxxWH/a+o6CXoQwsURV8cJEEf8tA7WqBAgAJNAlQJggbJCxMZSNwCblG0dZA0aSInsmA6ims3seLE8VWkaFnUXbRNxqQl2pYpy7QBVRQQUlXEqLKnD3uZ2d2Z3TmzOyK5Oj+cB4HiZc+ZM9+ePTO7uwgKhUKh9GhXqw8AhUKhYiskLAqFQukSEhaFQqF0CQmLQqFQuoSERaFQKF1CwqJQKJQuIWFRKBRKl5CwKBQKpUtIWBQKhdIlJCwKhULpEhIWhUKhdAkJi0KhULqEhEWhUChdQsKiUCiULiFhUSgUSpeQsCgUCqVLbsJ+8d/m8KXr+z+efaF/7JkD2e4Dox1hicMTB05fmi4ufLH+lVog2tDx5w+O/fX4zEhurrpSl3Gh/uVXo8Wld4ZvvHry+ksnbnSK7Tt1/fDFG7nyUv3L/+3YsUMX2sEFHaKEvX//wdUbSy/2Z7/zynBXIt2h9v29mVePTNys/kc+BO3v+HdfGf59X7a0cOf+/Qd8Fx48KFXu7T1ZfvzQnd19dzvUfpxc+tvZ65V7qztr7NCFNnBBnyhhZ+bvPPdetuWxiMS+1TP8lw8nri3VZEIwM9cZjj/UM/za8cnCrWWvC5cWlvd8cqPliIzEHuuvvnl+rnxPqujolKQ1xu7zCufEH4P0i4EL+kQJe+j85Yf3XWh5FCK0n+0fOTNRCgzBoXOd5PiTb48OjuRdLhwdu/7Lgdsth2OE9tSxW6nLC8Fj11FJyx27GKRfDFzQJ0rYY0PT33i59f5Ha19/KX0l/7l/CDrO8Z/vH3G5MDhaeORgteVYjNYeOVi9Urga+7FDF9rBBX2ihB1MT7fcc0129arfRO1Ex/e8P8a6cDKbbzkQNVnsxw5daAcX9IkS9sRw54VJ3orFoigEHer4wNkp24VTY+1L2IEaIWRzwP36WpkQUluT+YZ4j91OdCG5skwIqVY8/6oUCVkuFbbfBX2ihP00AwtTb5UbIyN8zVQy3V1qkvpKd3CsG73bElDRRIU6blqmwXO/kKqTYmY73OlKpHO5nOHCaRXCrpUJKef937OaXee9Z2ijRrayQ8wr+U3ieoW+k9QWV92vi94PhKzi2DHWXWo6x7GQqstO8t6q82gCs503djAX+FkXaJUi5Nj0umDGjTfrMw3+69rMdkGfKGFPXpgBh8mXsNbfviFLVop1Qbjpt8nL+l2BlUqchS+o4+yBuaZid6lJSCOVdLzonofBAiSZkSJnxlVq2J7FLV51aROQEBvBQxvstoza4upAzVGB9ixukfWNHn4B61Y5v5pd5/nN+wbbQo4dfxTqK92JQqrOZHKmQUizmLFHsJASb2oIWW0ZYwdKv+7kSpFQlHeXmsKDow5as8z0sSK8IiCEEFh9oOCCcEZXV/ihrjY8B9xMZfywoOCCPlHCfqZKWCmCVCuBQ+uWmRwMr4NHLvid3okKddwRAZaGyZVl+dHNNALPBzL26J8u5HK5swDCrpX54d7KDjFAdF2/06LVqnzzm4RsDjjJ6/o2A9PlvPEpBuXGZ42vlWsUiCALGju2JnDWB5WiORYSBWymYeVzNGMHTz9jHvFPw71VUSktcwFeKQLxBHfBOnhvo8AsYCvsKUQ0fJ4yzp5Kii6AyAQSJezpEQ01rHj8jHJPVKzRDkPUhO1KpK9du8aGQN7x4JLBI1FOi2cC2J59N3tu/AqwP8CWrqvZdfOC3VWZcgjLwtGucO0XPSi3+wPMNzOvD62V13k9BLEpj12XH2E9WefzDZwcU28NPftuFjrvuhLprkSlWG/08lLdL68yDVJfSVWdx59pMO8H4wnqgjPCVtysqtaaLPyTgSbCGi4owVNKlLBnLqoTNqCMZS5PDOdNVIkLAQ5hfdsF1jjJVoVzc3PKjrsN8ruWAZp9MnZ+AkTYuwM1eknes7hF1jcH5Ag7UPMCcTW7zvtUftP5ooX1obVyje0GuHAfbMpjxyGsT1K5OcUfMuuk2yhmFKvasOnn9dF15I7mZqG3ylY2Lpap4CkSF/zrLe/wBdMAeABvDE74IkxdlLBn5cNkXCgx/ghPL7xiIbASdOSxhhrWMHuiAhwXJYdENSrXjVXsGwwBCbu7b61Ma1K64hREWOtTLpK6JbGE5f6UImRBY+ceAmdaCq/JPAnvl65wC5l+HB/9CJtmThXec4YiYSEuAFuFzJHrq2FtL2CHJidK2POjumvYtGvdwBMIXgtGG2G/lkjPz88rOC7ZK3BNPL8JrHT8rKWlCctdejJVWwsg7OImWd/osTu56xs9feaaFd1vwG4zEHZpZfdpiezhvrsKY+ffJRAOkI1XJjOthI9g4VvaBXbuCH/Xl7DiVTvzI4p4gowC5Cec5wbdhO3Ss+pFCTuUDUfY4BrWGGArZEadbw6tOfaccsD8tsBTn7G8CCPUN19Oz8/PQx2XKFo5V5SeCexJhRCEHZ6E1rB3d/M2AAj4a6xoGTWs2SUwP5vfJLXNsoiwwlpYna22PXqwCh07RcK6zUxFc+ySK8vh+unQ9PPf0hRIWH6jIxxhwS4EVrIOF7wnBmuhTCBlwn5vbyZyyFLCpkIS1kfixLU/KLzUcnGHSS/3lFAi1Lf3DEMdb0PCZiYvR0ZYs7pczbJrUJ6VLuOzA4ubBnad8icsT777tET2w/7q1ExOPWNF24MscSZqpuHOVXOqqxez0PRrQ8KCXfD9IdH82oYatiuRfuLNi74sA4sSdnhsFnQo8BrWNuakxAwtP62lCFtI1clytaFGKKjjEXUJoiTshSlpwvrurwomrLVbi6HzmrCG5bRoCehGg0B7/NCd5JkpQMay8txoELyRQLh5hij30KHp14aEBbsQnrDu+Eew8dG2PxwZl5ngkqKEzYyrE1Yijux1gV842GmwXCq4wsdGnzmASpGQYkkx0FDHo6thnUcbIlFG5AnrV8OyVBUR1rzLy0VYWYZG1yWw7UfJpUOnpSDr1yVIriyT5nJdEH/flS5WCniCpl9IwvIVjrBgF2BdAtEMimDiiCzCG2opYS8oElZycdAOgd9NMqaE1/6ODKARN94D78MaBnU8GsJ650mIRLkIIqy1f8C60t+ySMpWoz41LP1sQA27LYTd3Xf3p4eX+k8FQ9aHsMaY9rrvoLX+5XlRcGXWXC6B92xB08+ROZkGJ82CalgrgSPbSwB2QemHImlLytvkTDQNWUrYkQmtNaxtAVtBxd3VSpF4IcXEVJVQUMej6BLYpxnmgEMQdnRanrD0kSsWJZ23aXHqWWdvwfFZD2H9HzgwtFEjWzXuLbNEsRtr2C/ev9332aR8xtpTtJhJM7cMeC4sHHnIWdeW2cgZbfrZxDRd8K7XBezWsg+enYnGVFUkLNgFubLMdSTGYXMCrqGG7UqkH+oZjmTVixL24mQYwhohc/kZIWEltuirBhrquFoN6/4G0kwl7XkeNj+y0oRlOwP07/wmWd/IOrZqiWpYB3CtO2KtvoEh40vEW7WCHjejaL8auP2eL2RFfVh2QPmDay5wVbo9qwvdyYLxtcqrK9D0YwoLTtoEE5bers1kKbNjR8ERsAvBNaz7DbSs8VZ1egjblUj/5O8j4SFLCTsairC8seR7rlzDBplqoKGOhyOsUb06jtO+L0i5FMpOX1JAkqMP6649/QhrLojRxw5Im6hLEFH34NcfLB74lAtZ86JB0GJiJ7PzQTC88RJkqeJt0CrzTvxb/oQ1Ms1557ql+kq3apcA6gKQsJ6LV5dpI2xXIv1if9gbailhs1PRdAkcwyZ4vl+AvLkrK5VAQx1X6xLYpYfo7GJ+rdIsHZ8BEZauTfG7rv6EHdqo0WaC33NkRD/thbLo0VwK9sSRxV4+ZHnZy3tAGjOlXbT1X611vVlT+hV6q01xgcKDkUFY4SNZGQM9uijEDFLrEjjGDjr7QthbJyYlDlYoStgxcJjUrO1qWKjjwBrWOqPIoVPtiTBAwsLNuQcL9KwWDkx5irB18Jt/Vd7+RKYn2xA+bopPXi0Wet65ShbPlVDAQ1edH1daI4K7AO4StNZOj6jfUEsJOz69PYRtO4uB4xO6Cdtp9tujlX+eCK5k28FikH4xcCHQlBuylLATOyBMXIuB45NIWI89fezWW50A2RikXwxcCLTH/qz4GFlK2EnIDYhxshg4PjWLhOXY7/596x8ftztkY5B+MXBBxp5+Z1QBspSwoFu842QxcHwaCSuwZz5ceGNwouUDFO/0i4ELkrbvKPiGWkrY6dmdEiaXxcDxmdlcy1nWtvbcRwuvtzFkY5B+MXBB3j44B7uhlhJ2ZieFibUYOI6E9bfnj9987XibQjYe6dfyY9hOG5uaVSHs7A4Lk20xcHw2h4QNsBcGb+7/qB0hG4f063wXQPaDPwIeI0sJm8vlZnekxcDxGLiwPVFqw0C14SHtQBcUXJaE7K7gt6BQKBRKSUhYFAqF0iUkLAqFQukSEhaFQqF0CQmLQqFQuoSERaFQKF1CwqJQKJQuIWFRKBRKl5CwKBQKpUv/B85LrI2Y8VW+AAAAAElFTkSuQmCC" alt="" />(左倾斜)

aaarticlea/png;base64,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" alt="" />(右倾斜)

2.毛玻璃效果

毛玻璃的实现思想:毛玻璃使用了CSS3中的backgroung-size,fiter滤镜的原理。

background-size属性用于指定背景图片的尺寸,其中的一个参数cover是将背景图片放大,以适合铺满整个容器。但是这个属性使用的前提是需要设定一张足够大尺寸的图片,否则会导致背景图片失真。

fiter滤镜中的blur()用于将图片进行高斯模糊处理,只接受单位值,值越大,模糊效果越明显。

在张鑫旭老师的一篇关于毛玻璃实现的文章中(会在参考文章中给出链接),给出了毛玻璃实现的效果,可是有一些小问题:如果在背景图片上加上文字,blur()会将文字一起模糊掉,这样的话会用户体验不太好。当然,在不需要文字的背景图片下,张鑫旭老师的方案还是很棒的。

以下给出具体代码:

【CSS】梯形、平行四边形导航条与毛玻璃效果【转】
<style>
body {
background: url("../images/family-one.jpg") no-repeat center center fixed;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
} .rascal {
position: relative;
background: rgba(255, 255, 255, 0.3);
overflow: hidden;
}
.rascal::after {
z-index: -1;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url("../images/family-one.jpg") no-repeat center center fixed;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
-webkit-filter: blur(20px);
filter: blur(20px);
margin: -30px;
}
</style>
<div class="rascal">
My Name is Uncle-Keith!
</div>
【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

上面代码中,需要注意几个问题:

1.同样这里也是使用父元素relative,伪元素absolute的方法,并且设置了TBLR和z-index。使用这种方法的关键之处在于我们是对伪元素进行了blur()处理,这样并不会影响到父元素中的文字效果。

2.需要给背景图片添加background-size属性,这个是为了让图片自适应整个屏幕的宽度。另外,这个属性需要添加两次。一是在body元素上,一是在伪元素上。在伪元素上添加的原因是我们要让blur()处理模糊的图片与背景图片相同。如果在伪元素中给background设置inherit的话,只会继承父容器rascal的背景,而rascal容器是一个白色背景的容器,这样就与我们的效果不相同了。下图是在伪元素中使用background:inherit;的毛玻璃效果。

【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

这并不是我们想要的毛玻璃效果。所以伪元素上background的设置应该与背景图片是相同的。

3.在为伪元素设置正确的background之后,我们要使用margin负值模糊边缘消退的问题。

【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

可以看到,毛玻璃中的blur()效果有点过犹不及了,一圈模糊效果超出了容器,给父元素设置overflow:hidden,可以将超出的部分剪切掉。最终的示例效果如下。

【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

最终效果看起来就很自然了。

3.结束语

三个实例中,有一个共同的思想:将CSS3的倾斜,透视,旋转和滤镜效果都放在伪元素中,并且给父元素设置relative,伪元素设置absolute,让伪元素的宽度和高度撑满父元素的整个区域,最后设置伪元素的z-index为负值。这样做的好处就是不会影响父容器中的文字。

具体的代码如下:

【CSS】梯形、平行四边形导航条与毛玻璃效果【转】
.container {
position: relative;
} .container::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
 z-index: -1;
}
【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

4.参考文章

张鑫旭老师谈毛玻璃实现

阮一峰老师谈高斯模糊原理

完。感谢大家的阅读。

【CSS】梯形、平行四边形导航条与毛玻璃效果【转】的更多相关文章

  1. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  2. 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  3. 小tip&colon; 使用CSS将图片转换成模糊&lpar;毛玻璃&rpar;效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  4. &lbrack;转&rsqb; 小tip&colon; 使用CSS将图片转换成模糊&lpar;毛玻璃&rpar;效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  5. CSS列表及导航条

    大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条.   垂直导航条 注意要点: 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0. 以em设置 ...

  6. 如何使用纯CSS制作特效导航条?

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  7. CSS滤镜让图片模糊(毛玻璃效果)实例页面

    <pre name="code" class="css">CSS代码: .blur { filter: url(blur.svg#blur); /* ...

  8. CSS滤镜让图片模糊(毛玻璃效果)

    CSS代码: .blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); ...

  9. iOS学习之导航条NavigationControl的一些属性设置

    /** * 配置公共的属性,该属性作用于所有的导航条界面; */ - (void)configureConmmonPropety { //1.设置导航条的颜色 self.navigationContr ...

随机推荐

  1. iOS&lowbar;Quartz2D之涂鸦板

    响应者对象:继承了UIResponder的对象 触摸事件:一根或多根手指: 开始触摸: - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent ...

  2. java web 100个知识点

    http://wenku.baidu.com/link?url=ns5SvKesJSLzpcTckBKsFopqgbC6O0XBuVBS1BZwtJbK1P-aYbNV3fVOU9lYTbGQwKYK ...

  3. 1&period;AngularJS初探

    1.需要什么前端开发环境 1)代码编辑工具 webstorm 2)断点调试工具 chrome插件Batarang 3)版本管理 tortoiseGit 4)代码合并和混淆工具 grunt-contri ...

  4. (1)第一个ASP&period;NET Web API

      Install-Package Microsoft.AspNet.WebApi . Global.asax protected void Application_Start() { AreaReg ...

  5. Java 获取距离最近一段时间的时间点

    if (timeFilter == 1) {// 最近三个月 long curTimeSeconds = System.currentTimeMillis() / 1000L; para.put(&q ...

  6. c&num; 多语言实现 与 InitializeCulture

    在实现多语言的时候,我们会使用GetGlobalResourceObject,在服务器控件中显示多语言文本要使用<%$ Resources:Common, Export %>, 但是在设置 ...

  7. Nancy 简单学习

    1. 环境 vs2010 , nancy 2. 需要测试的功能 1. 输出 页面输出简单文本 2. 输出json 数据 3. 操作 1. 创建asp.net 空项目 2. 添加引用Nancy库 使用n ...

  8. PL&sol;pgSQL学习笔记之十一

    http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 39.3.4. Row 类型 name table_name%R ...

  9. Oracle中Blob和Clob类型的区别与操作

    Oracle中Blob和Clob类型 1.Oracle中Blob和Clob类型的区别 BLOB和CLOB都是大字段类型,BLOB是按二进制来存储的,而CLOB是可以直接存储文字的.其实两个是可以互换的 ...

  10. URL与URI的区别

    URI—Universal Resource Identifier通用资源标志符Web上可用的每种资源如HTML文档.图像.视频片段.程序等都是一个来URI来定位的URI一般由三部组成①访问资源的命名 ...