随便写了一下结构，细节你自己再调整，如图：
html如下：
<div class="demo"><h1>西虹市首富 <span>(2018)</span></h1>
<dl>
<dt><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529206747.webp" ></dt>
<dd>导演: 闫非 / 彭大魔</dd>
<dd>编剧: 闫非 / 彭大魔 / 林炳宝</dd>
<dd>主演: 沈腾 / 宋芸桦 / 张一鸣 / 张晨光 / 常远</dd>
<dd>类型: 喜剧</dd>
<dd>制片国家/地区: 中国大陆</dd>
<dd>语言: 汉语普通话</dd>
<dd>上映日期: 2018-07-27(中国大陆)</dd>
<dd>片长: 118分钟</dd>
<dd>又名: 资本接班人 / Hello Mr. Billionaire</dd>
</dl>
</div>
css如下：
*{margin: 0padding: 0font-size: 14px}.demo{width: 500pxpadding: 20pxmargin: 20pxborder: 1px solid #ddd}
.demo h1{font-size: 26pxline-height: 1.6emmargin-bottom: 10px}
.demo h1 span{font-size: 26pxcolor: #999}
.demo dl{max-width: 333pxlist-style: noneposition: relativepadding-left: 150px}
.demo dt{position: absoluteleft: 0top: 0}
.demo dt img{max-width: 135px}
.demo dd{font-size: 12pxline-height: 1.4emmargin-bottom: 5px}
豆瓣API提供了一种简单的方式可以直接在HTML页面中使用API，下面给出这种使用方式的简单示例。
首先我们需要在HTML页面中做如下script标签：<script type="text/javascript" src=" />
然后就可以调用豆瓣API，其中通过定义callback函数来操作返回的JSON数据。
此外，豆瓣也提供了解析函数来帮助你更容易地使用JSON格式的返回值。使用豆瓣提供的解析函数，你需要在页面中添加script标签：<script type="text/javascript" src="。
接下来你就可以使用豆瓣提供的解析函数来处理返回值，例如：var book = DOUBAN.parseSubject(result)。
解析函数返回更容易使用的javascript对象，你可以这样得到书的封面图片：book.link.image
HTML页面使用API获得ID为xxxxx电影的信息并展示在页面上（注意将{yourapikey}替换为你的API Key）。
注：实现上，豆瓣API使用 JSONP 方式来支持跨域调用API 因此你也可以使用自己熟悉的javascript库来调用JSONP风格的豆瓣API. 此时，你需要将alt设置为xd同时提供callback参数。另外部份的豆瓣功能及操作可登陆下面的网站/客户端：
《HTML、CSS、JavaScript网页制作从入门到精通》（刘西杰）电子书网盘下载免费在线阅读
资源链接：
链接：https://pan.baidu.com/s/1d2DhZZj0GBp-1_sO5SFReQ
提取码：vge2书名：HTML、CSS、JavaScript网页制作从入门到精通
作者：刘西杰
豆瓣评分：6.6
出版社：人民邮电出版社
出版年份：2013-1-1
页数：450
内容简介：
《HTML\CSS\JavaScript网页制作从入门到精通》共分为18章和4个附录，重点介绍使用HTML进行网页制作的方方面面，同时讲解了目前流行的Web标准与CSS网页布局实例，以及基于JavaScript语言的网页特效制作。为了便于读者学习，附录中汇集了经过作者精心整理的网页制作技巧60多例。
