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

时间：2015-07-05 23:54:34 阅读：204 评论：0 收藏：0 [点我收藏+]

标签：

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

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

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

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

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

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

代码如下：

HTML代码：

```
<a href="#" id="theLink"></a>
```

CSS代码：

#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代码：

```
<a href="#" id="theLink"></a>
```

CSS代码：

#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代码中加入

```
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

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

标签：

原文地址：http://www.cnblogs.com/jinhuazhe2013/p/4623275.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行