html仿今日头条数据列表

最新推荐文章于 2024-08-03 23:46:44 发布

friendan

最新推荐文章于 2024-08-03 23:46:44 发布

阅读量1w

点赞数 1

分类专栏： html 文章标签：仿站今日头条列表 html css

本文链接：https://blog.csdn.net/friendan/article/details/51250489

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

例子代码下载：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>