HTML과 CSS를 사용하여 Cornell 노트 구현

이번에는 html과 css를 이용한 코넬노트 구현에 대한 Notes를 소개해드리겠습니다.

Origin

사람들은 코넬 노트 필기 방법이 매우 유용하다고 말합니다. 이 방법은 망각 곡선을 방지하고 관심 있는 학생들이 스스로 Baidu를 사용하여 노트를 더 효과적으로 만들 수 있습니다.

인터넷에 기성 템플릿이 많이 있는데, 다운받은 후에는 줄 간격이 매우 작고, URL도 적는 것이 더 편리할 것 같습니다. 그렇게 말하게 되어 기쁘다. 나중에 워드나 엑셀로 템플릿을 만들까도 생각했는데, 전체 테이블의 70%를 차지하도록 테이블의 한 행을 설정할 수 없다는 사실에 놀라서 결국 포기했습니다. 그러다 cm can이 생각나더군요. CSS에서 단위로 사용됩니다. 직접 작성해 보세요. p

realization

1 먼저 p를 A4 용지 크기, 너비 21cm, 높이 29.7cm로 설정하세요. . A4 제공 종이만큼 큰 p에 두 개의 부동 p를 추가합니다. 하나는 왼쪽에 공간의 29%를 차지하고 다른 하나는 공간의 68%를 차지합니다

<p id="abody">
    </p>
#abody { width: 21cm; height: 29.7cm; margin: 0 auto; overflow: hidden; padding: 1.5cm 1.2cm 1.2cm 2.5cm;}

CSS 테두리를 사용하여 두 열을 분리합니다.

<p id="main" class="main le">
        <p class="aline">提示</p>
        <p class="aline"></p>
</p>
<p id="sider" class="main ri">
        <p class="aline">笔记</p>
        <p class="aline"></p>
</p>
<p id="footer" class="footer">
        <p class="aline doubleline">概要</p>
        <p class="aline"></p>
</p>

3. 큰 상자로 이동하여 내부에 가로줄을 한 줄씩 작성하고 p의 aline 클래스를 사용하여 구현하세요. 위의

편집기

가 emmet을 지원하는 경우 p.aline*42를 작성하세요. 동일한 p의 42줄이 나타납니다. 그런 다음 CSS의 테두리 속성을 사용하여 선을 하나씩 그립니다.

.main {height: 75%; overflow: hidden;}
    .le { width: 28.99999%; border-right: double 3px #666; float: left; }
    .ri { width: 69.99999%; float: right; }

4. 그런 다음 왼쪽과 오른쪽 두 개의 큰 상자 뒤에 p를 넣고 플로트를 지우고 요약 부분을 넣습니다.

.aline { height: 0.9cm; border-bottom: 1px; border-bottom-style: dashed; border-bottom-color: #999; 
            margin-right: 8px; color: #eee; line-height: 0.9cm;}

안쪽 첫 번째 줄은 실선을 사용해 5R 노트 구조의 하단 부분을 분리합니다.

<p id="main" class="main le">
        <p class="aline">提示</p>
        <p class="aline"></p>
</p>
<p id="sider" class="main ri">
        <p class="aline">笔记</p>
        <p class="aline"></p>
</p>
<p id="footer" class="footer">
        <p class="aline doubleline">概要</p>
        <p class="aline"></p>
</p>

이 기사의 사례를 읽으신 후 방법을 익히셨을 것이라 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요! 추천 도서:

CSS3의 calc() 메서드 사용 방법

CSS 위치 지정 속성에 대한 자세한 설명

위 내용은 HTML과 CSS를 사용하여 Cornell 노트 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!