1

我试图创建我的第一个网站并遇到显示样式表的问题。在离线模式下它工作正常（这意味着当它从我的硬盘中以 chrome 预览时）。但是，当它从 webhost（特别是 000webhost.com）加载时，它似乎显示了我的 css 的一些属性，但是带有 div 的位看起来像是被挤压了。我还注意到，在慢速加载过程中，它应该出现，然后在傻瓜加载后又回到它的“压缩版本”。有谁知道这是我的代码（完全一团糟）或主机提供商的错？有代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="refresh" content="1;url=http://cooldoodling.com/cooldoodling.html">-->
<title>CoolDoodling.com</title>
<link rel="stylesheet" href="main.css"/>
<script src="base64.js" type="text/javascript"></script>
<script src="canvas2image.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
var bMouseIsDown = false;
var oCanvas = document.getElementById("thecanvas");
var oCtx = oCanvas.getContext("2d");
oCanvas.onmousedown = function(e) {
    bMouseIsDown = true;
    iLastX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
    iLastY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
}
oCanvas.onmouseup = function() {
    bMouseIsDown = false;
    iLastX = -1;
    iLastY = -1;
}
oCanvas.onmousemove = function(e) {
    if (bMouseIsDown) {
        var iX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
        var iY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
        oCtx.moveTo(iLastX, iLastY);
        oCtx.lineTo(iX, iY);
        oCtx.stroke();
        iLastX = iX;
        iLastY = iY;
    }
}

function clearCanvas(){
      document.getElementById('resetbtn').addEventListener('click', function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
  }, false);
}
function showDownloadText() {
    document.getElementById("buttoncontainer").style.display = "none";
    document.getElementById("textdownload").style.display = "block";
}

function hideDownloadText() {
    document.getElementById("buttoncontainer").style.display = "block";
    document.getElementById("textdownload").style.display = "none";
}

function convertCanvas(strType) {
    if (strType == "PNG")
        var oImg = Canvas2Image.saveAsPNG(oCanvas, true);
    if (strType == "BMP")
        var oImg = Canvas2Image.saveAsBMP(oCanvas, true);
    if (strType == "JPEG")
        var oImg = Canvas2Image.saveAsJPEG(oCanvas, true);

    if (!oImg) {
        alert("Sorry, this browser is not capable of saving " + strType + " files!");
        return false;
    }

    oImg.id = "canvasimage";

    oImg.style.border = oCanvas.style.border;
    oCanvas.parentNode.replaceChild(oImg, oCanvas);

    showDownloadText();
}

function saveCanvas(pCanvas, strType) {
    var bRes = false;
    if (strType == "PNG")
        bRes = Canvas2Image.saveAsPNG(oCanvas);
    if (strType == "BMP")
        bRes = Canvas2Image.saveAsBMP(oCanvas);
    if (strType == "JPEG")
        bRes = Canvas2Image.saveAsJPEG(oCanvas);

    if (!bRes) {
        alert("Sorry, this browser is not capable of saving " + strType + " files!");
        return false;
    }
}

document.getElementById("savepngbtn").onclick = function() {
    saveCanvas(oCanvas, "PNG");
}
document.getElementById("savebmpbtn").onclick = function() {
    saveCanvas(oCanvas, "BMP");
}
document.getElementById("savejpegbtn").onclick = function() {
    saveCanvas(oCanvas, "JPEG");
}

document.getElementById("convertpngbtn").onclick = function() {
    convertCanvas("PNG");
}
document.getElementById("convertbmpbtn").onclick = function() {
    convertCanvas("BMP");
}
document.getElementById("convertjpegbtn").onclick = function() {
    convertCanvas("JPEG");
}

document.getElementById("resetbtn").onclick = function() {
    var oImg = document.getElementById("canvasimage");
    oImg.parentNode.replaceChild(oCanvas, oImg);
    hideDownloadText();

}

}

</script>
</head>
<body class="body">
    <div id="big_wrapper" >
        <header id="top_header">
            <h1>Welcome do Doodling.com!</h1>
        </header>
        <iframe src="https://www.facebook.com/plugins/like.php?href=http://cooldoodling.com"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>

        <nav id="top_menu" role="navigation">
            <ul>
                <li>Home</li>
                <li>About project</li>
                <li>Contact</li>
            </ul>
        </nav>

        <div id="container">
        <section id="main_section" role="main">
            <article>
                <header>
                    <hgroup>
                        <div id="pcontainer" style="display:block;">
                            <input type="button" id="snake" value="colour snake">
                            <br/>
                            <input type="button" id="eyes" value="eyes">
                            <input type="button" id="resizebtn" value="Resize">
                            <div id="alertBox">
                                <span id="close" onclick="hide()">X</span>
                                <br/>
                                <div style="clear:both"></div>
                                <p id="alertBoxText">some text.</p>
                                </div>
                            <script>
                                customAlert('some text');
                            </script>
                        </div>
                        <!--<canvas width="200" height="200" style="border:1px solid black;" id="thecanvas"></canvas>-->
                        <canvas width="200" height="200" style="border:1px solid black;" id="thecanvas"></canvas>
                        <br/><br/>
                        <div id="textdownload" style="display:none;font-style:italic;">Now you can right click and download the image<br/>
                            <input type="button" id="resetbtn" value="Reset">
                            <script>
                                var canvas = document.getElementById('thecanvas');
                                var context = canvas.getContext('2d');
                                document.getElementById('resetbtn').addEventListener('click', function(){context.clearRect(0, 0, canvas.width, canvas.height);
                                }, false);
                            </script>

                        </div>

                        <div id="buttoncontainer" style="display:block;">
                            <input type="button" id="savepngbtn" value="Save PNG">
                            <input type="button" id="convertpngbtn" value="Convert to PNG">
                            <br/>
                            <input type="button" id="savebmpbtn" value="Save BMP">
                            <input type="button" id="convertbmpbtn" value="Convert to BMP">
                            <br/>
                            <input type="button" id="savejpegbtn" value="Save JPEG">
                            <input type="button" id="convertjpegbtn" value="Convert to JPEG">

                        </div>
                    </hgroup>
                </header>
                    <p>tutaj wszystko wskakuje</p>
                <footer>
                    <p>-express yourself ;)-</p>
                </footer>
            </article>

        </section>
        <aside id="side_news" role="complementary">
            <a href="photobooth/photobooth.html"<h4>Photo Booth</h4></a>
            see your saved work list
        </aside>
        </div>
    </div>
</body>
     <!-- run all the javascript stuff -->
     <script src="processing-1.3.6.min.js"></script> <!-- Include the processing.js commands -->
     <script src="ColourCenitpede.js"></script> <!-- The actual source code for your program -->
     <script type="application/javascript">
        var canvas = document.getElementById("thecanvas"); //get the canvas that processingjs will use
        var processingInstance = new Processing(canvas, sketchProc); //pass the function sketchProc (defined in myCode.js) to Processing's constructor.*/

     </script>
</html>

CSS：

*{
    margin: 0px;
    padding: 0px;
}
 h1{
    font:bold 20px Tahoma;
 }
  h2{
    font:bold 14px Tahoma;
 }
 header, section, footer, aside, nav, article, hgroup{
    display: block; /* block position on after another*/
 }
 body{
    width:100%; /* crucial */
    display:-webkit-box;
    -webkit-box-pack: center; /*center align boxes*/
    background: black;
 }
 #big_wrapper{
    max-width: 1000px;
    /*minimum-height: 1000px;*/
    margin: 20px 0px;
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1; /*allows shrink and gorw horizontally*/
    /*background: #EB8C07;*/
    background: -webkit-linear-gradient(180deg, brown,red);
    -webkit-box-shadow: rgba(110,110,200, 0.7) 10px 10px 10px inset;

 }
 #top_header{ /*logo itp*/
    background:yellow;
    border: 3px solid blue;
    -webkit-border-radius:25px; /*round corners*/
    /* rgb range 0-256 + transperancy alpha, right-left, down, blur, inside- inset*/
    -webkit-box-shadow: rgba(110,110,100, 0.7) 10px 10px 10px inset;
    padding: 20px;
 }
  #top_menu{
    border: red;
    background: blue;
    color: white;
 }
   #top_menu li{
    display:inline-block;
    list-style: none;
    padding: 5px;
    font: bold 14px Tahoma;
    -webkit-transition: webkit-transform 2s, opacity 2s, background 2s;
    -webkit-border-radius:25px;
 }
 #top_menu li:hover{
    -webkit-transform: rotate(360deg);
    opacity: 1;
    background: #1ec7e6;

 }
  #new_div{
    display:inline-block;
    -webkit-box-orient: horizontal;
    text-shadow: rgb(110,110,110) 3px 3px 5px;
 }
 article:first-child{
    background: -webkit-radial-gradient(center, circle, red 0%, orange 50%);

 }
 #main_section{
    border: 1px solid blue;
    -webkit-box-flex: 1;
    padding: 20px;
    margin:20px; 
 }
 #side_news{
    border: 1px solid red;

    -webkit-box-flex: 0; /*fixed*/
    width: 220px;
    margin:20px 0px; /* 20px from top i 0 from bottom*/
    padding: 30px;
    /*can be start gradient from top*/
    background: -webkit-linear-gradient(45deg, orange,violet);
    -webkit-transition: -webkit-transform 2s;
 }
 #side_news:hover}{
    -webkit-transform: rotate(45deg);
 }
 #the_footer{
    /*clear: both;*/
    text-align:center;
    padding:20px;
    border-top:2px solid green;
    -webkit-transform:rotate(12deg) translate(-100px, -50px) scale(.8);

 }
 article{
    background:#FFFBCC;
    border: 1px solid red;
    padding: 20 px;
    margin-bottom: 15px;
 }
 article footer{
    text-align: right;
 }
 #map_canvas {
        width: 500px;
        height: 400px;
        background-color: #CCC;
      }
4

0 回答 0