堆栈内存溢出
  繁体   English   中英

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

[英]HTML-CSS Layout to center entire website and freeze a menu

 原文  2014-03-31 17:34:42  6   4    javascript/ jquery/ html/ css/ layout

问题描述

因此，我从Photoshop生成了一个网站，并将其切成网页……我现在想弄清楚一些CSS样式。

  1. 我想将整个站点居中放置，现在它固定在屏幕的左侧。

  2. 当您向下滚动页面时，Id还希望使菜单冻结或悬停。

我知道我一直在忙，自从我这样做以来，它就永远存在。

谢谢你的帮助！！！！

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>

4 个解决方案

解决方案1
 0  2014-03-31 17:39:28

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

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

保证金有四个不同的选项，您可以通过它。 margin:0; 表示元素周围没有边距，而'margin:0 auto; 适用0保证金的top和bottom的元素，但auto对准你的元素left和right水平。

但是， margin:0 auto; 可能如下所示（还记得我说过的边距有四个选择吗？） 

#Table_01 {
  margin:0 auto 0 auto;
}

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

解决方案2
 0  2014-03-31 17:40:31

使用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
 0  

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

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

解决方案4
 0  2014-03-31 18:56:00

您可以将表格包装在div中（只需在表格前放置一个打开的div标签，然后在结束表格标签后关闭它）。

然后使用此CSS。 我给div设置了id =“ wrapper”（实际上，您实际上并不需要包装器，因此仅＃Table_01 CSS可以在没有div的情况下自行工作）： 

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

#Table_01
{
    margin: 0 auto;
}

对于菜单坚持，你可以使用jQuery描述顶部这里与JSFidde

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML-CSS：“自定义”菜单不会水平滚动 Html-Css 图像拉伸 选项的 HTML-CSS 背景颜色 html-css使div模糊化 如果不支持svg，则退回到html-css HTML-CSS响应式滑动反馈表 html-css自动滑块按钮不起作用 CSS DOM操作Angular组件到html-css HTML-CSS div比孩子高3px 我如何对进度条执行此操作？（html-css）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM