html과 css를 사용하여 Cornell 노트용 템플릿 구현

이 글은 코넬 노트필기(5R 노트) 템플릿 구현을 위한 html과 css 관련 내용을 주로 소개합니다. 필요한 친구들은 참고하면 됩니다

Origin

코넬 노트가- 복용 방법은 매우 좋습니다. 사용하기 쉽고 망각 곡선을 방지할 수 있어 관심 있는 학생들은 Baidu에서 검색할 수 있어 노트를 더 효과적으로 만들 수 있습니다.

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

realization

1을 사용하세요. 먼저 p를 너비 21cm, 높이 29.7cm로 설정하세요.

2. 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 클래스를 사용하여 구현하세요. 위의 HTML을 참조하세요.

여기에서 편집기가 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>

이상은 이 글의 전체 내용입니다. 도움이 되셨으면 좋겠습니다. 모두의 공부에, more 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

HTML5 및 CSS3 스마트 애니메이션의 전환 효과를 실현하세요

html2canvas를 사용하여 html 코드를 그림으로 변환하는 방법

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