用css的border分開(kāi)兩欄

.main {height: 75%; overflow: hidden;}

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

3.往大框里面寫(xiě)一行一行的橫線(xiàn)，用一個(gè)div 的aline類(lèi)實(shí)現(xiàn)，html見(jiàn)上面

這里如果你的編輯器支持emmet的話(huà)，寫(xiě)一個(gè) div.aline*42 ，就會(huì)有42行相同的div出現(xiàn)了。然后用css的border屬性畫(huà)出一條條的線(xiàn)出來(lái)。

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

4.再在左右兩個(gè)大框的后面放一個(gè)div，清除浮動(dòng)，放概要部分。

        提示
        


        筆記
        



        概要
        

，里面的首行，用實(shí)線(xiàn)分出來(lái)5R筆記的下部分結(jié)構(gòu)來(lái)

.footer {clear: both; overflow: hidden;}
.doubleline { border-top: double 3px #666;}

以上是“怎么使用html和css實(shí)現(xiàn)5R筆記模板”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！