三個div并排顯示：方法一：
<!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=utf-8" />
<title>好久不見</title>
<style>
div{
width:100px;
height:100px;
display:inline;
background:blue;
border:1px solid blue;
}
</style>
</head>
<body>
<div>56</div>
<div>12</div>
<div>34</div>
</body>
</html>
方法二：
<!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=utf-8" />
<title>好久不見</title>
<style>
div{
width:100px;
height:100px;
display:inline-block;
background:blue;
border:1px solid blue;
}
</style>
</head>
<body>
<div>56</div>
<div>12</div>
<div>34</div>
</body>
</html>
方法三：
<!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=utf-8" />
<title>好久不見</title>
<style>
div{
width:100px;
height:100px;
float:left;
background:blue;
border:1px solid blue;
margin:20px;
}
</style>
</head>
<body>
<div>56</div>
<div>12</div>
<div>34</div>
</body>
</html>
騰訊大學圖片代碼：
<!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=utf-8" />
<title>新年快樂</title>
<style>
body{
margin:0;
padding:0;
}
.box{
width:266px;
height:1165px;
}
.head{
background:url(shiyi.png) no-repeat 20px 0px;
font:bold 20px Verdana, Geneva, sans-serif;
padding-left:50px;
display:inline-block;
}/*標題排行榜的樣式
與及top top在此處我用背景圖片插入*/
.title-yi{
border-top:solid #cccccc 1px;
border-left:solid #cccccc 1px;
border-right:solid #cccccc 1px;
font:bold 15px Verdana, Geneva, sans-serif;
padding:10px 26px 10px 26px;
float:left;
margin-left:20px;
}/*標題最熱排行的樣式*/
.title-er{
border-bottom:solid #cccccc 1px;
border-left:solid #cccccc 1px;
opacity:0.5;
font:bold 15px Verdana, Geneva, sans-serif;
float:left;
padding:10px 26px 10px 26px;
}/*標題新課上線的樣式*/
img{
padding-top:20px;
padding-left:20px;
}/*幾張圖片所處的位置*/
dl{
font: 12px/30px Verdana, Geneva, sans-serif;
}
a{
color:black;
text-decoration:none;}
.lianjie-yi{
font:12px/30px Verdana, Geneva, sans-serif;
background:url(liu.png) no-repeat 20px 3px;
padding-left:50px;
}
.lianjie-er{
background:url(qi.png) no-repeat 20px 3px;
padding-left:50px;
}
.lianjie-san{
background:url(ba.png) no-repeat 20px 3px;
padding-left:50px;
}
.lianjie-si{
background:url(jiu.png) no-repeat 20px 3px;
padding-left:50px;
}
.lianjie-wu{
background:url(shi.png) no-repeat 20px 3px;
padding-left:50px;
}/*五個圖標我以背景圖片的形式插入
以上五個為五句話之前的圖標的具體樣式*/
</style>
</head>
<body>
<div class="box">
<h2 class="head">排行榜</h2></br>
<span class="title-yi"><a href="#">最熱排行</a></span>
<span class="title-er"><a href="#">新課上線</a></span>
<a href="#" target="_blank"></a></img>
<a href="#" target="_blank"></a></img>
<a href="#" target="_blank"></a></img>
<a href="#" target="_blank"></a></img>
<a href="#" target="_blank"></a></img><!--五張圖片的插入形式-->
<dl>
<dt><div class="lianjie-yi"><a href="#" target="_blank">張小龍：小程序正式發布，開....</a></div></dt>
<dt><div class="lianjie-er"><a href="#" target="_blank">馬化騰：通向互聯網的七....</a></div></dt>
<dt><div class="lianjie-san"><a href="#" target="_blank">馬化騰：騰訊現在只做兩件事</a></div></dt>
<dt><div class="lianjie-si" ><a href="#" target="_blank">使用UE4制作VR內容的優化</a></div></dt>
<dt><div class="lianjie-wu"><a href="#">何凌南：謠言在想什么</a></div></dt>
</dl><!--圖片下方的幾個鏈接-->
</div>
</body>
</html>
