图文混排和首字下沉

要求：做一个网页，实现图文混排和首字下沉效果

图文混排

理论基础

如果将一个盒子浮动，另一个盒子不浮动，那么浮动的盒子将被未浮动盒子的内容所包围。如果这个浮动的盒子是图像元素，而未浮动的盒子是一段文本，那么就实现了图文混排效果。

理论成立，实践开始！

首先可以在body里插入图片和文字，其中文字要用p标签包含起来

示例代码如下：

<img src="images/樱花.jpg" width="146" height="159" /> 

<p>樱花...............杂交所衍生得到的品种。</p>
<p>樱花.............国花。</p>
<p>野生的樱花在数百万年前诞生于喜马拉雅........被日本朝拜者带回了东瀛。</p> 
<p>据文献资料考证...........前樱桃名樱非桃也”。</p> 

此时的效果会是图片和文字没有实现图文混排的效果，只是文字和图片各自占一部分，这是因为图片还没有设置浮动（float）效果

效果图如下：

现在整个网页有了内容，我们为了实现达到我们（甲方）想要的效果，需要进行修饰。

接着需要我们对图片和文字进行初步的修饰，添加一些css样式。

示例代码如下：

img {
	padding: 5px;
	float: left;
	margin:10px 10px 10px 0;
	border:1px gray dashed;
}
p {
	
	font-family: "黑体";
	font-size: 14px;
}

这些样式我是加在了<style type="text/css">里，这里就不做展示了（没错我就是懒）

添加完这些基本的css样式后，就实现了图文混排的效果。

其中float:left；保证图片可以紧贴网页，从而实现图文混排的一个关键，但是float的属性中我们可以根据自己的需要进行选择。

 （float属性：https://www.runoob.com/cssref/pr-class-float.html）

用到的其他属性属性就是对文本或者图片效果进行的修饰，我就不说了，直接挂链接

（padding属性：https://www.runoob.com/cssref/pr-padding.html）

（margin属性：https://www.runoob.com/cssref/pr-margin.html）

（border属性：https://www.runoob.com/cssref/pr-border.html）

（font属性：https://www.runoob.com/cssref/pr-font-font.html）

切记，只有图片要加浮动（float）效果，文本不需要!

很好，到了这里，我们的网页已经可以实现图文混排的效果！接下来我们就要做首字下沉效果。

首字下沉

理论基础：

在图文混排的基础上让第一个字也浮动，同时变大，则出现了首字下沉的效果

在css样式中创建一个命名为first-letter的类（别问为什么命名first-letter，问就是好理解好记），然后在first-letter中添加属性（这个first-letter也是加在<style type="type/css"><style>中）

.first-letter {
	font-size: 3em;
	float: left;
}

font-size使字变大，float使它紧靠图片，从而使它凸显出来

接着我们还要把这个first-letter的类可以正确应用在首字上，但是我们的首字被文本包含在一起，这就需要我们把首字单独修饰出来，于是用span标签把首字括起来，并且要把first-letter的类加到span标签上

参考代码如下：

<span class="first-letter">樱</span>

效果图如下

 现在，我们完成了图文混排和首字下沉的效果了，我的最终效果如下

 我遇到的一些问题（不感兴趣的可以跳过）

当我给P标签加入text-indent属性，再加上首字下沉的效果后，首字的下沉效果会显示出来，但是第二个字就会体现出text-indent的属性（首行缩进效果），只能把首行缩进属性从p标签中去掉，另外设一个css样式，单独设定首行缩进的属性，并挨个给后面的段落加上，感觉有一些麻烦，不知道各位有没有更好的解决方法。