Question

在加载页面之前，我的网页会变成白色，并且看起来好像所有背景图像都加载在一起（无论是那个还是它们都没有下沉）。我做了一些研究发现了一些关于精灵（没有工作）的事情，也改变了从jpg-＆gt; png-＆gt; gif和back（我甚至交过几个）的图片，有人可以帮我解决这个问题。 PS。别介意一群＆＃34;国王＆＃34;他们只是占位符，看看背景如何。 - 谢谢你

CSS：

    * {
        margin:0px;
        padding:0px;

        list-style-type:none;
        }
        html{

        background-image:url("Aba2.jpg");
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover;
        text-align:center;

        }
        header, section, footer, aside, nav,article{display:block}

        #Wrapper{

         width:1100px;
         margin:20px auto;


        }
        #H_wrap{
         padding:10px;
         height:150px;
         background-image:url("Abracci1.jpg");
         background-repeat:repeat-x;
         -webkit-background-size:cover;
         -moz-background-size:cover;
         -o-background-size:cover;
         background-size:cover;

        }

        #M_head{
        padding:10px;
        font:italic bold 34px/30px "Times New Roman" Times, arial;
        Text-align:center;
        color:#000000;
        text-shadow:2px 2px #999999;
        text-decoration:underline;


        }

        #N_bar {
        padding:40px;
        text-align:center;
        word-spacing:6em;
        font:italic bold 25px/30px "Times New Roman" Times, arial;
        text-shadow:3px 3px grey;


        }

         a:link.NB{
         color:white;
        }
         a:visited.NB{
         color:black;
        }
         a:hover.NB{
         color:GOLD;
        }
         a:active.NB{
         color:#423243;
        }


        #N_bar li{
        display:inline-block;
        }

        #M_section{
        background-image:url("Aba3.jpg");
        background-position:center;
        padding:20px;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover;
        }
 END CSS.     
HTML:
        <!Doctype html>
    <html lang="eng">
    <head>
     <meta charset="uft-8"/>
     <link rel="stylesheet" href="Abracci_main.css"/>
    </head>
    <html>
    <body>
       <div id="Wrapper">
        <div id="H_wrap">

             <header id="M_head">
             <h1>Abracci</h1>
             </header>


             <nav id="N_bar">
                 <ul>

                     <li><a class="NB" href="https://css-tricks.com/perfect-full-page-background-image/">Men</a></li>
                     <li><a class="NB" href="#">Women</a></li>
                     <li><a class="NB" href="#">Children</a></li>
                     <li><a class="NB" href="#">Apparel</a></li>
                 </ul>
             </nav>
             </div>
             <section id="M_section">
                  <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li>

             </section>
             <aside id="M_aside">

             </aside>
             <footer id="M_footer">

             </footer>

          </div>



    </body>
    </html>

        }
END HTML.

Answer 1

使用chrome，firefox或Internet Explorer中的validator,和浏览器开发者工具。网络标签会告诉您到底发生了什么。请修复问题的格式（缺少html标记，额外}等

网页速度慢

1 个答案: