三种图片与文字布局方法-优快云博客

本文链接：https://blog.youkuaiyun.com/n_meng/article/details/56014409

第一种方式是image 作为背景图片，即：background:url(".......");

例如如下代码块：

<span style="font-family:Microsoft YaHei;"><div style="background:url('loading.gif') no-repeat;width:100px;height:50px">添加文字...添加文字...添加文字...</div></span>

第二种方式是将img块与文字块（文字块采用span标签显示）放在同一个div 中，然后设置他们之间的位置，例如如下代码块：

<span style="font-family:Microsoft YaHei;font-size:18px;"><div style="position: relative; width: 170px; height: 89px;">  
<img src="loading.gif" width="170" height="89" alt="">  
<span style="position: absolute; top: 0; left: 0;">添加文字...添加文字...添加文字...</span>  
</div> </span>

第三种方式是将img块与文字块（文本块存放在div中）放在同一个div 中，然后设置他们之间的位置，例如如下代码块：

<span style="font-family:Microsoft YaHei;font-size:18px;"><div style="position:relative;">  
　　<img src="loading.gif" />  
　　<div style="position:absolute; z-index:2; left:10px; top:10px">添加文字...添加文字...添加文字...</div>  
</div></span>

实例：

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html lang="en">
<head>
<title>领导首页</title>
<jsp:include page="/jsp/part/common-includecss-top.jsp"></jsp:include>
<link href="${baseURL}/css/client/leaderHome/leaderHome.css" rel="stylesheet" />
</head>
<body style="background-color:#333;">
	<div class="content">
	 	<div class="sysName">
	 		<font class="sysFont">网络安全动态数据库</font>
	 	</div>
	 	<div class="worldCountry1">
			<a href="${baseURL}/client/Worldcountry.action">
				<div class="worldCountry">
					<font class="worldCountry-title"><strong>世界各国</strong></font>
					<p class="worldCountry-desc">掌握国内外网络安全动态</p>
				</div>
				<img src="${baseURL}/images/client/index/dq.png" class="worldCountry-img" />
				<img src="${baseURL}/images/client/index/bghome.png" class="worldCountry-bkgd"/>
			</a>
		</div>
		<div class="fieldTrack1">
			<a href="${baseURL}/client/FieldTrack.action">
				<div class="fieldTrack" >
					<font class="fieldTrack-title"><strong>专题跟踪</strong></font>
					<p class="fieldTrack-desc">跟踪分析网络安全热点事件</p>
				</div>
				<img src="${baseURL}/images/client/index/ly.png" class="fieldTrack-img" />
				<img src="${baseURL}/images/client/index/bghome.png" class="fieldTrack-bkgd" />
			</a>
		</div>
		<div class="background-flash">
			<embed src="${baseURL}/images/client/index/leaderBG.swf" width="100%" height="674" wmode="transparent">
		</div>
	</div>
	<!-- jquery -->
	<script src="${baseURL}/js/jquery.min.js"></script>
	<!-- Bootstrap core JavaScript -->
	<script src="${baseURL}/js/bootstrap.min.js"></script>
	<script src="${baseURL}/js/public.debug.js"></script>
	<script src="${baseURL}/js/plugins.js"></script>
	<script src="${baseURL}/js/tab.js"></script>
	<script src="${baseURL}/js/modal.js"></script>
	<script src="${baseURL}/js/client/message/js-messagemarkread-support.js"></script>
	<script src="${baseURL}/js/scrolltopcontrol.js"></script>
	<script src="${baseURL}/js/client/js-quick-tool.js"></script>
	<script src="${baseURL}/js/client/index/index.js"></script>
	<script src="${baseURL}/js/client/js-reportItem-support.js"></script>
</body>
</html>