cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              	<div class="test_bar"></div>
<div class="pagebox">
	<div class="page header"></div>
</div>
	<div class="addmarg"></div>
<div id="content">
    <h1>The Little Match Girl</h1>
    <h2><em>By: </em>Andersen</h2>
    <p>Most terribly cold it was; it snowed, and was nearly quite dark, and evening--the last evening of the year. In this cold and darkness there went along the street a poor little girl, bareheaded, and with naked feet. When she left home she had slippers on, it is true; but what was the good of that They were very large slippers, which her mother had hitherto worn; so large were they; and the poor little thing lost them as she scuffled away across the street, because of two carriages that rolled by dreadfully fast.</p>
    <p data-next="next">One slipper was nowhere to be found; the other had been laid hold of by an urchin, and off he ran with it; he thought it would do capitally for a cradle when he some day or other should have children himself. So the little maiden walked on with her tiny naked feet, that were quite red and blue from cold.</p>
    <p>She carried a quantity of matches in an old apron, and she held a bundle of them in her hand. Nobody had bought anything of her the whole livelong day; no one had given her a single farthing.
  </p>
    <p>She crept along trembling with cold and hunger--a very picture of sorrow, the poor little thing! </p>
    <p>The flakes of snow covered her long fair hair, which fell in beautiful curls around her neck; but of that, of course, she never once now thought. From all the windows the candles were gleaming, and it smelt so deliciously of roast goose, for you know it was New Year's Eve; yes, of that she thought.</p>
    <p>In a corner formed by two houses, of which one advanced more than the other, she seated herself down and cowered together. Her little feet she had drawn close up to her, but she grew colder and colder, and to go home she did not venture, for she had not sold any matches and could not bring a farthing of money: from her father she would certainly get blows, and at home it was cold too, for above her she had only the roof, through which the wind whistled, even though the largest cracks were stopped up with straw and rags. </p>
    <p>Her little hands were almost numbed with cold. Oh! a match might afford her a world of comfort, if she only dared take a single one out of the bundle, draw it against the wall, and warm her fingers by it. She drew one out. "Rischt!" how it blazed, how it burnt! It was a warm, bright flame, like a candle, as she held her hands over it: it was a wonderful light. It seemed really to the little maiden as though she were sitting before a large iron stove, with burnished brass feet and a brass ornament at top. The fire burned with such blessed influence; it warmed so delightfully. The little girl had already stretched out her feet to warm them too; but--the small flame went out, the stove vanished: she had only the remains of the burnt-out match in her hand.</p>
    <!-- <nextpage> -->
      <!-- 自定义换页标签 -->
<!--       <p>Test Lable: nextpage .</p>
      <p>请注意:这是一个内容分割标签,配合JS 把以下内容分配到下一页显示,此标签不能简写。</p>
    </nextpage>
 -->    
    <p>She rubbed another against the wall: it burned brightly, and where the light fell on the wall, there the wall became transparent like a veil, so that she could see into the room. On the table was spread a snow-white tablecloth; upon it was a splendid porcelain service, and the roast goose was steaming famously with its stuffing of apple and dried plums. And what was still more capital to behold was, the goose hopped down from the dish, reeled about on the floor with knife and fork in its breast, till it came up to the poor little girl; when--the match went out and nothing but the thick, cold, damp wall was left behind. She lighted another match. Now there she was sitting under the most magnificent Christmas tree: it was still larger, and more decorated than the one which she had seen through the glass door in the rich merchant's house.</p>
    <p>Thousands of lights were burning on the green branches, and gaily-colored pictures, such as she had seen in the shop-windows, looked down upon her.</p>
    <p>The little maiden stretched out her hands towards them when--the match went out. The lights of the Christmas tree rose higher and higher, she saw them no was stars in heaven; one fell down and formed a long trail of fire.</p>
    <p>"Someone is just dead!" said the little girl; for her old grandmother, the only person who had loved her, and who was now no more, had told her, that when a star falls, a soul ascends to God.</p>
    <p>She drew another match against the wall: it was again light, and in the lustre there stood the old grandmother, so bright and radiant, so mild, and with such an expression of love. </p>
    <p>"Grandmother!" cried the little one. "Oh, take me with you! You go away when the match burns out; you vanish like the warm stove, like the delicious roast goose, and like the magnificent Christmas tree!" And she rubbed the whole bundle of matches quickly against the wall, for she wanted to be quite sure of keeping her grandmother near her. And the matches gave such a brilliant light that it was brighter than at noon-day: never formerly had the grandmother been so beautiful and so tall. She took the little maiden, on her arm, and both flew in brightness and in joy so high, so very high, and then above was neither cold, nor hunger, nor anxiety--they were with God.</p>
    <p>But in the corner, at the cold hour of dawn, sat the poor girl, with rosy cheeks and with a smiling mouth, leaning against the wal--frozen to death on the last evening of the old year. Stiff and stark sat the child there with her matches, of which one bundle had been burnt. "She wanted to warm herself," people said. No one had the slightest suspicion of what beautiful things she had seen; no one even dreamed of the splendor in which, with her grandmother she had entered on the joys of a new year. </p>	
</div>
            
          
!
            
              *{
	margin: 0;
	padding: 0;
}
body{
	height:auto;
	background: #0af;
	background-attachment: fixed;
	counter-reset:page;
}
.test_bar{
	position: fixed;
	width: 0px;
	height: 644px;
	right: 0;
	top: 0;

	color: #aaa;
	font-family: "方正行楷简体";
	font-size: 12px;
	line-height: 16px;

	background-color: #333;
	z-index: 999;
}
.test_bar p{
	text-indent: 0px;
}
.page{
	position: relative;
	margin: 70px 30px 0px 0px;
	padding: 33px 30px 53px;
	width: 296px;
	height: 420px;
	float: left;
	background-color: #fff;
	box-shadow: 0 0 10px #aaa;
}
.page:before{
	position: absolute;
	width: 296px;
	height: 13px;
	top: 17px;
	text-align: center;
	display: block;
	font-family: "方正行楷简体";
	color:#aaa;
	font-size: 12px;
	line-height: 12px;
	box-shadow: 0 1px 0px 0px #ccc; 
	content: "The Little Match Girl.";
}
.page:after{
	position: absolute;
	width: 296px;
	height: 30px;
	top: 465px;
	text-align: center;
	display: block;
   font-family: "方正行楷简体";
	color:#aaa;
	font-size: 12px;
	line-height: 33px;
	box-shadow: 0 -1px 0px 0px #ccc; 

	counter-increment: page;
	content: "— Page " counter(page)  " —" ;
}
.header{
	margin-left:70px;
}
addmarg{
	margin: 70px 0 0 0px;
	width: 70px;
	height: 505px;
	float: left;
}
#content{
	display: none;
}
h1,h2{
	text-align: center;
	color: #000;
	font-family: "方正行楷简体";
}
h1{
	font-size: 20px;
	line-height: 32px;
}
h2{
	font-size: 12px;
	line-height: 18px;
}
p{
	font-family: "方正行楷简体";
	font-size: 12px;
	line-height: 18px;
	text-indent: 18px;
	word-break:break-all;
}
p[class="cutoff"]{
	text-indent: 0;
}
p[class="time"],
p[class="date"]{
	position: relative;
	text-align: right;
	text-indent: 0;
	right: 0px;
}
p[class="date"]{
	margin: 0;
}
p[class="time"]{
	margin: 30px 0 0 0;
}
img{
	position: relative;
	top: 2px;
	display: block;
	float: left;
	border:3px solid #fff;
	box-shadow: 0 0 5px #aaa;
}
nextpage{
	display: block;
}

            
          
!
            
              var body = document.getElementsByTagName("body")[0];
var pbox = document.getElementsByClassName("pagebox")[0];
var page = document.getElementsByClassName("page");
var content = document.getElementById("content");
var contlists = content.childNodes;
var tinf = document.getElementsByClassName("test_bar")[0];
var screenW = window.innerWidth;
screenH = window.innerHeight;
if (typeof screenW != "number") {
	if (document.compatMode == "CSS1Compat") {
		screenW = document.documentElememt.clientWidth;
		screenH = document.documentElememt.clientHeight
	} else {
		screenW = document.body.clientWidth;
		screenH = document.body.clientHeight
	}
}
var pmargintop = parseInt((screenH - page[0].offsetHeight) / 2);
page[0].style.cssText = "margin-top:" + pmargintop + "px;";
var pcontW = parseInt(computedStyle(page[0], "width"));
var pcontH = parseInt(computedStyle(page[0], "height"));
var pageW = page[0].offsetWidth;
var pspaceW = pageW + parseInt(computedStyle(page[0], "marginRight"));
var pleaveW = pcontW;
var pleaveH = pcontH;
var prepnum = 0;
var bodyW = pspaceW + parseInt(computedStyle(page[0], "marginLeft")) * 2 - parseInt(computedStyle(page[0], "marginRight"));
body.style.cssText = "float:left;width:" + bodyW + "px;";
for (var i = 1; i < contlists.length; i++) {
	if (acceptNode(contlists[i])) {
		page[prepnum].appendChild(contlists[i]);
		jgobj = page[prepnum].lastChild;
		var status = isOverFlow(jgobj);
		if (status != "NORMAL") {
			adjustOFCont(jgobj, status)
		} else {
			optimizeDisplay(jgobj)
		}
	}
}
function acceptNode(node) {
	var type = node.nodeName.toLowerCase() != "#text" && node.nodeName.toLowerCase() != "#comment";
	if (node.nodeName.toLowerCase() == "nextpage") {
		addPage(1);
		toNextPage(1);
		resetPcontWH("WH")
	}
	if (node.nodeName.toLowerCase() != "img" && (node.innerHTML == "" || node.innerHTML == " ")) {
		type = false
	} else {
		type = type && true
	}
	if (type) {
		return true
	} else {
		return false
	}
}
function addPage(number) {
	for (var i = number; i > 0; i--) {
		var newnode = document.createElement("div");
		newnode.setAttribute("class", "page");
		newnode.style.cssText = "margin-top:" + pmargintop + "px;";
		pbox.appendChild(newnode);
		bodyW = body.offsetWidth + pspaceW;
		body.style.cssText = "float:left;width:" + bodyW + "px;"
	}
}
function toNextPage(number) {
	if (prepnum < page.length) {
		prepnum += parseInt(number)
	} else {
		return ERROR_No_NextPage
	}
}
function isOverFlow(obj) {
	if (obj.offsetHeight > pleaveH || obj.offsetWidth > pleaveW) {
		if (obj.offsetWidth > pleaveW && obj.offsetWidth <= pleaveW) {
			return "W_OF"
		} else {
			if (obj.offsetHeight > pleaveH && obj.offsetWidth <= pleaveW) {
				return "H_OF"
			} else {
				return "WH_OF"
			}
		}
	} else {
		return "NORMAL"
	}
}
function adjustOFCont(obj, overflowtype) {
	var type = obj.nodeName.toLowerCase();
	switch (type) {
	case "p":
		paragraphCutOff(obj, overflowtype);
		break;
	case "img":
		adjustImgSize(obj, overflowtype);
		break;
	default:
		break
	}
}
function resetPcontWH(which) {
	switch (which) {
	case "W":
		pleaveW = pcontW;
		break;
	case "H":
		pleaveH = pcontH;
		break;
	case "WH":
		pleaveW = pcontW;
		pleaveH = pcontH;
		break;
	case "HW":
		pleaveW = pcontW;
		pleaveH = pcontH;
		break;
	default:
		return ResetPageWH_ERROR;
		break
	}
}
function paragraphCutOff(par, oftype) {
	addPage(1);
	toNextPage(1);
	var seccont = page[prepnum].appendChild(par);
	var newcont = document.createElement("p");
	newcont.setAttribute("id", "p_" + (prepnum - 1));
	var procont = page[prepnum - 1].appendChild(newcont);
	var k = 0;
	tempH = pleaveH;
	for (var i = 0; tempH >= 0; i++) {
		procont.innerHTML += par.innerHTML.substr(i, 1);
		k = i;
		tempH = pleaveH - procont.offsetHeight
	}
	if (par.innerHTML.substr(k, 1).search(/[a-zA-Z]+/) != -1) {
		for (var i = k; i > 0 && par.innerHTML.substr(i, 1) != " "; i--) {
			k = i - 1
		}
	}
	procont.innerHTML = par.innerHTML.substr(0, k);
	seccont.innerHTML = par.innerHTML.substr(k);
	if (k > 0) {
		seccont.setAttribute("class", "cutoff")
	}
	resetPcontWH("WH");
	pleaveH -= seccont.offsetHeight
}
function adjustImgSize(img, oftype) {
	var forsecjudge;
	var border = parseInt(computedStyle(img, "border")) * 2;
	if (oftype == "W_OF" || oftype == "WH_OF") {
		img.style.cssText = "width:" + (pcontW - border) + "px;height:auto;";
		forsecjudge = img
	} else {
		addPage(1);
		toNextPage(1);
		forsecjudge = page[prepnum].appendChild(img);
		resetPcontWH("WH");
		var oftype = isOverFlow(forsecjudge);
		if (oftype == "H_OF") {
			forsecjudge.style.cssText = "height:" + (pcontH - border + 5) + "px;"
		} else {
			if (oftype == "W_OF") {
				forsecjudge.style.cssText = "width:" + (pcontW - border) + "px;height:auto;";
				optimizeDisplay(forsecjudge)
			}
		}
	}
	if (isOverFlow(forsecjudge) != "NORMAL") {
		if (pleaveH != pcontH) {
			addPage(1);
			toNextPage(1);
			resetPcontWH("WH")
		} else {}
		var forthirjudge = page[prepnum].appendChild(forsecjudge);
		forthirjudge.style.cssText = "width:" + (pcontW - border) + "px;height:auto;";
		if (isOverFlow(forthirjudge) != "NORMAL") {
			forthirjudge.style.cssText = "width:" + (pcontW - border) + "px;height:" + (pcontH - border + 5) + "px;";
			addPage(1);
			toNextPage(1);
			resetPcontWH("WH")
		} else {
			optimizeDisplay(forthirjudge)
		}
	} else {
		optimizeDisplay(forsecjudge)
	}
}
function optimizeDisplay(node) {
	var nodetype = node.nodeName.toLowerCase();
	switch (nodetype) {
	case "img":
		var floatype = isFloat(node);
		var tempH = node.offsetHeight;
		var border = parseInt(computedStyle(node, "border")) * 2;
		tempH -= (border + tempH % 18);
		if (node.offsetWidth >= parseInt(pcontW * 0.7)) {
			node.style.cssText = "width:" + (pcontW - border) + "px;height:" + (tempH + 18) + "px;"
		} else {
			if (floatype != "left" && floatype != "not") {
				node.style.cssText = "margin-left: 8px;height:" + (tempH + 32) + "px;"
			} else {
				node.style.cssText = "margin-right: 8px;height:" + (tempH + 32) + "px;"
			}
		}
		if (floatype != "not") {
			if (contlists[i + 1].nodeName.toLowerCase() == "img") {
				pleaveH -= jgobj.offsetHeight
			}
		} else {
			resetPcontWH("W");
			pleaveH -= jgobj.offsetHeight
		}
		break;
	case "p":
		pleaveH -= node.offsetHeight;
		break;
	default:
		pleaveH -= node.offsetHeight;
		break
	}
}
function isFloat(obj) {
	var value = "";
	switch (computedStyle(obj, "cssFloat")) {
	case "left":
		value = "left";
		break;
	case "right":
		value = "right";
		break;
	default:
		value = "not";
		break
	}
	return value
}
function typeWriter(obj) {
	var i = 0;
	var speed = 100;
	var content;
	var timer;
	content = obj.innerHTML;
	obj.innerHTML = "";
	printChar();
	function printChar() {
		obj.innerHTML += content.substr(i, 1);
		if (i < content.length) {
			i++;
			timer = setTimeout(printChar, speed);
			toWait(timer)
		} else {
			clearTimeout(timer)
		}
	}
}
function computedStyle(obj, attr) {
	if (attr != "border") {
		return obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr]
	} else {
		if (obj.currentStyle) {
			var ieBorder = obj.currentStyle.borderLeftWidth;
			if (!isNaN(parseInt(ieBorder))) {
				return ieBorder
			} else {
				return 0
			}
		} else {
			return document.defaultView.getComputedStyle(obj, false).borderLeftWidth
		}
	}
}
var waitstatus = true;
function toWait() {
	if (waitstatus) {
		toWait()
	} else {}
}
function goOn() {
	waitstatus = false
};

function wheel(obj, tofunction, useCapture) {
	var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll": "mousewheel";
	if (obj.attachEvent) {
		obj.attachEvent("on" + mousewheelevt, handler, useCapture)
	} else {
		if (obj.addEventListener) {
			obj.addEventListener(mousewheelevt, handler, useCapture)
		}
	}
	function handler(event) {
		var delta = 0;
		var event = window.event || event;
		var delta = event.detail ? -event.detail / 3 : event.wheelDelta / 120;
		if (event.preventDefault) {
			event.preventDefault()
		}
		event.returnValue = false;
		return tofunction.apply(obj, [event, delta])
	}
}
wheel(window,
function(e, delta) {
	testwheel(delta)
},
false);
var value = 0;
function testwheel(deltas) {
	if (deltas > 0) {
		value++
	} else {
		value--
	}
	window.scrollBy( - deltas * 100, 0)
};

document.getElementsByTagName("html")[0].addEventListener("click", toYN2, false);
var leave = 5;
var gap = 0;
var statuss = true;
var tempBW = 0;
function toYN() {
	if (statuss) {
		statuss = false;
		page[0].style.cssText = "-webkit-transform: rotatez(" + parseInt( - Math.random() * 5) + "deg);z-index:" + 999 + ";";
		for (var i = 1; i < page.length; i++) {
			if (i < leave) {
				page[i].style.cssText = "-webkit-transform: rotatez(" + (5 - parseInt(Math.random() * 10)) + "deg);margin:70px 0 0 " + (70 + i * gap) + "px;" + "z-index:" + (999 - i) + ";position:absolute;"
			} else {
				page[i].style.cssText = "display:none;"
			}
		}
	} else {
		statuss = true;
		page[0].style.cssText = "-webkit-transform: rotatez(0deg);";
		for (var i = 1; i < page.length; i++) {
			if (i < leave) {
				page[i].style.cssText = "position:relative;margin:70px 30px 0 0;"
			} else {
				page[i].style.cssText = "display:block;"
			}
		}
	}
}
var leave2 = 5;
var gapX = 5;
var gapY = 5;
function toYN2() {
	if (statuss) {
		statuss = false;
		tempBW = body.offsetWidth;
		page[0].style.cssText = "margin-top:" + pmargintop + "px;z-index:" + 999 + ";";
		for (var i = 1; i < page.length; i++) {
			if (i < leave2) {
				page[i].style.cssText = "margin:" + (pmargintop + i * gapY) + "px 0 0 " + (70 + i * gapX) + "px;" + "z-index:" + (999 - i) + ";position:absolute;"
			} else {
				page[i].style.cssText = "display:none;"
			}
		}
		body.style.cssText = "float:left;width:auto;"
	} else {
		statuss = true;
		body.style.cssText = "float:left;width:" + tempBW + "px;";
		tempBW = 0;
		page[0].style.cssText = "-webkit-transform: rotatez(0deg);margin-top:" + pmargintop + "px;";
		for (var i = 1; i < page.length; i++) {
			if (i < leave2) {
				page[i].style.cssText = "position:relative;margin:" + pmargintop + "px 30px 0 0;"
			} else {
				page[i].style.cssText = "display:block;"
			}
		}
	}
};
            
          
!
999px
Loading ..................

Console