用CSS设置的4种样式的图片说明文本之04

最新推荐文章于 2022-06-23 20:41:39 发布

iteye_4537

最新推荐文章于 2022-06-23 20:41:39 发布

阅读量215

点赞数

文章标签： xhtml

偏移的说明文本

1、效果图

2、HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>  <meta http-equiv=content-type content="text/html; charset=gb2312">  <link rel="stylesheet" href="captions-3.css" type="text/css" media="screen" /> <title>图片说明文字</title>  </head> <body> <div class="captioned_photo"> <img src="images/captions-3.jpg" alt="Cat Vase!" /> <p><span><strong>The Cat Vase:</strong> The cats are cute, white, with gold-trimmed ears and tails.</span></p> </div> </body> </html>

3、CSS代码

/*CSS STYLE SHEET FOR [captions-3.html] Created by [Serein_Chan] Email: [Serein_Chan@foxmail.com] Author Blog:[http://blog.csdn.net/cxwen78] */ /*注释 */ /*body的样式 */ body { margin: 0; padding: 0; background-color: #fff; font: 62.5% Verdana, sans-serif; color: #4d4d4d; } p { margin: 0; padding: 0 0 1em 0; } .captioned_photo { position: relative; width: 242px;/*下面的图片样式设置了1px的边框，所以多出了2px宽度*/ text-align: left; display: block; margin: .5em 0 .5em 1.25em; padding: 0; border: 3px solid #333; line-height: 1em; } .captioned_photo p { position: absolute; bottom: 14px; left: 0; display: block; width: 240px; /* 这是为匹配图片而设置的宽度 */ margin: 0 0 0 1.5em;/*设置标题向左的偏移量*/ padding: 0; border: 1px solid #666; border-right-color: #000; border-bottom-color: #000; background-color: #111; font: .9em Verdana, sans-serif; letter-spacing:.05em; color: #fff; } .captioned_photo p span { display: block; padding: .75em; } .captioned_photo img { margin: 0; padding: 0; display: block; border:1px solid #fff; }

参考：《The Art & Science of CSS》