资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么使用html和css实现5R笔记模板-创新互联

这篇文章主要介绍怎么使用html和css实现5R笔记模板,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

我们提供的服务有:成都网站设计、做网站、微信公众号开发、网站优化、网站认证、贞丰ssl等。为上千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的贞丰网站制作公司

缘起

网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可能更方便一点,行距很小,而且还有网址在上面,心里不是很乐意的说呢。后来想着自己在word或者excel里面做一个模板出来,后来愣是不会把一个表格的一行设置成占总表格的70%,最终放弃,后来想起来,css里面是可以用cm做单位的呀,为什么不自己写一个呢,只用div就可以了呀

实现

1.先把一个div设置成A4纸的大小,宽21cm,高29.7cm


    
#abody { width: 21cm; height: 29.7cm; margin: 0 auto; overflow: hidden; padding: 1.5cm 1.2cm 1.2cm 2.5cm;}

2.给A4纸这么大的div里面加两个浮动的div,一个往左,占用29%的空间,一个往右,占用68%的空间


        提示
        
        笔记                  概要         

用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笔记模板”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


文章标题:怎么使用html和css实现5R笔记模板-创新互联
当前URL:http://cdkjz.cn/article/didgpo.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220