页码:(http://progrock.rocks/teaching_materials/loops.html)。
它是一个文件中的所有内容(CSS、JavaScript和HTML):
<!DOCTYPE html>
<!-- Copyright (c) 2016 Alf P. Steinbach. Boost 1.0 license. -->
<html>
<head>
<meta charset="utf-8">
<title>Lapper for «loops» gruppeøvelse i praktisk regning</title>
<!-- link rel="stylesheet" href="style.css" -->
<style>
* { font: 10pt sans-serif; }
body { margin: 0; padding: 0; background-color: white; }
h1
{
padding-left: 14px; padding-top: 0; padding-bottom: 0.5em; padding-right: 0;
margin-top: 0; margin-bottom: 0;
background-color: lightGray;
font-size: xx-large; font-style: italic; color: #A0B0B0;
}
div#content
{
margin: 0;
padding-left: 0; padding-right: 0;
position: absolute; width: 100%;
}
div#input-area
{
left: 0; right: -0;
padding-left: 14px; padding-right: 14px;
padding-top: 0.5em; padding-bottom: 0.5em;
margin-left: 0; margin-right: 0;
background-color: #F0F0F0;
}
div#notes-container
{
left: 0; right: -0;
padding-left: 14px; padding-right: 14px;
padding-top: 0.5em; padding-bottom: 0.5em;
margin-left: 0; margin-right: 0;
/*display: none;*/
}
input.Number-input
{
width: 5em;
}
.Access-key
{
text-decoration: underline;
}
div.Note
{
margin-top: 0px; margin-right: 12px;
margin-bottom: 8px; margin-left: 0px;
padding-left: 2em; padding-right: 2em;
padding-top: 1em; padding-bottom: 0.5em;
background-color: #FFFFB0;
width: 15em;
overflow: hidden;
border-radius: 1em;
border: 1px gray solid;
display: inline-block;
}
div.Note-figure
{
float: right; font-size: 4em; color: #D0E0E0;
padding: 0px; margin: 0px; vertical-align: top;
transform: rotate(-7deg);
border-radius: 0.5em;
background-color: white;
}
</style>
<script>
function item( id )
{
return document.getElementById( id );
}
function generate()
{
const n_notes = 11;
const operand = parseInt( item( "fixed-operand" ).value );
const operation = item( "operation" ).value; // +, *
const start_number = (operation == "+"? 0 : 1);
console.log( "Generate" )
var container = item( "notes-container" );
var collection = item( "notes-collection" );
if( collection !== null )
{
collection.remove();
collection = null;
}
var message = document.createTextNode("Genererer…");
container.appendChild( message );
collection = document.createElement( "div" );
collection.id = "notes-collection";
var template = item( "note-template" )
console.log( "template = " + template )
var current = start_number;
for( let i = 0; i < n_notes; ++i )
{
let note = template.cloneNode( true );
note.style.display = "inline-block";
let note_has = note.querySelector( "#note-has" );
note_has.innerHTML = "Jeg har " + current.toString() + ".";
let note_seeking = note.querySelector( "#note-seeking" );
let display_op = (operation == "+"? " + " : "∙");
note_seeking.innerHTML = "Hvem har " + current + display_op + operand + "?";
if( i == n_notes - 1 ) { note_seeking.innerHTML = "Siste tall!"; }
let figure = note.querySelector( "#figure" );
switch( operation )
{
case "+": figure.innerHTML = i + "∙" + operand; break;
case "*": figure.innerHTML = operand + "↑" + i; break;
}
collection.appendChild( note );
switch( operation )
{
case "+": current += operand; break;
case "*": current *= operand; break;
}
}
message.remove();
container.appendChild( collection );
}
function explanation_of( op )
{
switch( op )
{
case "+": return "dette gir en gangetabell";
case "-": return "dette gir en baklengs gangetabell";
case "*": return "dette gir en potenstabell";
case "/": return "dette gir en baklengs potenstabell";
}
}
function update_explanation()
{
item( "operation-explanation" ).innerHTML =
"(" + explanation_of( item( "operation" ).value ) + ").";
}
function on_command_generate()
{
generate();
}
function on_operation_changed()
{
update_explanation();
}
function on_document_loaded()
{
item( "title-header" ).innerHTML = document.title;
item( "operation" ).value = "+";
update_explanation();
generate();
}
</script>
</head>
<body onload="on_document_loaded()">
<h1 id="title-header">asdasd</h1>
<div id="content">
<div id="input-area">
<select id="operation" onchange="on_operation_changed();">
<option value="+">+ (addisjon)</option>
<option value="*">* (multiplikasjon)</option>
</select>
med fast operand
<input id="fixed-operand" type="number"
class="Number-input"
alt="Det faste tallet i utregningene"
value="2"
min="1"
max="10"
>
<span id="operation-explanation"></span>
<button onclick="on_command_generate();" accesskey="g">
<span class="Access-key">G</span>enerér
</button>
</div> <!-- input-area -->
<div id="notes-container">
<div id="note-template" class="Note" style="display:none">
<div id="figure" class="Note-figure">
5∙7
</div>
<div style="position: absolute">
<span id="note-has">Jeg har 35</span>
<br/>
<br/>
<span id="note-seeking">Hvem har 35 + 7?</span>
</div>
</div>
<div id="notes-collection">
</div> <!-- notes-collection -->
<div> <!-- notes-container -->
</div> <!-- content -->
</body>
</html>
问题:100%打印预览效果良好,
当我放大打印预览时,分页符后面或周围的内容会在它周围移动,结果很难看,无法使用:
我在另一台机器上尝试了一个CSS属性,该属性应该可以防止
div.Note-figure
中的分页,但这不起作用。对不起,我这里没有。我也试过用google搜索Firefox打印预览的问题,但没有成功。 最佳答案
我不太确定是什么导致了Firefox中的打印预览问题,但我通过给每个黄色的注释定位,即position: relative;
,并在注释div
中给出文本position: absolute
来解决了这个问题。
我还给了文本-div
az-index: 1
,这样当空间太拥挤时,它可以浮在大的灰色文本上。
这种解决方案的主要问题是,在不了解问题原因的情况下,解决方案是非常随意的,因此不太具有可复制性。因此,如果有人能解释发生了什么,以及为什么这种方法有效,我将不胜感激。假设不是火狐的错误?
div.Note
{
margin-top: 0px; margin-right: 12px;
margin-bottom: 8px; margin-left: 0px;
padding-left: 2em; padding-right: 2em;
padding-top: 1em; padding-bottom: 0.5em;
background-color: #FFFFB0;
width: 15em;
overflow: hidden;
border-radius: 1em;
border: 1px gray solid;
display: inline-block;
position: relative;
}
div.Note-text
{
background-color: transparent;
position: absolute; z-index: 1;
}
div.Note-figure
{
float: right; font-size: 4em; color: #D0E0E0;
padding: 0px; margin: 0px; vertical-align: top;
transform: rotate(-7deg);
border-radius: 0.5em;
background-color: white;
}