📄 07.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- The drawing won't look right in IE without a doctype like this --><html><head><script src="CSSDrawing.js"></script> <!-- Include our drawing class --><style>/* Styles for the figure box itself */.figure { border: solid black 2px; background-color: #eee;}/* Styles for grid lines */.grid { border: dotted black 1px; opacity: .1; }/* Styles for boxes in the figure */.boxstyle { border: solid black 2px; background: #aaa; padding: 2px 10px 2px 10px; font: bold 12pt sans-serif; text-align: center;}/* styles for line connecting the boxes */.boldline { border: solid black 2px; }</style><script>// Draw a grid in the specfied rectangle with dx,dy line spacingfunction drawGrid(drawing, x, y, w, h, dx, dy) { for(var x0 = x; x0 < x +w; x0 += dx) drawing.vertical(x0, y, h, "grid"); for(var y0 = y; y0 < y + h; y0 += dy) drawing.horizontal(x, y0, w, "grid");}function drawFigure() { // Create a new figure var figure = new CSSDrawing(500, 200, "figure"); // Add a grid to the drawing drawGrid(figure, 0, 0, 500, 200, 25, 25); // Draw four boxes in the figure figure.box(200, 50, 75, 25, "Life", "boxstyle"); // top box figure.box(50, 125, 75, 25, "Archaea", "boxstyle"); // line of 3 figure.box(200, 125, 75, 25, "Bacteria", "boxstyle"); // ..boxes below figure.box(350, 125, 75, 25, "Eukaryota", "boxstyle"); // ..the top one // This line is drawn down from the bottom center of the top "Life" box. // The starting y position of this line is 50+25+2+2+2+2 or // y + height + top border + top padding + bottom padding + bottom border // Note that this computation requires knowledge of both the code and // the stylesheet, which is is not ideal. figure.vertical(250, 83, 20, "boldline"); figure.horizontal(100, 103, 300, "boldline"); // line above 3 lower boxes figure.vertical(100, 103, 22, "boldline"); // connect to "archaea" figure.vertical(250, 103, 22, "boldline"); // connect to "bacteria" figure.vertical(400, 103, 22, "boldline"); // connect to "eukaryota" // Now insert the figure into the document, replacing the placeholder figure.replace("placeholder");}</script></head><body onload="drawFigure()"><div id="placeholder"></div></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -