<!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>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>無標(biāo)題文檔</title>
<style?type="text/css">
*{
padding:0;margin:0;
}
.demo
{
width:1000px;
height:180px;
margin:10px?auto;
}
.demo?ul?li,dl,dd,dt
{
list-style-type:none;
}
.demo?ul?li
{
float:left;
margin:10px?0?0?7px;
position:relative;
}
.demo?ul?li?div
{
position:?absolute;
top:?0;
left:?100%;
z-index:?22;
background:?#ccc;
width:?305px;
height:?170px;
border:?2px?solid?#F00;
display:none;
}
.demo?ul?li?a
{
display:block;
border:2px?solid?#ccc;
}
ul?li?div?dl?dt{
text-align:center;
}
ul?li?div?dl?dd{
text-indent:2em;
}
</style>
</head>
<body>
<div?class="demo">
?<ul?class="orginImg"?id="orginImg"?>
??<li>
????<a?href="#"><img?src="單行側(cè)位展示效果/1.jpg"?/></a>
<div>
?<dl>
??<dt>學(xué)會html5?絕對的屌絲逆襲</dt>
??<dd>本課程由淺入深，逐步推進，以示例為主線，詳細完整地介紹HTML5的新功能與新特征</dd>
?</dl>
</div>
??</li>
??<li>
???<a?href="#"><img?src="單行側(cè)位展示效果/2.jpg"?/></a>
???<div>
?????<dl>
???<dt>圓角水晶按鈕制作</dt>
???<dd>網(wǎng)頁中的圓角按鈕和寬度自適應(yīng)按鈕就這么輕松制作</dd>
?</dl>
???</div>
??</li>
??<li>
??<a?href="#"><img?src="單行側(cè)位展示效果/3.jpg"?/></a>
??<div>
???<dl>
?????<dt>導(dǎo)航條菜單的制作</dt>
?????<dd>30分鐘教你輕松制作出各種形式的網(wǎng)站導(dǎo)航條菜單</dd>
???</dl>
??</div>
??</li>
?</ul>
?
</div>
</body>
</html>
2016-12-12
給li設(shè)置寬高就行了
2016-10-19
<!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> <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/> <title>無標(biāo)題文檔</title> <style?type="text/css"> *{ padding:0;margin:0; } .demo { width:1000px; height:400px; margin:10px?auto; } .demo?ul?li,dl,dd,dt { list-style-type:none; } .demo?ul?li { float:left; margin:10px?0?0?7px; position:relative; } .demo?ul?li?div { position:?absolute; top:?0; left:?100%; z-index:?22; background:?#ccc; width:?305px; height:?170px; border:?2px?solid?#F00; display:none; } .demo?ul?li?a { display:block; border:2px?solid?#ccc; } .orginImg?li?div?dl?dt{ text-align:center; } .orginImg?li?div?dl?dd{ text-indent:2em; } </style> </head> <body> <div?class="demo"> ????<ul?class="clearfix"?id="orginImg"?> ????????<li>? ???????????<a???/></a>? ???????????<div>? ??????????????<dl> ????????????????<dt>學(xué)會html5?絕對的屌絲逆襲</dt> ????????????????<dd>本課程由淺入深，逐步推進，以示例為主線，詳細完整地介紹HTML5的新功能與新特征</dd> ??????????????</dl> ???????????</div>? ????????</li> ????????<li>? ???????????<a???/></a>? ???????????<div> ???????????????<dl> ???????????????????<dt>圓角水晶按鈕制作</dt> ???????????????????<dd>網(wǎng)頁中的圓角按鈕和寬度自適應(yīng)按鈕就這么輕松制作</dd> ???????????????</dl> ???????????</div>? ????????</li> ????????<li>? ???????????<a???/></a>? ???????????<div>? ??????????????<dl> ???????????????????<dt>導(dǎo)航條菜單的制作</dt> ???????????????????<dd>30分鐘教你輕松制作出各種形式的網(wǎng)站導(dǎo)航條菜單</dd> ???????????????</dl> ?????????</div>? ???????</li> ???????<li>? ???????????<a???/></a>? ???????????<div>? ??????????????<dl> ????????????????<dt>tab頁面切換效果</dt> ????????????????<dd>tab切換風(fēng)格多樣，但實現(xiàn)思路大同小異。教程由淺入深教你實現(xiàn)簡潔思路的選項卡</dd> ??????????????</dl> ???????????</div>? ????????</li> ????????<li>? ???????????<a???/></a>? ???????????<div> ???????????????<dl> ???????????????????<dt>信息列表制作</dt> ???????????????????<dd>讓你玩轉(zhuǎn)信息列表制作</dd> ???????????????</dl> ???????????</div>? ????????</li> ????????<li>? ???????????<a???/></a>? ???????????<div>? ??????????????<dl> ???????????????????<dt>JavaScript基礎(chǔ)課程</dt> ???????????????????<dd>JavaScript帶你進入網(wǎng)頁動態(tài)交互世界</dd> ???????????????</dl> ?????????</div>? ???????</li> ????</ul> </div> </body> </html>上面的代碼粘錯了，代碼是這個。