                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /网页简单布局之结构与表现原则

预览结果完全和老师的不一样

我只想说完全按照老师的代码写的，为是么结果不一样？？使浏览器的问题？？？

FEBoy

2015-12-30

源自：网页简单布局之结构与表现原则 2-1

关注问题我要回答

864

操作

收起

4 回答

李晓健回答被采纳 +3 积分
2015-12-30

<style type="text/css">
    body,ul,ol,h1,h2,h3,h4,h5,h6,form,p,hr{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma";color:#666;}
    ul,ol{list-style:none;}

    .demo{width:600px;position:relative;}
    /**这行demo后面有一个空格***/
    .demo .left{width:100px;float:left;}
    .tp{margin-left:20px;}
    /**这行demo后面有一个空格***/
    .demo .right{width:458px;padding:20px;float:right;background:#9cf;border:1px solid #ccc;}
    /**这行demo后面有一个空格***/
    .demo .right p{font-size:12px;line-height:25px;}
</style>

看注释

1 回复有任何疑惑可以回复我~

收起回答

FEBoy 提问者

噢，原来是这样，谢谢了啊。麻烦再问下为是么要这样写，还有比如给<p>标签加样式，为是么不直接写为p{font-size:12px;line-height:25px;},而是前面加上.demo .right呢？

2015-12-30 回复有任何疑惑可以回复我~

李晓健回复 FEBoy 提问者

加空格就是子选择器，就是选择这个标签里面的标签，没有空格就是当前标签

2015-12-30 回复有任何疑惑可以回复我~

FEBoy 提问者回复李晓健

想起来了，应该是包含选择器，不是子选择器。再次感谢！

2015-12-30 回复有任何疑惑可以回复我~

FEBoy 提问者
2015-12-30

<!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>Test</title>
<style type="text/css">
body,ul,ol,h1,h2,h3,h4,h5,h6,form,p,hr{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma";color:#666;}
ul,ol{list-style:none;}

.demo{width:600px;position:relative;}
.demo.left{width:100px;float:left;}
.tp{margin-left:20px;}
.demo.right{width:458px;padding:20px;float:right;background:#9cf;border:1px solid #ccc;}
.demo.right p{font-size:12px;line-height:25px;}
</style>
</head>

<body>
<div class="demo">
  <div class="left">
   <img class="tp" src="head01.jpg" />
  </div>
  <div class="right">
   <h6>樱桃小丸子</h6>
   <p>小雪封地，大雪封河，大雪节气过后，小山村被厚厚的积雪覆盖， 出山的路被冰雪封堵了，家家户户老早就备足了柴米油盐酱醋茶，其中白薯是冬季山民的主食，而小米，玉米，高粱米则是稀缺的"细粮"。成长在山里的孩子，对白薯的记忆是最深刻的，儿时山里普遍穷，白薯是山民的主要口粮之一，长期吃白薯，难免吃顶了，有时我们不爱吃，大人们唬着脸说，不吃白薯的孩子长不了大个儿，于是，我们一群孩子就抢着吃了。</p>
    <span>10分钟前</span>
  </div>
</div>
</body>
</html>