30-CSS-11-CSS(CSS的布局-图文混排)

最新推荐文章于 2022-04-17 15:26:38 发布

wy_0928

最新推荐文章于 2022-04-17 15:26:38 发布

阅读量421

点赞数

分类专栏： No.5-JavaWeb自学笔记（三）——CSS

本文链接：https://blog.csdn.net/wy_0928/article/details/47616577

版权

No.5-JavaWeb自学笔记（三）——CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

【CSS的布局-图文混排】

步骤1：先将图片、文字等数据进行标签的封装；【切记】凡是需要操作的文字都要标签封装，如带有超链接效果的文字

步骤2：根据标签设置样式；

【示例代码】

<html>
<head>
<style type="text/css">
	#imgtext{
		border:#06F dashed 1px;
		height:400px;
		width:200px;
	}


	#img{
		height:20px;
		width:16px;
	}


	#text{
		float:bottom;	/*漂浮*/
		color:#F60;
		font-family:"华文隶书";	/*修改字体*/
	}
</style>
</head>


<body>
	<div id="imgtext">		
		<div id="img"><img src="1.jpg" /></div>
	
		<div id="text">
		这是一个美女，哇！这是一个美女，哇！这是一个美女，哇！
		</div>
	</div>
</body>
</html>