Question

这是我的代码。这让我非常沮丧。

html {
  height:100%;
  width:100%;
}
body {
  background-color: #3D56E3;
  margin:0;
  width:100%;
  height:100%;
}
#title {
  background-color: #A8B5ED;
  border: 2px solid black;
  font-family: Times New Roman;
  margin: 20px 900px 30px 0;
  text-align: left;
  position: absolute;
  left: 0;
  top: 0;
  padding-left: 5px;
  padding-right: 5px;
}
#title:hover {
  color: #271573;
  transition: 0.5s;
 }
.intro {
  background-color: #A8B5ED;
  border: 2px solid black;
  font-family: Times New Roman;
  margin: 90px 900px 30px 0;
  text-align: left;
  top: 8px;
  left: 0;
  position: fixed;
  padding-bottom: 15px;
  padding-right: 5px;
  padding-left: 5px;
 }
 marquee {
   box-shadow:0 0 10px black;
   position: fixed;
   top: 0;
   border-bottom: solid 2px black;
   background-color: black;
   right: 0;
   color: white;
   z-index: 2;
   width: 100%;
 }
.Projects {
  border: 2px solid black;
  position: fixed;
  margin: 20px 900px 30px 50px;
  left: 1120px;
  width: 200px;
  top: 0;
  height: auto;
  max-height: 50%;
  padding-left: 5px;
  background-color: #A8B5ED;
}
#Projects-Header:hover {
  color: #271573;
  transition: 0.5s;
}
a:link {
  color:#2333DE;
}
a:visited {
  color: #7855D9;
}
a:hover {
  color: #4B6BEB;
  text-decoration: none;
}
a:active {
  color: #092AAD;
}
#footer{
  color: white;
  border-top: 2px solid black;
  position: fixed;
  left: 0;
  bottom: 0;
}

<!DOCTYPE HTML>
<html>
  <!--Website by Keyblademaster33-->
<head>
  <link type="text/css" rel="stylesheet" href="http://keybladia.site11.com/style.css"/>
  <link type="icon/ico" rel="shortcut icon" href="favicon.ico?v=2"/>
  <script type="text/javascript" src="http://keybladia.site11.com/home.js">
  </script>
	<title>
	Keybladia | Home Page
	</title>
</head>
<body>
     <marquee title="Site News" scrollamount="5">
     The Future is now, Thanks to Science!!! </marquee>
<h1 id="title">Welcome To Key's Website</h1>
<p class="intro"> Sorry for almost quiting on this website. I got frustrated
   and quit working on the website for about a month and a half. In the end,
   I couldn't give up and started working again. Hopefully, It should not happen again because
   I have more vigor than I ever did before. And to show how sorry I am, I redesigned the
   entire home page of the website.</p>
   <a href="https://plus.google.com/116883163929378015997" rel="publisher"></a>
   <div class="Video">
   </div>
  <div class="Projects">
  <h3 id="Projects-Header">Projects</h3>
   &nbsp; Site Navigation
  <ul>
    <li><a title="Now you don't have to hit the back button" href="http://keybladia.site11.com/"> Home </a></li>
    <li><a title="Them updates" href="http://keybladia.site11.com/pages/update_notes.html"> Site Updates </a></li>
    <li><a title="The future is now!" href="http://keybladia.site11.com/pages/future_plans.html"> Future Plans </a></li>
    <li><a title="Fight the Man!" href="http://keybladia.site11.com/school"> School </a></li>
  </ul>
  &nbsp; Cool Links
  <ul>
    <li><a title="Codecademy" href="http://www.codecademy.com/">Go here to learn code!</a></li>
    <li><a title="Reese Trcalek Inc." href="https://www.youtube.com/channel/UCY9Y9OyMwToDklOQ0-buegA">My YouTube Channel</a></li>
    <li><a title="Too Many Tags!" href="http://www.w3schools.com/">Coding References</a></li>
    <li><a title="You can't handle the code!" href="http://stackoverflow.com/">Coding Help</a></li>
  </ul>
  </div>
  <div id="footer">
    <p> This website is created by Keyblademaster33 in 2014 - 2015 </p>
  </div>
</body>
</html>

我请求帮助。讲述您在代码中看到的其他问题。我已经尝试了大约一个月左右来搞清楚。这是我的网站的链接，如果这将有所帮助。 http://www.keybladia.site11.com/

Answer 1

http://jsfiddle.net/ay2Lav3c/15/ 只是搞砸了一点。根据需要自定义它。

    body {
background-color: #3D56E3;
}
#title {
display: inline-block;
background-color: #A8B5ED;
border: 2px solid black;
font-family: Times New Roman;
text-align: left;
position: absolute;
top: 0px;
left: 0px;
padding-left: 5px;
padding-right: 5px;
}
.intro {
background-color: #A8B5ED;
border: 2px solid black;
font-family: Times New Roman;
text-align: left;
top: 8px;
left: 0;
position: absolute;
top: 90px;
right: 250px;
margin-right: 50px;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 5px;

}
marquee {
box-shadow:0 0 10px black;
position: fixed;
top: 0;
border-bottom: solid 2px black;
background-color: black;
right: 0;
color: white;
z-index: 2;
width: 100%;
}
.Projects {

border: 2px solid black;
position: absolute;
top:0px;
right: 10px;
width: 200px;
top: 0;
height: auto;
padding-left: 5px;
background-color: #A8B5ED;
}

Answer 2

.Projects - 你可以使用float：right;而不是带边距的固定位置。

 .Projects {
  border: 2px solid black;
 float: right;
 width: 200px;
 top: 0;
 height: auto;
 max-height: 50%;
 padding-left: 5px;
 background-color: #A8B5ED;

}

我无法弄清楚为什么我的网站在较小的屏幕上出现故障。我该怎么办？

2 个答案: