집 > 기사 > 웹 프론트엔드 > HTML과 CSS를 사용하여 Cornell 노트 템플릿 구현

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

小云云원래의: 2018-01-08 11:16:292344검색

이 글은 주로 Cornell Notes(5R Notes) 템플릿을 구현하기 위해 html과 css를 사용하는 것에 대한 관련 정보를 소개합니다. 필요한 친구들은 이를 참고하여 html과 css의 아이디어를 바탕으로 자신의 아이디어를 더 잘 완성할 수 있기를 바랍니다. Cornell Notes 템플릿을 구현하는 CSS입니다.

Origin

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

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

realization

1을 사용하세요. 먼저 p를 가로 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 클래스를 사용하여 구현됩니다. 위의 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>

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

관련 기사