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

难道这是DW的BUG？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<style>

.demo{width:600px; position:relative;}

.demo.left{width:100px; float:left;}

.demo.left img{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}

.demo span{position:absolute; right:20px; top:10px; font-size:12px;}

</style>

<body>

<h6>樱桃小丸子</h6>

<p>网站重构随着这个概念的出现，也带来了DIV结构的流行，因此也就出现了我们现在口头常说的 “DIV+CSS做网站”。但从这个DIV+CSS的叫法来分析，可以了解到CSS已经被大家用在了页面布局上。但一个页面不是只有控制DIV就控制了全面，还有很多其它的HTML标签，以前用table布局的页面，一样可以用CSS来控制。</p>

</div>

</body>

</html>

结果如下：

结果很明显上图按照老师的代码结果无法实现功能，下图是自己修改的后代码结果实现了功能经过核对发现问题症结来自于.demo.xxx(xxx既可以是left也可以是right)如果将老师的代码中的所有.demo.xxx中的.demo删去只保留.xxx(也就是保留一级标签)就可以解决问题，难道是DreamweaverCS6不允许出现.xxx.xxx这种代码形式的出现还是需要详细设置?