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

html-css013

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

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

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