Posts List

css盒子模型设置的缩略形式

css里面的盒子模型里面设置padding,margin的上下或者左右的大小有很多方式,下面说说两种不同的方式: original method: padding-top:0px padding-right:20px padding-bottom:30px padding-left:10px new method: padding:0px 20px 30px 10px // top right bottom left respectively 同理: margin-top:0px margin-right:20px margin-bottom:30px margin-left:10px margin:0px 20px 30px 10px 如果上下左右的值都是一样的话,那我们可以这样设置: the old method: padding-top:20px padding-right:20px padding-bottom:20px padding-left:20px the new method: padding:20px 如果上下值和左右值分别一样呢: the old method: margin-top:0px margin-right:20px margin-bottom:0px margin-left:20px the new method margin:0px 20px // top and bottom right and left respectively border的属性设置: the old method border-width:thin border-style:solid boder-color black the new method:

一个神奇却很简单的css特效

在网上看到一个前端大牛的主页,觉得他有一个特效特别酷,一开始还以为是要用什么javascript代码来实现,但仔细看一下,发觉只是用几行css代码就搞定了,我觉得挺好的。 他这个效果就是鼠标放在左半部分和右半部分,整个网页的布局颜色会相互变化,我贴上前后两张图来比较一下,你们就明白了。 当鼠标放在左半部分: 当鼠标放在右半部分: 可能静态的图片看不太出效果,但是动态看起来还是比较酷的,最关键的是它的代码其实很简单。 .panel, .panel-left:hover + .panel-right { background-color: #22c3aa; color: white; } .panel-right, .panel:hover { background-color: white; color: #22c3aa; } .panel-right:hover + img#avatar { transform: rotateY(180deg); } 第一段和第二段代码主要就是背景颜色和主体颜色的改变,他把做面板鼠标移动到上面时的效果和右面板的效果设为一致,从而达到左右颠倒的效果,最后一段代码主要是下面一张图片的旋转180度。 真的是前端的东西很变化莫测,往往很简单的思路能够达到意想不到的效果,我觉得真的是值得我们很多时候多多思考的。 再贴上这个前端大神的网页http://zhangwenli.com/。真的很佩服她,一个女生居然代码写的这么好,看看别人做的东西,再看看自己的东西,简直惭愧不已,我觉得人丑还是多读书,尤其是我这种长的那么丑的人就更应该读了。

css样式表的引入方式

一般来说,css 有两种样式表的引入方式,在这里我记录一下,比较这两种引入方式的区别: <link rel="stylesheet" type="text/css" href="css文件"> @import "css文件" 显然第一种方式似乎是更常见的。事实上,使用这两种方式引入css文件的效果都是一致的,区别在于是html标记,而@import是css语法。标记有rel,type和href属性,可以制定css样式表的名称,这样可以利用javascript的语法来控制。举例来说,我们可以在一个网页中链接多个css样式文件,在利用javascript语法控制不同情况下显示的样式文件,例如让用户在点击某个按钮之后更换网页的背景颜色,或者随着时间来更换网页的背景颜色,正因为link方式的弹性更大,这也是为什么这种方式更为常见的原因。