网页简单布局之结构与表现原则分享

<div class="demo1">
            <div class="fl">
                <img src="../../images/head02.jpg" alt="">
            </div>
            <div class="fr">
                <span>10分钟前</span>
                <h6>渐行渐远渐无书</h6>
                <p>
                你是不是每天脑子里盘踞许多挥之不去的想法觉得自己很忙，仔细想想又不知道自己真正地在忙些什么，而养成良好的习惯，照顾好自己，追随自己的梦想，才能提高生产力，这也意味着改善你与家人和朋友的关系，因为当你改变时，你周围的一切都改变了，高效能的人有哪些习惯值得我们学习？    
                </p>
            </div>
        </div>
        <div class="demo2">
                <img src="../../images/head02.jpg" alt="">
            <div class="fr">
                <span>10分钟前</span>
                <h6>渐行渐远渐无书</h6>
                <p>
                你是不是每天脑子里盘踞许多挥之不去的想法觉得自己很忙，仔细想想又不知道自己真正地在忙些什么，而养成良好的习惯，照顾好自己，追随自己的梦想，才能提高生产力，这也意味着改善你与家人和朋友的关系，因为当你改变时，你周围的一切都改变了，高效能的人有哪些习惯值得我们学习？    
                </p>
            </div>
        </div>
        <div class="demo3">
                <img src="../../images/head02.jpg" alt="">
                <span class="time">10分钟前</span>
                <h6>渐行渐远渐无书</h6>
                <p>
                你是不是每天脑子里盘踞许多挥之不去的想法觉得自己很忙，仔细想想又不知道自己真正地在忙些什么，而养成良好的习惯，照顾好自己，追随自己的梦想，才能提高生产力，这也意味着改善你与家人和朋友的关系，因为当你改变时，你周围的一切都改变了，高效能的人有哪些习惯值得我们学习？    
                </p>
            </div>
        </div>

/*reset*/
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma"}
        
        /*公共样式*/
        .demo1,.demo2{
            width: 600px;
            margin-top: 20px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        p{
            text-align: justify;
            text-indent: 2em;
            line-height: 24px;
        }

/*初级*/
        .demo1{
            width: 600px;
            margin-top: 20px;
            overflow: hidden;
        }
        .demo1 .fl{
            width: 100px;
            float: left;
        }
        .demo1 .fl img{
            margin-left: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .demo1 .fr{
            width:488px;
            float: right;
            border: 1px solid #ccc;
            position: relative;
            padding: 5px;
        }
        .demo1 .fr span{
            position: absolute;
            right:18px;
            top: 5px;
        }

/*中级*/
        .demo2 .fr{
            width:488px;
            float: right;
            border: 1px solid #ccc;
            position: relative;
            padding: 5px;
        }
        .demo2 .fr span{
            position: absolute;
            right:18px;
            top: 5px;
        }
        .demo2 img{
            margin-left: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }

/*高级*/
        .demo3{
            border: 1px solid #ccc;
            width: 488px;
            margin-left: 100px;
            padding: 5px;
            position: relative;
        }
        .demo3 img{
            float: left;
            margin:-6px 0 0 -86px;
            padding: 10px;
            border: 1px solid #CCCCCC;
        }
        .demo3 span{
            position: absolute;
            top: 10px;
            right: 20px;
        }