HTML-CSS 布局使整个网站居中并冻结菜单答案

【问题标题】：HTML-CSS Layout to center entire website and freeze a menuHTML-CSS 布局使整个网站居中并冻结菜单
【发布时间】：2014-05-11 04:35:57
【问题描述】：

所以我从 Photoshop 生成了一个网站并将其切片用于网络...我现在正在尝试找出一些 CSS 样式。

我想使整个网站居中，它现在卡在屏幕左侧。
我还想在向下滚动页面时让菜单冻结或悬停。

我知道我不会把它搞砸，自从我做了这件事以来，它已经永远了。

感谢您的帮助！！！！

3 这是代码。

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="1000" height="5761" border="0" cellpadding="0" cellspacing="0" class="box">
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_01.gif" width="1000" height="516" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_02.gif" width="44" height="29" alt=""></td>
        <td colspan="2">
            <img src="images/WHEN-&-WHERE.gif" width="190" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_04.gif" width="84" height="29" alt=""></td>
        <td colspan="3">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_05.gif" width="142" height="29" alt=""></td>
        <td colspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_06.gif" width="116" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_07.gif" width="128" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_08.gif" width="108" height="29" alt=""></td>
        <td colspan="2">
            <img src="images/WHAT-TO-DO.gif" width="158" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_10.gif" width="30" height="29" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_11.gif" width="1000" height="839" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_12.gif" width="324" height="158" alt=""></td>
        <td colspan="5">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_13.gif" width="380" height="158" alt=""></td>
        <td colspan="4" rowspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_14.gif" width="296" height="275" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_15.gif" width="318" height="117" alt=""></td>
        <td colspan="6">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_16.gif" width="386" height="117" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_17.gif" width="1000" height="893" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_18.gif" width="1000" height="1416" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_19.gif" width="1000" height="245" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_20.gif" width="107" height="86" alt=""></td>
        <td colspan="4">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_21.gif" width="345" height="86" alt=""></td>
        <td colspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_22.gif" width="48" height="86" alt=""></td>
        <td colspan="4">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_23.gif" width="432" height="86" alt=""></td>
        <td colspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_24.gif" width="68" height="86" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_25.gif" width="1000" height="243" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_26.gif" width="1000" height="1218" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="spacer.gif" width="44" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="63" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="127" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="84" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="128" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="8" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="40" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="76" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="128" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="108" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="120" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="38" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="30" height="1" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

【问题讨论】：

它确实看起来像“它永远存在；”请停下来：花点时间看看这个问题：stackoverflow.com/questions/83073/…。
另外（很抱歉，这对你来说是一个重要的网站，或者至少对某人来说）：它是“registry”，而不是“registery”（在全部）。

标签： javascript jquery html css layout

【解决方案1】：

尝试将 margin:0 auto; 添加到您的内联 HTML 样式中。

<table id="Table_01" width="1000" height="5761" border="0" cellpadding="0" cellspacing="0" class="box" style="margin:0 auto;">

Margins 有四个不同的选项，您可以通过它。 margin:0; 表示元素周围没有边距，而 'margin:0 auto; 将 0 边距应用于元素的 top 和 bottom，但 auto 水平对齐元素 left 和 right。

不过，margin:0 auto; 可能如下所示（记得我说过边距有四个选项吗？）

#Table_01 {
  margin:0 auto 0 auto;
}

它按上、右、下和左的顺序排列。

【讨论】：

【解决方案2】：

使用 CSS 设置样式。

您可以在外部或内联方式进行：

外部CSS

#Table_01 {
    margin: 0 auto;
}

CSS 内联

<table id="Table_01" style="margin: 0 auto;" width="1000" height="5761" border="0" cellpadding="0" cellspacing="0" class="box">

关于您的菜单问题，您需要进一步解释，因为我不了解您的问题是什么？

【讨论】：

【解决方案3】：

尝试在margin:0 auto; width:960px 表中添加内联或外部 CSS。我建议您设置 width:960px 因为它的最佳分辨率大小适用于所有浏览器以及它在所有屏幕上的正确显示。

要在向下滚动页面时使菜单冻结或悬停，您必须阅读 jquery 或 javascript。

【讨论】：

【解决方案4】：

您可以将表格包装在一个 div 中（只需在表格之前放置一个打开的 div 标记并在关闭表格标记之后将其关闭）。

然后使用这个 css。我给了 div id="wrapper" （实际上你并不需要包装器，所以只有 #Table_01 css 可以在没有 div 的情况下自行工作）：

#wrapper
{
    width: 100%;
    height: 100%;
}

#Table_01
{
    margin: 0 auto;
}

对于粘在顶部的菜单，您可以使用 jQuery，如 here 和 JSFidde 所述

【讨论】：