标签：str image 说话 asc info 读书 component img dao
html核心代码：
<div id="book">
<div class="header">
<h2 class="h2">书影音</h2>
<div class="imgs">
<img class="s1"src="./images/search.jpg" />
<img class="s2"src="./images/info.jpg" />
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<navheader>
</navheader>
<booklist title="新书速递">
<ul slot="bookcontent" class="bookt book-container">
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/1好好学习.jpg" alt="好好学习" />好好学习
</a>
<div class="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/2从行动开始.jpg" alt="从行动开始" />从行动开始
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.2">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.3</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/3请停止无效努力.jpg" alt="请停止无效努力" />请停止无效努力
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.6">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/4结构思考力.jpg" alt="结构思考力" />结构思考力
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.6">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/5微习惯.jpg" alt="微习惯" />微习惯
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.8">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
</span>
<span>9.5</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/6让未来现在就来.jpg" alt="让未来现在就来" />让未来现在就来
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.1">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.3</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/7成功心理学.jpg" alt="成功心理学" />成功心理学
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/8内向者沟通圣经.jpg" alt="内向者沟通圣经" />内向者沟通圣经
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/9星星上的人.jpg" alt="星星上的人" />星星上的人
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/10彩色的中国.jpg" alt="彩色的中国" />彩色的中国
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
</ul>
</booklist>
<div class="xuanchuan">
<a href="https://book.douban.com"><img class="xc" src="./images/zhounianqing.jpg" />
逛豆瓣，一站式拥有美好生活
</a>
</div>
<booklist title="最受关注的虚构类图书">
<ul slot="bookcontent" class="bookt">
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/11看见看不见.jpg" alt="看见看不见" />看见看不见
</a>
<div class="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/12过日子.jpg" alt="过日子" />过日子
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.2">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.3</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/13你远比想象中强大.jpg" alt="你远比想象中强大" />你远比想象中强大
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.6">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/14黑骏马.jpg" alt="黑骏马" />黑骏马
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.6">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/15山知道.jpg" alt="山知道" />山知道
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.8">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
</span>
<span>9.5</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/16世界的凛冬.jpg" alt="世界的凛冬" />世界的凛冬
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.1">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.3</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/17散步去.jpg" alt="散步去" />散步去
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/18方向.jpg" alt="方向" />方向
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/19呼吸课.jpg" alt="呼吸课" />呼吸课
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/20地下铁道.jpg" alt="地下铁道" />地下铁道
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
</ul>
</booklist>
<booklist title="最受关注的非虚构类图书">
<ul slot="bookcontent" class="bookt">
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/1好好学习.jpg" alt="好好学习" />好好学习
</a>
<div class="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/2从行动开始.jpg" alt="从行动开始" />从行动开始
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.2">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.3</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/3请停止无效努力.jpg" alt="请停止无效努力" />请停止无效努力
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.6">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/4结构思考力.jpg" alt="结构思考力" />结构思考力
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.6">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/5微习惯.jpg" alt="微习惯" />微习惯
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.8">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
</span>
<span>9.5</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/6让未来现在就来.jpg" alt="让未来现在就来" />让未来现在就来
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.1">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.3</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/7成功心理学.jpg" alt="成功心理学" />成功心理学
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/8内向者沟通圣经.jpg" alt="内向者沟通圣经" />内向者沟通圣经
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/9星星上的人.jpg" alt="星星上的人" />星星上的人
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/10彩色的中国.jpg" alt="彩色的中国" />彩色的中国
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
</ul>
</booklist>
<booklist title="图书资讯">
<template slot="bookcontent">
<div class="des">
<a href="https://book.douban.com/">
<h4>生命的真相:一只价值4万元的小白鼠是如何被打造的</h4>
<p>一只小鼠价值几何？根据某宝标价，实验小白鼠每只1.5元，呆萌的小仓鼠9.9包邮，圆滚滚的可爱龙猫也不超过千元。它动作矫健、体态匀称，没有米老鼠名气那么大。。。</p>
</a>
</div>
<div class="side"><img src="./images/tianjiawu.png" /></div>
</template>
</booklist>
<booklist title="畅销图书榜">
<ul slot="bookcontent" class="bookt">
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/00物尽其用.jpg" alt="物尽其用" />物尽其用
</a>
<div class="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/01恋情的终结.jpg" alt="恋情的终结" />恋情的终结
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.2">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.3</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/02村上春树.jpg" alt="村上春树" />村上春树
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.6">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/03别样的色彩.jpg" alt="别样的色彩" />别样的色彩
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.6">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/04困窘的潇洒.jpg" alt="困窘的潇洒" />困窘的潇洒
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.8">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
</span>
<span>9.5</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/05斜阳.jpg" alt="斜阳" />斜阳
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.1">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.3</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/06此生是我吗.jpg" alt="此生是我吗" />此生是我吗
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/07未来简史.jpg" alt="未来简史" />未来简史
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/08我心深处.jpg" alt="我心深处" />我心深处
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/09好好说话.jpg" alt="好好说话" />好好说话
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
</ul>
</booklist>
<booklist title="你可能感兴趣">
<ul slot="bookcontent" class="bookt">
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/1好好学习.jpg" alt="好好学习" />好好学习
</a>
<div class="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/2从行动开始.jpg" alt="从行动开始" />从行动开始
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.2">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.3</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/3请停止无效努力.jpg" alt="请停止无效努力" />请停止无效努力
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.6">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/4结构思考力.jpg" alt="结构思考力" />结构思考力
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.6">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/5微习惯.jpg" alt="微习惯" />微习惯
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.8">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
</span>
<span>9.5</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/6让未来现在就来.jpg" alt="让未来现在就来" /> 让未来现在就来
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.1">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.3</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/7成功心理学.jpg" alt="成功心理学" />成功心理学
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/8内向者沟通圣经.jpg" alt="内向者沟通圣经" />内向者沟通圣经
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/9星星上的人.jpg" alt="星星上的人" />星星上的人
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
<li class="newbook">
<a href="https://book.douban.com">
<img src="./images/10彩色的中国.jpg" alt="彩色的中国" />彩色的中国
</a>
<div claass="item-rating">
<div class="rank">
<span class="rating-stars" data-rating="4.5">
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-full"></span>
<span class="rating-star rating-star-small-gray"></span>
</span>
<span>8.9</span>
</div>
</div>
</li>
</ul>
</booklist>
<selectbook tit="挑选图书">
</selectbook>
</div>
<script src="book.js" type="text/javascript">
</script>
js核心代码：
Vue.component(‘booklist‘,{
props:{
type:{
type:String,
default:"info"
},
title:{
type:String,
default:‘新书速递‘
}
},
template:`
<div class="book">
<div class="book-header">
<h3 class="h3">{{title}}</h3>
<a class="more" href="https://book.douban.com">更多</a>
</div>
<div class="book-content">
<div class="bookdes">
<slot name="bookcontent">
<a><img src="./images/1好好学习.jpg" alt="好好学习" /></a>
</slot>
</div>
</div>
</div>`,
});
Vue.component(‘navheader‘,{
template:`
<ul class="navv">
<slot name="navv">
<li class="daolist movie">电影</li>
<li class="daolist read">读书</li>
<li class="daolist tv">电视</li>
<li class="daolist tc">同城</li>
<li class="daolist music">音乐</li>
</slot>
</ul>`
});
Vue.component(‘selectbook‘,{
props:{
type:{
type:String,
default:"info"
},
tit:{
type:String,
default:‘选图书‘
}
},
template:`
<ul class="slist">
<slot name="sslist">
<h3>{{tit}}</h3>
<a href="https://www.baidu.com/"><li class="selelist gs">故事</li></a>
<a href="https://www.baidu.com/"><li class="selelist aq">爱情</li></a>
<a href="https://www.baidu.com/"><li class="selelist ls">历史</li></a>
<a href="https://www.baidu.com/"><li class="selelist qc">青春</li></a>
<a href="https://www.baidu.com/"><li class="selelist ll">励志</li></a>
<a href="https://www.baidu.com/"><li class="selelist sb">随笔</li></a>
<a href="https://www.baidu.com/"><li class="selelist lx">旅行</li></a>
<a href="https://www.baidu.com/"><li class="selelist hx">幻想</li></a>
<a href="https://www.baidu.com/"><li class="selelist kh">科幻</li></a>
<a href="https://www.baidu.com/"><li class="selelist zj">传记</li></a>
<a href="https://www.baidu.com/"><li class="selelist tz">童真</li></a>
</slot>
</ul>`
})
new Vue({
el:"#book",
})
标签：str image 说话 asc info 读书 component img dao
原文地址：http://www.cnblogs.com/haimengqingyuan/p/6935318.html
