Question

我正在尝试制作一个与facebook完全相同的标题，但是当我修复它的内容时，它开始改变窗口调整大小的位置。就像这里http://www.housetostay.co.za/ 我怎样才能解决这个问题以下是我的代码

<html>
<head>
  <style>
    .heading { 
      display:block;
      top:0px;
      left:0px;
      right:0px;
      height:20px;
      position:fixed;
      border:1px solid #888;
      padding:0px;
      text-align:center;
      font-weight:bold;
      color:#000;
      background: #ccc;
      width: 100%;
      height: 100px;
      z-index:3;
    }
  </style>
</head>
<body>
  <div class = "heading">
    <table id ="headertable" align="left">
      <tr>
        <td>
          <a href="http://www.housetostay.co.za">
            <h2 class= "logo">HouseToStay</h2>
            <td>&nbsp;</td>
          </a>
        </td>
        <td><a href="http://www.housetostay.co.za" class="button middle">How it works</a></td>
        <td><a href="http://www.housetostay.co.za" class="button middle">Contact us</a></td>
        <td><a href="register.php" class="button middle">PostAd</a></td>
        <td><a href="jobs.php" class="button middle">Jobs</a></td>
        <td><a href="http://www.housetostay.co.za" class="button middle">Buy it</a></td>
        <td>
        </td>
    </table>
    <table class ="profile">
    <tr>
      <td>
        <h2>user</h2>
      </td>
      <td>
        <img src="bhubezi/images/logos/nopic.png" width="50" height="40">
      </td>
    </tr>
  </table>
</div>

Answer 1

您可以尝试通过jQuery执行此操作。

这里有一个简单的Demo

这里有Tutorial

调整页面大小时，此示例可以正常运行。

Answer 2

使用<table>进行布局通常是不受欢迎的，在这种情况下，更难以实现您想要做的事情。我建议您使用更多标准HTML元素替换基于<table>的布局（例如，将您的菜单放入列表<ul>，将您的用户个人资料放入自己的<div>），然后绝对定位这些元素并为它们提供明确的像素位置。然后，当你调整窗口大小时，它们不应该移动。

这是一个例子（使用您自己的代码，尽可能少的修改）：

<html>
<head>
<style>
.heading { 
    display:block;top:0px;left:0px;right:0px;height:20px;position:fixed;border:1px solid #888;padding:0px;text-align:center;font-weight:bold;color:#000;background: #ccc;width: 100%;height: 100px;z-index:3;
}

#logo {
    position:absolute; /* This will keep it one place */
    left:200px; /* This specifies what place */
}

#menu {
    position:absolute; /* This will keep it one place */
    left:320px; /* This specifies what place */
    width:400px; /* This makes sure the menu doesn't shrink if the window is made smaller */
    list-style-type:none;
}

#menu li {
    float:left;
    margin-right:10px;
}

#profile {
    position:absolute; /* This will keep it one place */
    left:750px; /* This specifies what place */
    width:100px; /* This makes sure the profile doesn't shrink if the window is made smaller */
}

#profile h2 {
    display:inline;
}
</style>
</head>
<body>
<div class="heading">
    <a href="http://www.housetostay.co.za" id="logo">
        <h2>HouseToStay</h2>
    </a>
    <ul id="menu">
        <li><a href="http://www.housetostay.co.za" class="button middle">How it works</a>    </li>
        <li><a href="http://www.housetostay.co.za" class="button middle">Contact us</a></li>
        <li><a href="register.php" class="button middle">PostAd</a></li>
        <li><a href="jobs.php" class="button middle">Jobs</a></li>
        <li><a href="http://www.housetostay.co.za" class="button middle">Buy it</a></li>
    </ul>
    <div id="profile">
        <h2>user</h2>
        <img src="bhubezi/images/logos/nopic.png" width="50" height="40">
    </div>
</div>

修改：向标题元素添加了显式像素位置。

我如何制作像Facebook一样的标题？

2 个答案: