`
fuhao_987
  • 浏览: 61561 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

前端知识天天学(1)

阅读更多
(1)块元素的居中方式:margin:0 auto
(2)IE8用IE7方式渲染:
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /></head>

(3)a元素的几种方式 a,a:visited,a:hover,a:link,a:active
':link':适用于未被用户访问过的链接。
':visited':适用于已被用户访问过的链接。
':hover':在可视化客户端上,适用于光标(鼠标指针)指向一个元素,但还未激活它时。
':active':适用于一个元素被用户激活时。
按照L-V-H-A的顺序声明,具体解释见http://www.caodong.net/Article/889.html
(4)绝对定位:父元素与子元素的position子元素的left与top
<div class="parent">
     <div class="child"></div>
</div>

<style>
.parent{position:relative}
.child{position:absolute;left:*px;top:*px;}
</style>
(5)overflow:hidden/*溢出就隐藏*/
(6)图片:最好用png格式,文件比gif小,支持alpha通道,可以实现半透明,但是不支持动画;gif可以动画,不过透明不行
(7)css中选择器的优先级:
     分为4组,a b c d,优先级a>b>c>d,优先级相同的后出现的优先级高
a:如果样式是在 HTML 代码中以 'style=...' 的内联样式的方式设置的,则将 a 组记为
   1,b c d 三组均记为 0,否则 a 组为 0。
b:将选择器中 ID 属性的数量总合计入 b 组。
c:将选择器中其他属性及伪类的数量总合计入 c 组。
d:将选择器中元素名及伪元素的数量总合计入 d 组。

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 *[id=ok]   {}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#xyz          {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="..."       /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

以上各组选择器,最后一行的内联样式优先级最高,倒数第二行有 ID 选择符的次之,往上的每一行依次减弱,最顶部的通配符优先级最弱。http://www.caodong.net/Article/889.html
------------------------------------------------------------------
html中要养成良好的注释习惯
<div class="content">
<!--content {{-->
   code
<!--content }}-->
</div>

-----------------------------------------------------------------
css sprite:
把几张图放在一整张图上,通过定位显示出相应的图
/*其中的width和height都是每个小图的大小,background为整个大图*/
.x1,.x2,.x3{width:*px;height:*px;background:url('') no-repeat}
.x1{background-position:left top}
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics