html仿今日头条数据列表
生活随笔
收集整理的這篇文章主要介紹了
html仿今日头条数据列表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
例子代碼下載：http://download.csdn.net/detail/friendan/9503019
效果截圖：
收獲如下：
1、使用Respond.js解決了Bootstrap3柵格系統不兼容IE8的問題。
2、知道了如何讓兩個div盒子完美的左右相鄰。
------------------------------------------------------------------
碰到的問題：
1、兩個div盒子都左浮動float:left后，雖然能夠達到左右相鄰的效果，
? ?但是當右邊div盒子的內容長度過長時，右邊的div盒子會自動換行，
? ?導致了兩個div不能夠左右相鄰顯示。我嘗試過使用overflow: hidden;
? ?然而并不能解決該問題。。。
解決方法：
? ? 只浮動一個div盒子即可，如左邊的div設置float:left;右邊div不浮動，設置其margin-left: 160px;即可。
? ----------------------------------------------------------------------------------------------------------------------------------------------------------------------
最后貼下html代碼：
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><meta name="renderer" content="webkit"><title>仿今日頭條列表</title><link rel="stylesheet" href=".\css\bootstrap-3.3.5-dist\css\bootstrap.min.css"><!-- bootstrap3柵格系統不支持IE8。 但是可以用以下方法解決。 --><!-- 測試respond.js時需要啟動web服務器，然后在瀏覽中瀏覽才能看到效果，直接使用瀏覽器打開xxx.html文件是看不到效果的！ --><!-- 需要啟動本地服務器（localhost），不能使用普通本地的url地址（file://xxx.html）--><!-- 參考文章：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201410745621487/ --><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]><script src="./js/html5shiv-3.7.3/dist/html5shiv.min.js"></script><script src="./js/Respond-1.4.2/dest/respond.min.js"></script><![endif]--></head><style type="text/css">p{margin: 0;padding: 0;}.data-item{border: 0;border-bottom: 1px solid #f5f6f7;/*border-bottom: 1px solid #000; */margin-top: 5px;}.data-group-text .data-group-text-title a{font-size: 18px;font-weight: bold;color: #222;margin-top: 0;}.data-group-img img{display: inline-block;width: 126px;height: 82px;margin-top: 5px;}.data-group-img + .data-group-text{ /* 加號+用于選擇兄弟元素 */margin-left: 140px;}.data-group-text-footer-right a{color: #999;margin-left: 5px;}.data-group-text-footer-left span{color: #999;font-size: 10px;}</style><body><div class="container"><div class="row"><!--S 左邊內容--><div class="col-md-2"><p>左邊</p><a href="http://toutiao.com/" target="_blank">訪問今日頭條首頁</a></div><!--E 左邊內容--><!--S 中間列表內容--><div class="col-md-8"><ul class="list-group"><li class="list-group-item data-item"><div class="data-group"><div class="data-group-text"><div class="data-group-text-title"><a href="#">梅蘭芳兒子京劇大師梅葆玖去世 享年82歲</a></div><div class="data-group-text-content"><p>京劇大師梅葆玖上午病逝，享年82歲。梅葆玖3月31日因突發支氣管痙攣，導致腦缺氧送醫院搶救。梅葆玖是1934年出生在上海，是梅蘭芳的第九個孩子。梅葆玖也是梅派藝術的傳人，目前是北京京劇院梅蘭芳京劇團的團長， 他的代表作品有《霸王別姬》...</p></div><div class="data-group-text-footer"><div class="data-group-text-footer-left pull-left"><span>手機央廣網．</span><span>314評論</span><span>．20分鐘前</span></div><div class="data-group-text-footer-right pull-right"><a href="#"><span class="glyphicon glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a><a href="#"><span class="glyphicon glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a><a href="#"><span class="glyphicon glyphicon glyphicon-share-alt" aria-hidden="true"></span></a></div><div class="clearfix"></div></div></div></div></li><li class="list-group-item data-item"><div class="data-group"><div class="data-group-img pull-left"><img src="./img/baby.jpg" /></div><div class="data-group-text"><div class="data-group-text-title"><a href="#">南寧一幼兒園1周內確診10起手足口病例，竟是因為園方...</a></div><div class="data-group-text-content"><p>121周內確診10起手足口病例幼兒園停課整頓10天4月12日，南寧明秀東路上某幼兒園一班上有一名學生在校時高燒，回家后被確診為手足口病。當時該學生家長及時通知園方...</p></div><div class="data-group-text-footer"><div class="data-group-text-footer-left pull-left"><span>南國早報．</span><span>1評論</span><span>．1小時前</span></div><div class="data-group-text-footer-right pull-right"><a href="#"><span class="glyphicon glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a><a href="#"><span class="glyphicon glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a><a href="#"><span class="glyphicon glyphicon glyphicon-share-alt" aria-hidden="true"></span></a></div><div class="clearfix"></div></div></div></div></li><li class="list-group-item data-item">item</li><li class="list-group-item data-item">item</li><li class="list-group-item data-item">item</li></ul></div><!--E 中間列表內容--><!--S 右邊內容--><div class="col-md-2">右邊</div><!--E 右邊內容--></div></div></body> </html>
總結
以上是生活随笔為你收集整理的html仿今日头条数据列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QuickTester对象，对象侦测器和
- 下一篇： 在线作图丨差异分析——ANOSIM相似性