1. 程式人生 > >文字環繞圖片的實現

文字環繞圖片的實現

想實現文字環繞圖片的效果要用float

要點:使用float實現,float最初的作用就是用在環繞。

讓文字向左浮動,然後圖片向右浮動

HTMl部分

<div class="dc-left-text">
	前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
	<img class="dc-left-img" src="Img/配圖三.png" />
	<p>      前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前</p>
	<p>      前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前</p>
</div>
CSS部分:
.dc-left-text{
	width: 428px;
	text-transform: capitalize;
	margin-top: 10px;
	float: left;
}
.dc-left-img{
	float: right;
  	padding: 20px 0 20px 20px;
}

首字下沉效果:

.dc-left-text::first-letter {
	font-weight: bold;
	font-size: 70px;
	color: #F5E327;
	font-family: "微軟雅黑";
	float: left;
	margin-right: 10px;
}

首字下沉效果主要使用偽類