5
확대/축소 레벨이 작고 페이지가 나란히 배치 된 페이지를 표시 할 때 Microsoft Word 또는 Acrobat Reader와 동일한 모양을 갖는 웹 페이지를 작성하고 싶습니다 테두리.CSS3의 다중 페이지 문서 시뮬레이션
내가 무엇을 해야할지 모르겠지만 고정 크기의 paperborder를 정의하고 그 안에 내용 (HTML 블록 요소의 가변 개수)을 던져서 이러한 요소를 한 페이지에서 "흐리게"만드십시오. 다른 페이지로, 적절한 페이지 나누기와 함께 필요한만큼의 페이지를 생성합니다. 이는 신속한 설계 연구 프로토 타이핑을 위해 인쇄물 출력을 시뮬레이션하기위한 것입니다.
내 마음 속의 뭔가 자바 스크립트가 필요 하겠지만, 제 지식이 제로에 가까울 때부터 CSS3 레이아웃 트릭을 배우기를 거의 요구하지 않기 때문에 순수 CSS가 선호 될 것입니다. (JS 솔루션은 좋은 대안이 될 수 있지만). 다음과 같이
현재 단일 페이지 문서는 다음과 같습니다
이<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Relatório Html</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background-color: #aaa;
}
.paperpage {
position: absolute;
width: 600px;
padding: 50px 30px 40px 30px;
margin-left: -320px;
left: 50%;
top:10px;
bottom:10px;
background-color: white;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
#innerpage {
position: relative;
margin: 0 auto;
height: auto !important;
min-height: 100%;
}
</style>
</head>
<body>
<div class="paperpage">
<div id="innerpage">
<p>Some Content</p>
</div>
</div>
</body>
</html>