Html
Html note.
<!– more –>
Html Dom
CSS
页面全屏
@media all { html { margin: 0; /* background-image: url(/worg/images/orgmode/org-mode-unicorn-original-logo.png); */ /* background-attachment: fixed; */ /* background-position: right bottom; */ /* background-repeat: no-repeat; */ background-color: white; } body { color: black; margin-top: 0; line-height: 1.4rem; } body #content { padding-top: 2em; margin: auto; /* max-width: 48em; */ /* 支持页面全屏 */ max-width: 90%; background-color: white; } }
HowTo
显示一组图片
<!DOCTYPE html> <html> <body> <div id="imgGroup0"> <img id="imgGroup" src="https://www.kasandbox.org/programming-images/animals/fox.png" style="display:block"/> <img id="imgGroup" src="https://www.kasandbox.org/programming-images/animals/cat.png" style="display:none"/> <img id="imgGroup" src="https://www.kasandbox.org/programming-images/animals/fox.png" style="display:none"/> </div> <br> <b id="curImgIdx0">0</b> <button onclick="slideShow(0, 0)">0</button> <button onclick="slideShow(0, 1)">1</button> <button onclick="slideShow(0, 2)">2</button> <script> function slideShow(groupIdx, imgIdx) { container = document.getElementById("imgGroup"+groupIdx); if(container == null) return; for(i=0; i<container.childElementCount; i++) { if(i==imgIdx) { container.children[i].style.display = "block"; } else { container.children[i].style.display = "none"; } } curImgIdxLabel = document.getElementById("curImgIdx"+groupIdx) if(curImgIdxLabel == null) return; curImgIdxLabel.innerHTML = imgIdx; }; function slideShowInit() { for(groupIdx=0; groupIdx<10; groupIdx++) { container = document.getElementById("imgGroup"+groupIdx); if(container == null) return; slideShow(groupIdx, 0) } } slideShowInit(); </script> </body> </html>
iframe 添加说明文字
<body> <figure> <iframe src="https://wolfand11.gitee.io"></iframe> <figcaption>This is my blog</figcaption> </figure> </body> </html>