0

私の名前はウィルで、何人かの人々のためにウェブサイトをコーディングしています。少しエラーが発生しました。どんな種類のコードを使用しても、ウェブサイトはページに正しく適応しません。たとえば、大画面では次のように表示されます。

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

一般的に、問題ないように見えます。しかし、側面の 2 つの要素の間の巨大なスペースはひどいものであり、私の意見では、コントラストと間隔が不十分な環境を作り出しています。

小さな画面での表示は次のとおりです。

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>
4

3 に答える 3

0

ラッパーを作成し、このように 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;
}
于 2013-11-14T02:46:53.917 に答える
0 
<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 を作成します。

これが役に立ったことを願っています

于 2013-11-14T01:25:30.113 に答える