Take a good look at the code, I believe it will help you a lot.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>css layout a nice 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> </pead> <body> <dl> <dt> Life satisfaction:</dt> <dd> <div ><stron G>63%</strong></div> </dd> <dt> Job satisfaction:</dt> <dd> <div ><strong>38 %</strong></div> </dd> <dt> Love satisfaction:</dt> <dd> <div ><strong>86%</ strong></div> </dd> </dl> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
