<div class="demo1">
            <div class="fl">
                <img src="../../images/head02.jpg" alt="">
            </div>
            <div class="fr">
                <span>10分鐘前</span>
                <h6>漸行漸遠漸無書</h6>
                <p>
                你是不是每天腦子里盤踞許多揮之不去的想法覺得自己很忙，仔細想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習慣，照顧好自己，追隨自己的夢想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因為當你改變時，你周圍的一切都改變了，高效能的人有哪些習慣值得我們學習？    
                </p>
            </div>
        </div>
        <div class="demo2">
                <img src="../../images/head02.jpg" alt="">
            <div class="fr">
                <span>10分鐘前</span>
                <h6>漸行漸遠漸無書</h6>
                <p>
                你是不是每天腦子里盤踞許多揮之不去的想法覺得自己很忙，仔細想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習慣，照顧好自己，追隨自己的夢想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因為當你改變時，你周圍的一切都改變了，高效能的人有哪些習慣值得我們學習？    
                </p>
            </div>
        </div>
        <div class="demo3">
                <img src="../../images/head02.jpg" alt="">
                <span class="time">10分鐘前</span>
                <h6>漸行漸遠漸無書</h6>
                <p>
                你是不是每天腦子里盤踞許多揮之不去的想法覺得自己很忙，仔細想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習慣，照顧好自己，追隨自己的夢想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因為當你改變時，你周圍的一切都改變了，高效能的人有哪些習慣值得我們學習？    
                </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;
        }