Question

我正在尝试创建一个全屏网站，右侧是全屏图像，左侧是垂直菜单和徽标。

html＆amp;到目前为止我设法构建的css代码是这样的，但我不知道如何使整个网站成为全屏：

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ella - Organizator de evenimente</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

</style>
</head>

<body>
<div id="page">   

        <header>
        <img src="imagini/logo.jpg" width="150" height="150" alt="logo ella organizator de evenimente">
        </header>

        <nav>
            <ul>
            <li><a href="#">Despre</a></li>
            <li><a href="#">Servicii</a></li>
            <li><a href="#">Galerie</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <footer>
            <a href="#"><img class="social" src="imagini/Facebook.png" width="32" height="32" alt="poza facebook" ></a>
            <a href="#"><img class="social" src="imagini/LinkedIn.png" width="32" height="32" alt="poza linkedin"></a>
            <a href="#"><img class="social" src="imagini/Twitter.png" width="32" height="32" alt="poza twitter"></a>
            <a href="#"><img class="social" src="imagini/Google+.png" width="32" height="32" alt="poza google+"></a>
        <p>&copy; 2014 Chițu Ștefan</p>
        </footer>

        <aside>
        <img src="imagini/poza-dreapta.jpg" width="512" height="658" alt="poza dreapta">
        <h1>Fericirea autentică nu are vârstă ...</h1>
        </aside>

</div>


</body>

</html>

＆安培;

CSS

@charset "utf-8";
/* CSS Document */

html, body {
   width: 100%;
   height: 100%;
   margin: 0px;
   background-color: #fff;
}

#page {
    position: relative;
}
#page header img {
    float: left;
    position: absolute;
    left: 180px;
    top:68px;
}

#page nav {
    font-size: 21px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    color: #0c0c0c;
    text-decoration: none;
    float: left;
    position: absolute;
    left: 222px;
    top: 267px;
}

ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    line-height: 1.6em;
    font-size: 21px;
}

ul li a, ul li a:visited {
    text-decoration: none;
    color: #0c0c0c;
}

ul li a:hover, ul li .current {
    color: #F00;
    text-decoration: none;
}

aside {
    margin: 0px;
    padding: 0px;
    float: left;
    position: absolute;
    left: 700px;
}

#page aside img {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;

}

footer {
    text-align: center;
    float: left;
    left: 200px;
    position: absolute;
    top: 600px;
    font-size: 14,6px;
}

h1 {
    float: left;
    position: absolute;
    top: 340px;
    left: 20px;
    font-size: 34px;
    color: #0c0c0c;
    font-weight: 600;
}

JSFiddle demo

Answer 1

您可以使用此代码

var fullscreen = false;    
var viewFullScreen = document.getElementById("fullscreen");
     var exitFullScreen = document.getElementById("roadmap-fullscreen-exit-button");
     addFullscreenEventListener(viewFullScreen);
     addFullscreenEventListener(exitFullScreen);
        function addFullscreenEventListener(elem){
          if (elem) {
            elem.addEventListener("click", function () {
              if(fullscreen){
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                }
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                }
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }
              }else{
                 if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
              }
            }, false);
        }
        }

HTML

您可以使用以下锚标记。点击此按钮，您的网站将全屏显示

<a href="#" id="fullscreen">Fullscreen</a>

CSS全屏网页

1 个答案: