实现下图html复现
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*清除默认样式*/
body,ul,dl,dl,dd{
margin:0;padding:0;font-family:"宋体";}
li{
list-style:none;}
a{
text-decoration:none;}
/*清除图片样式与间隙*/
img{
border:none;vertical-align:top}
/*清除浮动*/
.clear{
zoom:1;}
.clear:after{
content:"";display:block;clear:both;}
/*样式编写*/
.wrap{
width:460px;margin:30px auto;padding:12px 8px 0 7px;background:url(bg.gif) no-repeat 220px 0;}
.left{
width:212px;float:left;}
.lefttop .pic{
width: 124px;background:url(picBg.gif) no-repeat right 0;padding-right:5px;
float:left;}
/*a标签为内嵌元素，包不住图片，所以加display:block变为块元素包住图片*/
.lefttop .pic a{
border:1px solid #c3cfd9;display:block;padding:3px;}
.lefttop dl{
float:left; width:60px;padding-left:5px;font-size:12px; line-height:20px;color:cadetblue;}
.leftbottom {
padding-top: 10px;
color: aquamarine;
}
.leftbottom li{
font-size:12px;line-height:20px;padding-left:10px;background:url(liBg.gif) no-repeat 0 7px;}
.leftbottom li a{
color:forestgreen;}
.right{
width:220px;float:right; }
.right li {
width:100px;float:left;padding-left:10px; }
.right li a{
display:block;}
.right li img{
border:1px solid #c3cfd9;padding:3px;}
/*strong加display:block支持宽高*/
.right strong{
display:block;font-size:12px;line-height:24px;padding-top:3px;text-align:center;}
</style>
</head>
<body>
<div class="wrap clear">
<div class="left">
<div class="lefttop clear">
<div class="pic">
<a href="#">
<img src="59.png" width="115" alt="Alternate Text" />
</a>
</div>
<dl>
<dt><a href="#">落日</a></dt>
<dd>拍摄：姜伟</dd>
<dd>后期：之江</dd>
</dl>
</div>
<ul class="leftbottom clear">
<li><a href="#">秦时明月汉时关</a> </li>
<li>
<a href="#" >但使龙城飞将在</a>
<a href="#">众里寻他千百度</a>
</li>
</ul>
</div>
<ul class="right">
<li>
<a href="#">
<img src="27.png" alt="Alternate Text" width="100" height="100" />
<strong>但愿人长久</strong>
</a>
</li>
<li>
<a href="#">
<img src="54.png" alt="Alternate Text" width="100" height="100"/>
<strong>千里共婵娟</strong>
</a>
</li>
</ul>
</div>
</body>
</html>