在网页中实现稿纸效果

来源：互联网发布：淘宝贷款还不了不还了编辑：程序博客网时间：2024/05/09 18:08

在网页中实现稿纸效果

1.html部分代码参考

<!doctype thml><html><head><meta charset="utf-8"><link rel="stylesheet"type="text/css"href="styles/style.css"><title>稿纸设置</title></head><body><div id="paper"><div class="title">红叶科技有限公司<samp class="title_p">电话:6666-6666666</samp></div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="style"> </div><div class="footer">---第X页---</div></div></body></html>

2.css部分（css所在的文件夹名字为style）

/*--设置稿纸效果--*/#paper{position: absolute;border:solid;background:#ffffff;border-color: #cccccc;border-width: 1px;width: 400px;height:530px;left:100px;top:50px;z-index: 3;}/*--设置稿纸页眉效果--*/.title{width:auto;height:35px;    border-bottom-width: 3px;    border-bottom-color: #ff3300;    border-bottom-style: double;    padding-left:35px;    line-height: 3em;    font-family: "华文楷体";    font-size: 16px;    color: #ff3300;}.title_p{padding-left:100px;font-family: "宋体";font-size: 8px;}/*--设置稿纸页脚效果--*/.footer{height:15px;line-height: 7em;text-align: center;font-family: "宋体";font-size: 8px;color: #ff3300;border-top-color: #ff3300;    border-bottom-style: double;}/*--设置稿纸行效果--*/.style{border:dotted;border-color:#999999;border-top-width: 0px;border-left-width: 0px;border-right-width: 0px;border-bottom-width: 1px;margin-left: 5px;margin-right: 5px;line-height: 1.5em;}

0 0