手记

微博列表案例的css问题,代码一样,为何结果不一样?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,p,h1,h2,h3,h4,h5,h6,form,ul,ol,hr{margin:0;padding:0;font:14px/1.5;normal,"Arial","sans-serif","微软雅黑","宋体","Tahoma";color:#666}
ul,ol{list-style:none}

.demo01{width:600px;}
.demo01.left{width:100px;float:left;}
.demo01.right{width:500px;float:right;}

</style>
</head>

<body>
<div class="demo01">
<div class="left">
<img src="images/head01.jpg" />
</div>

<div class="right">
<span>10分钟前</span>
<h6>樱桃小丸子</h6>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点,2005年4月正式批准运营的远程教育公共服务体系,为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
</div>
</div>

</body>
</html>

2人推荐
随时随地看视频
慕课网APP

热门评论

.demo01.left{width:100px;float:left;}
.demo01.right{width:500px;float:right;}
替换成下面的代码即可:
.demo01 .left{width:100px;float:left;} 
.demo01 .right{width:500px;float:right;}

知道原因了吗?

查看全部评论