div+css基础——8.绝对定位应用(照片签名)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>绝对定位应用(照片签名)</title>
  <meta name="keywords" content="自定义关键字"/>
  <meta name="description" content="自定义描述"/>
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  <style type="text/css">
	#image{
		position:relative;
		background-image:url(girl.png);
		width:600px;
		height:450px;
	}
	#name{
		position:absolute;
		right:30px;
		bottom:30px;
		font-size:30px;
		color:red;
		font-weight:bold;
	}
  </style>
 </head>
 <body>
	<div id="image">
		<div id="name">芙蓉姐姐</div>
	</div>
 </body>
</html>


效果截图:

posted @ 2013-05-26 16:36  魅惑之眼  阅读(219)  评论(0编辑  收藏  举报