如何构建HTML页面的布局？

我想知道如果任何人有任何建议如何构建一个网站。我在顶部有一个标志，我想要一个导航栏在下面，最后是我想要的页面内容。我搞砸了好几个小时，但我似乎无法让导航栏走到标识下方，并在主要内容上方。有没有人有任何想法？这里是我的代码：如何构建HTML页面的布局？

<!DOCTYPE html> 

<!-- Copyright Pumplead Studios, 2013 --> 

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

来源

2012-12-24 user1751797

看看添加一个CSS页面。有很多教程让你开始。 –

你还需要发布你的'main.css'文件，以便我们可以看到你迄今为止做了什么。 – finspin

java！= javascript –

您正在撰写HTMLK代码在head TRAG所以这是不可见的。你应该写你的页面标签之间的所有内容<body></body>。只需将<div class="heading">带出head标签，并将其放入body标签。

Here is an answer关于HTML，如果你看看fiddle examle那么你可以理解它。请记住，网页中的每个可见元素都是body标记的内容，这意味着无论您在网页中看到什么内容，都属于<body>your page content goes here</body>。

来源

2012-12-24 18:42:58

浏览器会自动关闭头部以使内容可见。 –

@JanDvorak，我没有明白。在'OP'提供的例子中，'head'标记已经关闭，他/她在'head'标记中放置了一些'html'代码。 –

你不能有一个<head>元结构元素（如您的<div> S）。所有结构元素都属于<body>。

来源

2012-12-24 18:44:09

，如果你做了什么事的的jsfiddle可能有帮助，但我想我可以回答这个问题。

1）你正在把东西放在head标签中。我想你误解了它的意思。它不是页面的“标题”，它是信息的补充，它不会显示在页面本身上（比如页面被调用的是什么类型的页面）。一切（意思是每个div）都在body标签中！身体并不意味着网站的身体，它意味着什么显示在网页上！

2）我只能猜测，因为你没有附加样式表，但我猜你没有导航，标题和徽标样式clear: both。

3）我在＃2中提到的相同的元素，你也可能要添加display: block只是在尚未设置情况。

4）如果2和3不工作，尝试定义高度的所有元素，以及（有时候，这对我的作品，这取决于是什么原因造成的问题）

1不能解决您的问题，但它是正确的。 2应该解决你的问题，但你真的需要将main.css置于你的问题中，因为我无法确定。此外，请使用ul标签进行调查。这是值得的。

这里是一个的jsfiddle例如：http://jsfiddle.net/5JqUt/

来源

2012-12-24 18:45:20

这里有一个小乱码（功能，虽然）我做给你：

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

你总是可以做装饰，就像对一个悬停效果导航链接... 告诉我，如果它的功能。 :) 你总是可以为你的项目提出一些想法。

哦，其他的答案是正确的，为什么你的布局不因事实，即页面内容是在头工作可能是原因。头部用于页面的标题，（标题）以及在任何其他头部前加载的脚本。正文是用户可见的页面的一部分。

来源

2012-12-24 19:03:06

如何构建HTML页面的布局？

回答

相关问题