간단한 웹 페이지 레이아웃의 구조와 성능 원리를 공유합니다.

<div 클래스="demo1">
            <div 클래스="fl">
                <img src="../../images/head02.jpg" alt="">
            </div>
            <div 클래스="fr">
                <span>10분 전</span>
                <h6>더 멀리 여행할수록 책이 더 이상 없습니다</h6>
                <p>
                하루하루 생각이 많고 바쁘다는 생각이 드시나요? 잘 생각해보면 자신이 정말 바쁜 일이 무엇인지 알 수 없는 것은 좋은 습관을 기르고, 자신을 잘 돌보는 것뿐입니다. 그리고 당신의 꿈을 따르면 생산성을 높일 수 있습니다. 이는 또한 가족 및 친구와의 관계 개선을 의미합니다. 왜냐하면 당신이 변하면 주변의 모든 것도 변하기 때문입니다. 매우 효과적인 사람들의 어떤 습관을 배울 가치가 있습니까?    
                </p>
            </div>
        </div>
        <div 클래스="demo2">
                <img src="../../images/head02.jpg" alt="">
            <div 클래스="fr">
                <span>10분 전</span>
                <h6>더 멀리 여행할수록 책이 더 이상 없습니다</h6>
                <p>
                하루하루 생각이 많고 바쁘다는 생각이 드시나요? 잘 생각해보면 자신이 정말 바쁜 일이 무엇인지 알 수 없는 것은 좋은 습관을 기르고, 자신을 잘 돌보는 것뿐입니다. 그리고 당신의 꿈을 따르면 생산성을 높일 수 있습니다. 이는 또한 가족 및 친구와의 관계 개선을 의미합니다. 왜냐하면 당신이 변하면 주변의 모든 것도 변하기 때문입니다. 매우 효과적인 사람들의 어떤 습관을 배울 가치가 있습니까?    
                </p>
            </div>
        </div>
        <div 클래스="데모3">
                <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; 패딩: 0;목록 스타일: 없음;글꼴:12px/1.5 "Arial", "sans-serif", "Microsoft Yahei", "宋体", "타호마"}
        
        /*공개 스타일*/
        .demo1,.demo2{
            너비: 600px;
            여백 상단: 20px;
            오버플로: 숨김;
            여백 하단: 20px;
        }
        피{
            텍스트 정렬: 양쪽 정렬;
            텍스트 들여쓰기: 2em;
            줄 높이: 24px;
        }

/*주요한*/
        .demo1{
            너비: 600px;
            여백 상단: 20px;
            오버플로: 숨김;
        }
        .데모1 .fl{
            너비: 100px;
            플로트: 왼쪽;
        }
        .demo1 .fl img{
            왼쪽 여백: 20px;
            패딩: 10px;
            테두리: 1px 실선 #ccc;
        }
        .demo1 .fr{
            너비:488px;
            플로트: 오른쪽;
            테두리: 1px 실선 #ccc;
            위치: 상대;
            패딩: 5px;
        }
        .demo1 .fr 범위{
            위치: 절대;
            오른쪽:18px;
            상단: 5px;
        }

/*중급*/
        .demo2 .fr{
            너비:488px;
            플로트: 오른쪽;
            테두리: 1px 실선 #ccc;
            위치: 상대;
            패딩: 5px;
        }
        .demo2 .fr 범위{
            위치: 절대;
            오른쪽:18px;
            상단: 5px;
        }
        .demo2 img{
            왼쪽 여백: 20px;
            패딩: 10px;
            테두리: 1px 실선 #ccc;
        }

/*고급의*/
        .데모3{
            테두리: 1px 실선 #ccc;
            너비: 488px;
            왼쪽 여백: 100px;
            패딩: 5px;
            위치: 상대;
        }
        .demo3 img{
            플로트: 왼쪽;
            여백:-6px 0 0 -86px;
            패딩: 10px;
            테두리: 1px 실선 #CCCCCC;
        }
        .demo3 범위{
            위치: 절대;
            상단: 10px;
            오른쪽: 20px;
        }