这篇文章主要介绍怎么使用html和css实现5R笔记模板,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联公司秉承实现全网价值营销的理念,以专业定制企业官网,成都网站建设、成都做网站,小程序设计,网页设计制作,手机网站开发,成都营销网站建设帮助传统企业实现“互联网+”转型升级专业定制企业官网,公司注重人才、技术和管理,汇聚了一批优秀的互联网技术人才,对客户都以感恩的心态奉献自己的专业和所长。
缘起
网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可能更方便一点,行距很小,而且还有网址在上面,心里不是很乐意的说呢。后来想着自己在word或者excel里面做一个模板出来,后来愣是不会把一个表格的一行设置成占总表格的70%,最终放弃,后来想起来,css里面是可以用cm做单位的呀,为什么不自己写一个呢,只用div就可以了呀
实现
1.先把一个div设置成A4纸的大小,宽21cm,高29.7cm
<div id="abody"> </div> #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%的空间
<div id="main" class="main le"> <div class="aline">提示</div> <div class="aline"></div> </div> <div id="sider" class="main ri"> <div class="aline">笔记</div> <div class="aline"></div> </div> <div id="footer" class="footer"> <div class="aline doubleline">概要</div> <div class="aline"></div> </div>
用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,清除浮动,放概要部分。
<div id="main" class="main le"> <div class="aline">提示</div> <div class="aline"></div> </div> <div id="sider" class="main ri"> <div class="aline">笔记</div> <div class="aline"></div> </div> <div id="footer" class="footer"> <div class="aline doubleline">概要</div> <div class="aline"></div> </div>
,里面的首行,用实线分出来5R笔记的下部分结构来
.footer {clear: both; overflow: hidden;} .doubleline { border-top: double 3px #666;}
以上是“怎么使用html和css实现5R笔记模板”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网页名称:怎么使用html和css实现5R笔记模板
URL地址:https://www.cdcxhl.com/article18/psjggp.html
成都网站建设公司_创新互联,为您提供电子商务、商城网站、外贸网站建设、手机网站建设、App设计、微信小程序
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联