来谈谈：CSS教程:first-letter完成首字下沉

仓酷云

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
破洛洛文章简介：关于使用first-letter完成首字下沉的一些意见
头几天在“CSS那些事儿”的群中，一名读者伴侣（小土豆）问我书中提到首字下沉的时分为何要增添一个扫除浮动。事先我本人一时利诱了，为何呢，怎样一点印象都没有呢。赶忙翻开电子版的《CSS那些事儿》找到绝对应的章节，而且在各个扫瞄器中测试了以后才发明，我现在对这块的申明太少了，才让她发生了一些不睬解的设法，也许也有其他的一些读者会存在如许的成绩。
发明了成绩就必要办理成绩，因而我就拿这个首字下沉的时分为何要扫除浮动而做了一系列的测试，了局让我感到有点溃散，本来我在那章节中申明的内容太少了，在这里赶忙做个增补，但愿读者伴侣们能看到这篇文章后不会再对谁人扫除浮动而发生利诱。
起首来看一下我在书中唯一的一段对首字下沉举行申明的代码。

1. p:first-letter{float:left;/*设置段落p标签的首字为浮动，让其占有多行的空间*/font-weight:bold;/*加粗段落p标签的首字*/font-size:2em;/*设置段落p标签的首字为其他字体的2倍*/}p{clear:both;}/*扫除首字的浮动，制止影响p标签的高度与其相叠加*/【端五节由来】关于端五节的来源，归结起来，大抵有以下诸说：迎涛神，此说出自东汉《曹娥碑》。曹娥是东汉上虞人，父亲溺于江中，很多天不见尸身，事先孝女曹娥年仅十四岁，日夜沿江号哭。过了十七天，在蒲月五日也投江，五往后抱出父尸。年龄时吴国奸臣伍子胥抱屈而逝世以后，化为涛神，众人哀而祭之，故有端五节。

复制代码

在书中所提到的正文里，仅对p标签扫除浮动做了一个复杂的申明，内容以下：
p{clear:both;}/*扫除首字的浮动，制止影响p标签的高度与其相叠加*/
就是由于这么一句话，让小土豆这位读者发生了料想，为何要扫除浮动。在部分读者眼中也许已对照分明分明为何要扫除浮动，由于:first-letter伪工具有一个浮动的属性。厥后我想一想，为何这个有浮动属性就要扫除浮动，这个成绩仿佛必要申明一下。
成绩的呈现，就必要往办理。因而我就从没扫除浮动到接纳分歧体例的扫除浮动对这段代码举行了复杂剖析。
未对段落首字设置浮动时

登录/注册后可看大图

未设置浮动时的首字下沉
p:first-letter{font-weight:bold;font-size:2em;}
这时候我们仅仅只是对段落中的第一个字符设置了加粗和2倍巨细的文本，那末在示例图中能够看到的效果就是笔墨缩小了罢了，并未首字举行下沉的处置。检察demo
明显这不是我们所想要的效果，那末这个时分我们要做的就是对首字设置浮动，使其离开一般的文档流
对段落首字设置浮动后并未增添扫除浮动的属性

登录/注册后可看大图

设置浮动未增添扫除浮动
p:first-letter{float:left;font-weight:bold;font-size:2em;}
增添了浮动以后，我们能够看到FF/IE7/IE6中已失掉了我们所想要的效果，可是opera/safari中却呈现成绩了，在文本内容少的时分，第二个p标签中的笔墨由于浮动而跑上往了，而只要当文本呈现两行的时分才会将下一个p标签的内容移开。检察demo
因而可知，扫除浮动的需要性仍是有的。那末我们就增添一个扫除浮动的属性给p标签看看效果。
对段落首字设置浮动后并增添扫除浮动的属性

登录/注册后可看大图

设置浮动后并增添扫除浮动属性
p:first-letter{float:left;font-weight:bold;font-size:2em;}
p{clear:both;}p标签有了扫除浮动的属性后，这个时分opera/safari也不再发神经式的把下一个p标签给拉下去了，不外细心看看仿佛间距存在着成绩，岂非另有其他要素招致了每一个段落之间的间距消散了。检察demo
看来仍是有些成绩存在，是否是clear这个扫除浮动的体例不合错误呢。岂非是clear扫除的仅仅只是浮动的属性而并没有让上一个p标签的高度自顺应？带着困惑，增添点背景致的代码给p标签看看是否是真的如许。

1. p:first-letter{float:left;font-weight:bold;font-size:2em;background-color:#000000;color:#FFFFFF;}p{clear:both;background-color:#FF0000;}

复制代码

登录/注册后可看大图

使用背景致反省扫除浮动后的效果
公然，p标签的高度没有上去，仅仅只是扫除了浮动的属性罢了，检察demo，扫除浮动那末多的体例（详细能够参考《CSS那些事儿》中关于扫除浮动的章节），这个clear欠好使，那就换一个体例扫除浮动。

1. p:first-letter{float:left;font-weight:bold;font-size:2em;background-color:#000000;color:#FFFFFF;}p{overflow:hidden;background-color:#FF0000;}

复制代码

登录/注册后可看大图

overflow体例扫除浮动
扫瞄器的天下就是那末奇妙，一个办法不可，换一个办法就会看到天下的另外一面。这个时分我们能够看到背景致扩大到了全部p标签，而且每一个段落之间也存在了间距了，看来成绩是办理了，检察demo。
在这里必要说的一点就是，overflow扫除浮动的体例彪叔——梁Z彪不同意利用，倡议利用:after的体例扫除浮动，详见《CSS那些事儿》中扫除浮动章节。
在这里针对这个首字下沉说了这么多的内容，不过就是想说的是：当我们对标签元素内的内容（大概标签）设置了浮动以后，将会有大概招致该标签元素的错位，因而在设置浮动以后思索扫除浮动也是有需要的，但不是必需的；然后另有一点就是想跟一些伴侣分享一个排查询题的体例，就是使用背景致来查找页面呈现成绩的缘故原由。
友谊提示：翻开文中所提到的demo时，请利用分歧扫瞄器检察，而且实验拖沓窗口，改动窗口巨细看效果
</p>
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

仓酷云

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。