0

ウェブサイトの構築方法について何か提案があるかどうか疑問に思っていました. 上部にロゴがあり、その下にナビゲーション バーが必要で、最後にその下にページのコンテンツが必要でした。私はそれを何時間もいじりましたが、ナビゲーションバーをロゴの下とメインコンテンツの上に移動させることができないようです. 誰にもアイデアはありますか?これが私のコードです:

<!DOCTYPE html>

        
<html> 

<head>
<link rel="stylesheet" href="main.css" type="text/css" />

<script type="text/javascript" src="slideshow.js"></script>


<style>
      #Slideshow1 img { width:1200px; height:500px }
 </style>


<title> Law Firm </title> <!-- Seriously, don't forget to change that.-->

<div class="heading">
<div id="head">

<div id="logo">
    <img src="logo.png" alt="Logo" width="1700" height="175">
</div>

<div id="navigation">
    <a href="#">Home</a>
    <a href="#">About us</a>
    <a href="#">Areas of Practice</a>
    <a href="#">Reviews</a>
    <a href="#">I'm running out of ideas</a>
    <a href="#">Boring....</a>
</div>
</div>
</div>





<!-- Include content types, links to external resources, keywords for the search engine, epirations and stuff, and whatever else needs to go here like titles and website icons. -->

</head>

<body> <!-- Obviously, the body starts here. -->

<div class="main">
<div id="content"> <!-- Let's kick it off with some stuff, of course. -->

<!-- Now let's get some java up in here!! -->


    <script>

      var imgArray = new Array();
      imgArray[0] = "images/pic1.png";
      imgArray[1] = "images/pic2.png";

      slideshowFade('Slideshow1','',imgArray,20,5000);
    
    </script>



</div>
</div>




</body>

</html>
4

4 に答える 4

2

何が起こっているのかを JSFiddle にしてくれれば助かるかもしれませんが、私はこれに答えることができると思います。

1) head タグに何かを入れています。意味を誤解していると思います。これはページの「見出し」ではなく、ページ自体には表示されない情報 (ページの名前、ページの種類など) を示すためのものです。EVERYTHING (すべての div を意味します) がbodyタグに入ります! 本文とは、Web サイトの本文ではなく、ページに表示される内容を意味します。

2) スタイル シートが添付されていないため、推測することしかできませんがclear: both、ナビゲーション、見出し、およびロゴのスタイルがないと推測されます。

3) #2 で述べたのと同じ要素に、display: blockまだ設定されていない場合に備えて追加することもできます。

4) 2 と 3 が機能しない場合は、すべての要素の高さを定義してみてください (問題の原因によっては、これでうまくいく場合もあります)。

1 では問題は解決しませんが、それは正しいことです。2 で問題は解決するはずですが、main.cssよくわからないので、質問に記入する必要があります。また、ulmenue のタグの使用も検討してください。やる価値はあります。

JSFiddle の例を次に示します: http://jsfiddle.net/5JqUt/

于 2012-12-24T18:45:20.903 に答える
1

表示されないように、tragにHTMLKコードを記述しています。ページのタグのhead間にすべてを記述する必要があります。タグから取り出して、タグの中に入れるだけ<body></body>です。<div class="heading">headbody

ここにHTML に関する回答があります。フィドルの例を見ると、少し理解できます。Web ページに表示されるすべての要素はbodyタグのコンテンツであることに注意してください。つまり、Web ページに表示されるものはすべて に属し<body>your page content goes here</body>ます。

于 2012-12-24T18:42:58.163 に答える
1

<div>要素に構造要素 ( sなど) を含めることはできません<head>。すべての構造要素は に属し<body>ます。

于 2012-12-24T18:44:09.780 に答える
0

これは、私があなたのために作成した少し厄介なコードです (ただし、機能します):

    <body bgcolor="#f5f5f5">
<link href='http://fonts.googleapis.com/css?family=Lato:100|Lato:300' rel='stylesheet' type='text/css'>

<div style="position:absolute;top:0px;left:0px;width:100%;">
<center>
<div style="color:#c3c3c3;font-size:75px;font-family:Lato;padding-top:25px;font-weight:100;">designing rocks</div>

<div style="text-align:left;width:465px;font-size:20px;font-family:Lato;font-weight:300;padding-top:10px;"><span style="color:#00bbbb;">home</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>
</center>

<div style="position:absolute;top:165px;left:0px;width:100%;">
<center>
<div style="text-align:left;width:600px;background-color:white;font-family:Lato;font-weight:300;padding:25px;color:gray;">I LOVE content!</div>
</div>
</div>

ナビゲーション リンクのホバー効果など、いつでも装飾を行うことができます... 機能するかどうか教えてください。:) プロジェクトのアイデアを少しかき出すことはいつでもできます。

ああ、他の答えは正しいです。レイアウトが機能しない理由は、ページのコンテンツが頭の中にあることが原因である可能性があります。head は、ページのタイトル (タイトル) と、他のスクリプトが head に入る前にロードしたいスクリプト用です。本文は、ユーザーに表示されるページの一部です。

于 2012-12-24T19:03:06.867 に答える