首页 > 代码库 > 仿豆瓣app代码
仿豆瓣app代码
html核心代码：
<div id="book"> <div class="header"> <h2 class="h2">书影音</h2> <div class="imgs"> <img class="s1"src="http://www.mamicode.com/images/search.jpg" /> <img class="s2"src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/images/zhounianqing.jpg" /> 逛豆瓣，一站式拥有美好生活 </a> </div> <booklist title="最受关注的虚构类图书"> <ul slot="bookcontent" class="bookt"> <li class="newbook"> <a href="https://book.douban.com"> <img src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/images/tianjiawu.png" /></div> </template> </booklist> <booklist title="畅销图书榜"> <ul slot="bookcontent" class="bookt"> <li class="newbook"> <a href="https://book.douban.com"> <img src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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", })仿豆瓣app代码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。