我试图创建我的第一个网站并遇到显示样式表的问题。在离线模式下它工作正常（这意味着当它从我的硬盘中以 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;
}