堆棧內存溢出
  簡體   English   中英

HTML-CSS布局使整個網站居中並凍結菜單

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

 原文  2014-03-31 17:34:42  9   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