我在我的电脑上做了一个网站，但是当我把它加载到我的笔记本电脑上时，我注意到所有东西的尺寸都没有了。但是，它在我的电脑上看起来仍然很好。我知道这可能是在 css 中学到的一个很好的教训，但是目前你们认为你们中的任何人都可以看看我的 css 文件吗？
#cool_animate {
border-top: 10px solid gray;
border-bottom: 4px solid gray;
height: 195px;
background: url(images/scape.png) repeat-x;
-webkit-animation: move-city 15s infinite linear;
}
@-webkit-keyframes move-city {
0% { background-position: 0 0;}
100% { background-position: -256px 0;}
}
#boat {
height: 239px;
position: absolute;
top: -10px;
left: 200px;
-webkit-animation: wind 300s infinite linear;
}
@-webkit-keyframes wind {
from { left: 400px}
to { left: 1400px}
}
@-webkit-keyframes cloud {
from { left: 260px}
to { left: 280px}
}
#cloud {
height: 90px;
position: absolute;
top: 28px;
left: 300px;
-webkit-animation: cloud 9s infinite alternate linear;
}
#copter {
height: 90px;
position: absolute;
top: 28px;
left: 1700px;
-webkit-animation: copter 15s infinite alternate linear;
}
@-webkit-keyframes copter {
from { left: 1700px}
to { left: 1600px}
}
header {
font-size: 22px;
color: white;
background: linear-gradient(#C7E2EE, #0099CC);
font-family: 'Lobster', cursive;
box-shadow: 5px 5px 3px 4px gray;
border-radius: 10px; /* this makes it rounded */
padding: 40px 40px;
border: 1px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-bottom:0px;
height: 200px;
}
img.right {
position: relative;
top: -16px;
right: -200px;
}
#inside_p {
display:inline;
}
#cool_nav {
margin: 190px 160px 40px 140px;
font-family: 'Lobster', cursive;
color: black;
position: absolute;
z-index: 7;
left: 0;
width: 204px;
top: 72px;
font-size: 24px;
line-height: 1.2;
}
#facts_nav {
background-color: rgb(211, 211, 211);
margin: 700px 160px 40px 180px;
color: black;
position: absolute;
z-index: 7;
left: 0;
width: 204px;
top: 72px;
font-size: 17px;
line-height: 1.2;
border: 1px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
border-radius: 10px;
padding: 26px 20px;
}
body {
background: linear-gradient(#69D1FF, white);
}
#cool_nav p {
background-color: #30C722;
border-radius: 7px;
}
#cool_nav p:hover {
background-color: #3DB0E6;
color: #ffffff;
width: 160px;
border-radius: 30px;
}
ul {
list-style-type: none;
}
#example li:hover {
background-color: #82C0DB;
}
#toot li:hover {
background-color: #82C0DB;
}
#intro li:hover {
background-color: #82C0DB;
}
#main_content {
font-size: 0px;
color: black;
background-color: rgb(255, 209, 124);
font-family: 'Lobster', cursive;
border-radius: 10px; /* this makes it rounded */
padding: 1px 40px;
border: .5px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-top:.5px;
margin-bottom: 0;
height: 400px;
}
#cool_div {
font-size: 19px;
color: white;
background-color: rgb(255, 113, 255);
font-family: 'Lobster', cursive;
box-shadow: 5px 5px 3px 4px #999;
border-radius: 10px; /* this makes it rounded */
padding: 1px 40px;
border: .5px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-top: 0px;
height: 200px;
margin-bottom: 0
}
#fun_times:hover {
content: url('images/batman.jpg');
height: 140px;
width: 150px;
}
#cool_footer {
font-size: 22px;
color: white;
background-color: rgb(74, 255, 74);
font-family: 'Lobster', cursive;
box-shadow: 5px 5px 3px 4px #999;
border-radius: 10px; /* this makes it rounded */
padding: 1px 40px;
border: .5px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-top: 0px;
top-margin: 0px;
height: 200px;
}
a:link {
-webkit-transition: .2s;
transition: .2s;
}
a:hover {
color: hsl(209, 100%, 32%);
}
.btn {
-moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
box-shadow:inset 0px 1px 0px 0px #ffe0b5;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
background-color:#fbb450;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #c97e1c;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:bold;
padding:6px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
.btn:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
background-color:#f89306;
}
.btn:active {
position:relative;
top:1px;
}
}
不确定这是否真的很重要，但这里也是我的 html 文件
<!DOCTYPE html>
<html>
<!-- this is the start of my head -->
<head>
<title>Rails Tutorial</title>
<!-- js and css sheets -->
<script src="cool.js"></script>
<script src="jquery.js"></script>
<link href="cool.css" rel="stylesheet">
<link href="animate.css" rel="stylesheet">
<!-- my favicon for top of page -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon" title="A super fun rails tutorial">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- HEADER -->
<div>
<h1 id="cool_animate"></h1>
<img src="images/cool.png" id="boat">
<img src="images/cloud.png" id="cloud">
<img src="images/copter.png" id="copter">
</div>
</head>
<!-- this is the end of my head -->
<body>
<!-- this is the start of my header -->
<header class="animated swing">
<div <div style="width:200px; float:left;">
<img src="images/study.png " width="140" height="120" title="LEARNING IS FUN!">
</div>
<h1 id="cool_h1">Welcome aboard!</h1>
<p>This is a simple tutorial site to help you learn and get more confortable with programming in Rails. I made this for people who are just getting started and are considering learning how to program.</p>
</header>
<!-- this is the end of my header -->
<!-- this is the start of my link nav -->
<nav id="cool_nav" class="animated tada">
<ul>
<li id="toot">
<p>tutorial</p>
<ul>
<li>level one</li>
<li>level two</li>
<li>level three</li>
</ul>
</li>
<li id="intro">
<p>Introduction</p>
<ul>
<li>about Ruby</li>
<li>about Rails</li>
<li>about Erb</li>
</ul>
</li>
<li id="example">
<p>Examples</p>
<ul>
<li>example 1</li>
<li>example 2</li>
<li>example 3</li>
</ul>
</li>
</ul>
</nav>
<!-- this is the end of my nav -->
<!-- this is the start of fun facts nav -->
<nav id="facts_nav">
<code>
<p>what does MVC stand for?</p>
<p>many view controller</p>
<p>model view controller</p>
<p>method via controller</p>
<button>show answer</button>
<div style="display: none">
<p>model view controller</p>
</div>
</code>
</nav>
<script>
$( "button" ).click(function() {
$( "div" ).show( "slow" );
});
</script>
<!-- this is the end of my fun facts nav -->
<!-- this is the start of my main section -->
<section id="main_content" class="animated shake">
<button id="go" class="btn">Table of contents</button>
<div id="block">
<h1>1: Tutorial</h1>
<p>The rails tutorial that I made has 3 levels and each level has its own set of challenges.</p>
<h2>2: Introduction</h2>
<p>this introduction will tell you about ruby a programming language, rails the
platform that is build off of ruby, and about Embedded Ruby in our html.</p>
<h2>3: Examles</h2>
<p>Here I will give you three examples of working rails programs that I built.</p>
</div>
</section>
<!-- this is the end of my main section -->
<script>
$( "#go" ).click(function() {
$( "#block" ).animate({
// width: "70%",
// opacity: 0.4,
marginLeft: "30px",
fontSize: "17px",
borderWidth: "4px"
}, 1500 );
});
</script>
<!-- this is the start of cool div -->
<div id="cool_div">
<div>
<p></p>
</div>
<div <div style="width:200px; float:left;">
<a href="http://cheatermoves.github.io/" id="fun_times">
<img src="images/me.jpg" width="150" height="140">
</a>
</div>
<div style="width:400px; float:left;">
<p class="speech">Click on my photo to view my website or follow me on twitter. Always looking forward to sharing new tweets.</p>
</div>
<div style="width:150px; float:right;">
<a href="https://twitter.com/lanners_cool">
<img src="https://si0.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png" width="140" height="120">
</a>
</div>
</div>
<!-- this is the end of cool div -->
<!-- this is the start of cool footer -->
<footer id="cool_footer">
<p>Here are some helpful links to help you learn rails</p>
<ul>
<li><small><a href="http://ruby.railstutorial.org/">Hartl tutorial</a></small</li>
<li><small><a href="http://guides.rubyonrails.org/getting_started.html">Getting started with rails</a></small></li>
<li><small><a href="http://railscasts.com/episodes/310-getting-started-with-rails">Rails Casts intro video</a></small></li>
</ul>
</footer>
<!-- this is the end of cool footer -->
</body>
</html>