使用html写一个图文介绍框，可扩展的，像豆瓣这样

随便写了一下结构，细节你自己再调整，如图：

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}

《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多例。

---