css通过 @page rotated 设置纸张打印样式及方向

283人浏览 / 0人评论

css通过 @page rotated 设置纸张打印样式及方向

@page定义和用法

     @page <label> <pseudo-classes>{ sRules }

@page属性值

    <label>:页面标识符

    <pseudo-class>:打印伪类 :first :left:right

@page说明

    设置页面容器的版式,方向,边空等。
 
<style type="text/css" media="print">
    /*每一页 如果没有另外自定义的话 */
    @page{
        /*定义为a4纸*/
        size:a4;
        /*页面的边距*/
        margin:30px 0 0 20px;
    }
    /* 定义纸张旋转 */
    @page rotated { size: landscape;}
    /*第一页*/
    @page :first {
        margin-left: 50%;
        margin-top: 50%;
    }
    .ccc{
        /*引用旋转*/
        page: rotated;
        /*前面不加空页*/
        page-break-before:avoid;
        /*后面不加空页*/
        page-break-after:avoid;
    }
    
    /*分页标记*/
    .geovindu{
        page-break-after: always;
    }
</style>

 

全部评论