2天驾驭DIV+CSS （技巧篇）（转）

 这是去年看到的一片文章，感觉在我的学习中，有不少的影响。于是把它分享给想很快了解css的兄弟们。本文是技巧篇。

基础篇
[知识一] “DIV+CSS” 的叫法是不准确的
[知识二] “DIV+CSS” 将你引入两大误区
[知识三] 什么是W3C标准？
[基础一] CSS如何控制页面
[基础二] CSS选择器
[基础三] CSS选择器命名及常用命名
[基础四] 盒子模型
[基础五] 块状元素和内联元素

实战篇
[第一课] 实战小热身
[第二课] 浮动
[第三课] 清除浮动
[第四课] 导航条(上) | 导航条(下)
[大练习] 前四节课大练习
[第五课] 浮动布局之结构设计 | 浮动布局之表现设计
[第六课] 定位
[第七课] 定位应用
[第八课] CSS Hack

技巧篇
[单张图片按钮实例] 
[首行文字两文字缩进]

 

【小技巧一】单图片按钮实例(CSS Sprites、CSS精灵)

        一般我们做按钮基本上都需要两张图片，一张正常状态的图片，一张按下去效果图片，做这种按钮思路就是，设置链接a的背景为第一张图片，a:hover的背景为第二张图片

代码如下：

HTML代码：

1. <a href="#" id="theLink"></a>

    

CSS代码：

1. #theLink{
         display:block;/*因为标签a是内链元素，所以利用这句话将内链元素转化成块状元素，后面的width和height才起作用*/
         width:120px;
         height:41px;
         margin:0 auto;
         background:url(../images/normal.gif) no-repeat;
   }
   #theLink:hover{background:url(../images/press.gif) no-repeat;}

    

源代码：  两张图片按钮的源代码.rar (6.18 KB, 下载次数: 1055) 


=========================================================


这节课，主要给大家介绍第二种思路，其实也很简单，首先我们将上面的两个图片合并成一张图片，如下：

其次，将上面的图片设置成按钮的背景，最后，将a:hover的背景向上移动41个像素就OK了

HTML代码：

1. <a href="#" id="theLink"></a>

    

CSS代码：

1. #theLink{
         display:block;
         width:120px;
         height:41px;
         margin:0 auto;
         background:url(../images/buttonBG.gif) no-repeat;
   }
   #theLink:hover{background:url(../images/buttonBG.gif) no-repeat 0 -41px;}

    

这种图片整合技术，就是CSS Sprites，也就是CSS精灵！

学到这里，大家是不是可以把[第七课] 定位应用的例子用CSS Sprites实现呢？

源代码：  单张图片按钮的源代码.rar (5.4 KB, 下载次数: 1296) 

 

【小技巧二】CSS初体验之首行文字缩进

记得过去刚开始学习制作页面的时候，要想让一段文字首行缩进两个文字，如下图:

      总是在前面加上8个“ ”，因为过去大家对CSS不熟悉，这种方法实现虽然比较直接，但是文字多的时候会有很多“ ”充斥在代码中，代码显着比较乱，现在我们实现这种效果就简单多了，直接在CSS代码中加入

1. text-indent:2em;

    

就很容易实现文本段落的缩进~

text-indent:2em;
解释一下：text的意思是文本，indent在计算机英语中意思是缩进，至于后面的2em意思就是2个相对单位；

em又是什么单位？
em这个单位的意思就是文字的高度，1em就是1个文字的高度，2em就是两个文字高度，所以我们写的“text-indent:2em;”的意思就是，文本缩进2个文字的高度，因为汉字是方块字，高度和宽度是一样的，所以缩进2个文字的高度，就等于缩进两个文字的宽度，最后的效果就是缩进了两个文字。

【说明一点】
对于"text-indent:2em;"属性，只能加在块状元素上面，内联元素是不起作用的。

源代码：  文本缩进.rar (68.34 KB, 下载次数: 545) 

 

 

原文地址：http://www.w3cfuns.com/portal.php?mod=topic&topicid=13