Question

我的名字是Will，我正在为一些人编写网站代码。我遇到了一点错误。无论我使用什么类型的代码，网站都不会正确地调整它自己的页面。例如，这就是大屏幕上的样子：

http://i.stack.imgur.com/B5KLX.jpg

一般来说，看起来不错。然而，在我看来，两侧的两个元素之间的巨大空间是可怕的，并创造了对比度和间距差的环境。

以下是小屏幕上的显示效果：

http://i.stack.imgur.com/y0HFI.jpg

一般来说还不错。接受应该在右侧的缺失滚动条。从较小的计算机拍摄的照片是我喜欢该网站在所有计算机上查看的方式，但我需要一个滚动条。

以下是该页面的代码：

<HTML>
<HEAD>
<h1><font color="#000000" size="+1"><marquee  direction="right" bgcolor="green"       scrollamount="3">Website BETA: Version 1.0</marquee></font></h1>
<link rel="stylesheet" type="text/css" href="css.css">
<div class="fadeIn">
<center>
<div style="display: inline-block;" id="red">
<h1>Hinte's  </h1>
</div>
<div style="display: inline-block;" id="white">
<h1>Liberty  </h1>
</div>
<div style="display: inline-block;" id="blue">
<h1>Theatre</h1>
</div>
</center>
</div>
<br>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='active'><a href='art.html'><span>Art</span></a></li>
   <li class='active'><a href='biography.html'><span>Biography</span></a></li>
   <li class='last'><a href='contact.html'><span>Contact Us</span></a></li>
</ul>
</div>
<link rel="shortcut icon" href="favicon.ico">
</HEAD>
<br>
<br>
<br>
<body background="grayscale.jpg">
<div style="position:fixed;top:20em;left0em;right:4em;" id="text60">
<p>Gary Edward Hinte</p>
</div>
<div style="position:fixed;top:26em;left0em;right:7em;" id="text30">
<p>American Political Artist</p>
</div>
<div style="position:fixed;top:22em;left:1em;right:40em;">
<img class="grayBox" style="border: 0px solid black;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -khtml-border-radius: 10px;
            -webkit-border-radius: 10px;" width="600px" height="500px" src="JulianA.jpg">
</div>
</body>
<title>HLT - Home</title>
</HTML>

Answer 1

<html>
  <head>
     <title>HLT - Home</title>
     <link rel="icon" type="image/png" href="favicon.png" />
     <link href="css.css" rel="stylesheet" type="text/css" />
  </head>

<body>
<!--All of your content in here-->

</body>
</html>

如果您也放置样式表，我也将不胜感激，也不要复制和粘贴整个文档。只是您遇到问题的部分

我会推荐一些HTML和CSS教程。你有错误的想法。 body元素是除了导入和东西之外的所有内容。 head元素是导入和标题和内容的地方，而不是您想要显示的内容。

最后，我对你为什么甚至使用样式表感到困惑。看来你正在使用所有这些旧方法在HTML中进行样式设置。例如：center和font，您可以将大多数样式直接应用到元素中。

将它放在你想要的小图片上。我会在您的样式中添加max-width: 1280px;，或者在您的正文部分的所有内容周围创建一个指定宽度的容器DIV。

希望这有帮助

Answer 2

我很抱歉，但您的网站设置错误。试试这个。

<html>
    <title>Page Name</title>
    <meta tags />
    <styles that you need to link to />

    <body>
    anything you want people to see goes here!!!
    <scripts go here />
    </body>
</html>

也无法帮助你摆脱你的css，并且你的元素要正确显示，它们必须像我给你看的那样。

如果您希望自己的网站看起来相同或稍微相同，则需要使用%%%%来设置元素的样式，以便它们对窗口大小做出响应。

要将元素对齐，请使用：位置，边距，填充，左上角和右下角。

Answer 3

尝试创建一个包装器并将div放在BODY中，就像这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="css.css">
<title>HLT - Home</title>
  </head>
  <body>


<h1><font color="#000000" size="+1"><marquee  direction="right" bgcolor="green"       scrollamount="3">Website BETA: Version 1.0</marquee></font></h1>

<div id="wrapper">

<div class="fadeIn">
<center>
<div style="display: inline-block;" id="red">
<h1>Hinte's  </h1>
</div>
<div style="display: inline-block;" id="white">
<h1>Liberty  </h1>
</div>
<div style="display: inline-block;" id="blue">
<h1>Theatre</h1>
</div>
</center>
</div>
<br>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='active'><a href='art.html'><span>Art</span></a></li>
   <li class='active'><a href='biography.html'><span>Biography</span></a></li>
   <li class='last'><a href='contact.html'><span>Contact Us</span></a></li>
</ul>
</div>
<link rel="shortcut icon" href="favicon.ico">
</HEAD>
<br>
<br>
<br>
<body background="grayscale.jpg">
<div style="position:fixed;top:20em;left0em;right:4em;" id="text60">
<p>Gary Edward Hinte</p>
</div>
<div style="position:fixed;top:26em;left0em;right:7em;" id="text30">
<p>American Political Artist</p>
</div>
<div style="position:fixed;top:22em;left:1em;right:40em;">
<img class="grayBox" style="border: 0px solid black;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -khtml-border-radius: 10px;
            -webkit-border-radius: 10px;" width="600px" height="500px" src="JulianA.jpg">
</div>


</div> <!--closing wrapper-->
</body>
</html>

并将其添加到您的css文件

#wrapper {
width:1200px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

适合页面问题

3 个答案: