CSS layout of a beautiful slider_Typical special effects

Take a good look at the code, I believe it will help you a lot.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS layout for a beautiful slider</title> <style type="text/css"> dl { margin: 0; padding: 0; } dt { position: relative; clear: both; display: block; float: left; width: 104px; height: 20px; line-height: 20px; margin-right: 17px; font-size: .75em; text-align: right; } dd { position: relative; display: block; float: left; width: 197px; height: 20px; margin: 0 0 15px; background: url("/upload/20091006163826471.jpg"); } * html dd { float: none; } dd div { position: relative; background: url("/upload/20091006163826679.jpg"); height: 20px; width: 75%; text-align:right; } dd div strong { position: absolute; right: -5px; top: -2px; display: block; background: url("/upload/20091006163826537.gif"); height: 24px; width: 9px; text-align: left; text-indent: -9999px; overflow: hidden; } </style> <dl> <dt>Life satisfaction: </dt> <dd> <div style="width:95%;"><strong>63%</strong></div> </dd> <dt>Job Satisfaction: </dt> <dd> <div style="width:55%;"><strong>38%</strong></div> </dd> <dt>Love satisfaction: </dt> <dd> <div style="width:75%;"><strong>86%</strong></div> </dd> </dl>