10
22
2011
4

js&css无图片实现tip提示效果 学习总结

学习学习如何通过css&js&无图片实现tips提示效果!

Category: Web设计 | Tags: javascript css
10
6
2011
4

css 之 line-heigt & height & font-size 摘记

line-height 属性设置行间的距离(行高)。

 

该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

 

总结:line-height减去font-size,所得的高是当前文字的顶端距离上一行文字的底端的长度。或者说是line-height包含了font-size,而其差值则平分在font-size即文字的上下两侧了!

    其中line-height似乎不能为负的样子,但它与font-size的差值可以为负,如果为负的话,二行文本就会出现重叠现象了!

  需要注意的是line-height可以填相对值,如1,表示与font-size同。

 

本文仅仅作个记录,若要详细了解请自行网上搜索或见参考资料。

参考资料:

  http://www.w3school.com.cn/css/pr_dim_line-height.asp

  关于使用line-height单行文本的垂直居中问题

Category: Web摘记 | Tags: css
10
6
2011
35

rgba的运用 以及 box-shadow内阴影 记

.build-group h3, .build-group ul {
    background: none repeat scroll 0 0 rgba(133, 156, 228, 0.1);
    border: 1px solid #1B335B;
    box-shadow: 1px 1px 8px 1px #1B335B inset;
    float: left;
    font: 20px 'MuseoSans500',sans-serif;
    margin: 0;
    padding: 20px 30px;
}

今天在逛http://nightly.mozilla.org/的时候,看到有内阴影效果,一看源代码居然box-shadow还有内阴影设置…… 兴奋又无奈啊。

来分析下box-shadow的参数吧

  前参数是设置阴影的位置,第三个是设置阴影的模糊度,第四个是设置阴影的范围大小

  第五个就是设置颜色(可以用rgba),最后一个是设置是不是内阴影,如不设置默认是外阴影

  PS:阴影可以是多重的,多重间用“,”隔开!!

还有连背景色也能用rgba方式定义半透明效果了呢!

 

参考资料:

   https://developer.mozilla.org/en/CSS/box-shadow

 

Category: Web摘记 | Tags: css
10
5
2011
22

css之blockquote美化

blockquote即块引用,就是说是引用的东西,当然主要是有缩进的效果,这样就不同于其它的普通的文字了。如果不是块级的引用,则用q标签(不常用吧,这个就是给标签内的文字加引号而已)。虽然并不一定要用blockquote才能达到这种效果(可以用css对任意标签实现blockquote效果),但这用得还是比较流行的,当作愉乐&长见识&学习了!

Category: Web设计 | Tags: css
10
1
2011
2

border style对比 && cursor不同浏览器支持对比 测试环境(ie8,opera11,firefox7)

1、不同浏览器对css中border的显示效果不同,因为正在学习,所以截个图对比下! 2、光标是我们操作电脑的好帮手,在用户浏览网页的时候,光标的好看与否是一个关键,可是不同的浏览器对css中cursor的支持各不相同,所以查找了下相关资料来学习下!

Category: Web设计 | Tags: css

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com