シンプルなウェブページレイアウトの構造と表現原理の共有

<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>

/*リセット*/
        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"、"Microsoft YaHei"、"Songti"、"Tahoma"}
        
        /*共通スタイル*/
        .デモ1,.デモ2{
            幅: 600ピクセル;
            上マージン: 20px;
            オーバーフロー: 非表示;
            下マージン: 20px;
        }
        p{
            テキスト配置: 両端揃え;
            テキストインデント: 2em;
            行の高さ: 24px;
        }

/*主要な*/
        .demo1{
            幅: 600ピクセル;
            上マージン: 20px;
            オーバーフロー: 非表示;
        }
        .demo1 .fl{
            幅: 100ピクセル;
            フロート: 左;
        }
        .demo1 .fl 画像{
            左マージン: 20px;
            パディング: 10px;
            境界線: 1px 実線 #ccc;
        }
        .demo1 .fr{
            幅:488ピクセル;
            フロート: 右;
            境界線: 1px 実線 #ccc;
            位置: 相対的;
            パディング: 5px;
        }
        .demo1 .fr span{
            位置: 絶対;
            右:18px;
            上: 5px;
        }

/*中級*/
        .demo2 .fr{
            幅:488ピクセル;
            フロート: 右;
            境界線: 1px 実線 #ccc;
            位置: 相対的;
            パディング: 5px;
        }
        .demo2 .fr span{
            位置: 絶対;
            右:18px;
            上: 5px;
        }
        .demo2 画像{
            左マージン: 20px;
            パディング: 10px;
            境界線: 1px 実線 #ccc;
        }

/*高級*/
        .demo3{
            境界線: 1px 実線 #ccc;
            幅: 488ピクセル;
            左マージン: 100px;
            パディング: 5px;
            位置: 相対的;
        }
        .demo3 画像{
            フロート: 左;
            マージン:-6px 0 0 -86px;
            パディング: 10px;
            境界線: 1px 実線 #CCCCCC;
        }
        .demo3 スパン{
            位置: 絶対;
            上: 10px;
            右: 20px;
        }