Tip: you can modify some code before running
<!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></title><link href="css/index.css" rel="stylesheet" type="text/css" media="screen" /><style type="text/css">* {Margin: 0; padding: 0; font: normal 12px ;}. wrapper {position: absolute; left: 20%; top: 20%; width: 300px; border: 1px solid # fdd78d; background: # ffecc6; padding: 5px ;} /* normal status */dl {clear: both; margin: 5px 0;} dl dt {display: none;} dl dd {} dl dd strong {float: left; margin-right: 5px;} dl dd div {float: left; width: 270px; list-style-type: none;} dl dd div h4 {clear: both; font-weight: normal} dl dd div h4 a {float: left; color: #795601; font-size: 12px; font-weight: normal; text-decoration: none ;} dl dd div h4 a: hover {color: # f00; text-decoration: underline;} dl dd div h4 span {float: right; width: 75px ;} dl dd div p {display: none;}/* cursor-over status */dl. over {clear: both; height: 55px; background: # fdc559; padding: 5px;} dl. over dt {float: right; display: block;} dl. over dt img {border: 1px solid # ccc; padding: 1px; background: # fff;} dl. over dd {float: left;} dl. over dd strong {font-size: 28px; color: # fa3081; vertical-align: top;} dl. over dd div {float: left; width: 195px;} dl. over dd div h4 {clear: both; font-weight: normal} dl. over dd div h4 a {color: # b34408;} dl. over dd div h4 a: hover {color: # f00; text-decoration: underline;} dl. over dd div h4 span {float: right;} dl. over dd div p {clear: both; display: block; margin-top: 5px ;}</style><script language="javascript">Window. onload = function () {var dl = document. getElementsByTagName ("dl"); if (dl. length <1) return false; for (var I = 0; I<dl.length;i++){//初始化，让第一个类为overif(dl[i].className.indexOf("over")==-1){dl[0].className="over";}//遍历循环，模拟:hover伪类dl[i].onmouseover=function(){for(var j=0;j<dl.length;j++){dl[j].className="";}this.className="over";}}}</script></pead><body><div class="wrapper"><dl><dt></dt><dd><strong>01</strong><div><p>Popularity: 19045 a day of success</p><p>Guangzhou Baiyun District...</p></div></dd></dl><dl><dt></dt><dd><strong>02</strong><div><p>Popularity: 34534</p><p>Guangzhou Baiyun District...</p></div></dd></dl><dl><dt></dt><dd><strong>03</strong><div><p>Popularity: 79789 RMB for purchasing a house</p><p>Guangzhou Baiyun District...</p></div></dd></dl><dl><dt></dt><dd><strong>04</strong><div><p>Popularity: 4323 RMB for purchasing a house</p><p>Guangzhou Baiyun District...</p></div></dd></dl><dl><dt></dt><dd><strong>05</strong><div><p>Economic popularity of purchasing a house: 6456</p><p>Guangzhou Baiyun District...</p></div></dd></dl><dl><dt></dt><dd><strong>06</strong><div><p>Popularity: 433534 RMB for purchasing a house</p><p>Guangzhou Baiyun District...</p></div></dd></dl><dl><dt></dt><dd><strong>07</strong><div><p>Popularity: 09808 RMB for purchasing a house</p><p>Guangzhou Baiyun District...</p></div></dd></dl><dl><dt></dt><dd><strong>08</strong><div><p>Popularity: 3565 RMB for purchasing a house</p><p>Guangzhou Baiyun District...</p></div></dd></dl><dl><dt></dt><dd><strong>09</strong><div><p>Popularity: 1231 RMB for purchasing a house</p><p>Guangzhou Baiyun District...</p></div></dd></dl><dl><dt></dt><dd><strong>10</strong><div><p>Popularity: 19045 RMB for purchasing a house</p><p>Guangzhou Baiyun District...</p></div></dd></dl></div></body></ptml>
Tip: you can modify some code before running
