UP | HOME

Html

Table of Contents

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>

参考资料