css实现A4纸张横向竖向大小布局效果代码

代码语言:html

所属分类:图表

代码描述:css实现A4纸张横向竖向大小布局效果代码

代码标签: css a4 纸张

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />


    <style>
        .box {
      background-color: #eee;
      border: 1px solid;
      height: 100vh;
      overflow-y: auto;
    }
    /*纵向A4纸张效果*/
    .a4-v {
    padding: 1.5cm 2.6cm; /*纸张上下内边距1.5cm,左右内边距2.6cm*/
      width: 15.8cm;  /*纵向A4纸张宽21cm,扣除左右内边距2.6cm*2,等于15.8cm*/
    height: 24.5cm;
      margin: 1cm auto; /*纸张居中,且上下外边距1cm*/
      background-color: white;
      box-shadow: 0 0 20px hsla( 0,0%,0%,.1 );
    }
    /*横向A4纸张效果*/
    .a4-h {
      padd.........完整代码请登录后点击上方下载按钮下载查看

网友评论0