用css的border分开两栏

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

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

3.往大框里面写一行一行的横线，用一个div 的aline类实现，html见上面

这里如果你的编辑器支持emmet的话，写一个 div.aline*42 ，就会有42行相同的div出现了。然后用css的border属性画出一条条的线出来。

.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.再在左右两个大框的后面放一个div，清除浮动，放概要部分。

        提示
        


        笔记
        



        概要
        

，里面的首行，用实线分出来5R笔记的下部分结构来

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

以上是“怎么使用html和css实现5R笔记模板”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！