0

需要一些关于如何像通常网站一样设置布局的帮助。

例如：http ://www.rachaelray.com/food.php

这个网站的内容似乎就在白色大盒子的中心，背景是浅蓝色。

我的网站会简单得多。

我真的不知道如何为我的母版页设置这样的（上面的网站）布局。

以下是我到目前为止所做的：-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">

        <style type="text/css">
         #main
          {

           }      
         .left
         {
            margin:0 auto;
            float:left;
            width:20%;
          }
         .right
         {
            margin:0 auto;
            float:right;
            width:20%;
          }
        .content
         {

            width:100%;

          }
        .footer
        {
         padding:5px;
         background:black;
         color:white;
        }
            .wrapper 
            {
                margin: 0 auto;
                width: 700px;
            }
            .auto-style1 {
                width: 466px;
                image-orientation:auto;
            }
            .auto-style2 {
                width: 466px;
                height: 23px;
            }
            .auto-style3 {
                width: 100%;
                border: 1px solid #000000;
            }
        </style>

    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="left" class="left" > </div>
    <div id="cont" class="wrapper">
        <table class="content">
         <tr>
            <td class="auto-style1">
            <asp:Image ID="Logo_MaduDTrading" runat="server" ImageUrl="~/Images/BeforeLogin/Logo_MaduDTrading.jpg" />
            </td>
         </tr>
         <tr>
            <td class="auto-style2">

               </td>
         </tr>
         <tr>
            <td class="auto-style1">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 

            </asp:ContentPlaceHolder>
            </td>
         </tr>
         <tr>
            <td class="auto-style1">

                &nbsp;</td>
         </tr>
         <tr>
            <td class="auto-style1">

                &nbsp;</td>
         </tr>
       </table>
    </div>
     <div id="right" class="right"></div>
    </form>
</body>
</html>

有什么想法/建议吗？

提前谢谢你。

4

2 回答 2

0

当我想居中对齐网站时，我使用 div 标签作为主页内容并设置宽度、左右自动边距。您还可以将正文背景颜色设置为与 div 标签不同，以在您提供的示例站点中创建效果。例如。

母版页中的 HTML：

<div class="page">
    Page content here
</div>

头部或单独的 .css 文件中的 CSS：

.page {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
}

您可以在顶部和底部添加边距，以在屏幕中央添加框效果。随意问任何问题。

于 2013-07-24T14:49:54.760 回答
0

在母版页中创建母版页和/或 ContentPlaceHolder 控件时，您应该使用响应式网页设计技术。这将解决页面居中问题和对象的宽度。这也是您的示例网站创建布局的方式。

如何使您的内容居中

正如 Jonathan Bick 所提到的，使内容居中的最常用方法是在任何给定的 div 上将左右边距设置为 auto。这可以通过以下方式完成：

.someClass{margin:0 auto;}

将内容居中时的常见错误

以下任何一种情况都会阻止您的内容正确居中：

  • 忘记设置宽度。
    • 任何居中元素的宽度都必须明确设置。这可以通过窗口的百分比、像素或任何其他CSS 测量单位来完成。
  • 将 div 放置在设置为向左或向右浮动的容器中。
    • 这样做会导致包含的 div 忽略其 width 属性。在这里测试一下。

注意：这些只是我的想法，所以我会回来并在我想到它们时添加更多内容。

响应式网页设计注意事项

响应式网页设计用于创建一个网站，该网站会自动调整其元素，以获得当前屏幕尺寸的最佳布局。很棒的是，这可以完全使用 CSS 和 HTML 来完成。您可以在下面的链接中找到入门所需的一切...

这绝对应该让你指出正确的方向。该链接还引用了我书签中“响应式设计”文件夹中的一些优秀教程。

使用谷歌浏览器的“检查元素”

Google Chrome（以及大多数其他浏览器）有一个名为Inspect element的工具。当您右键单击网站中的元素时，在上下文菜单的底部您将看到检查元素选项。点击它会弹出一个工具，分析任何渲染元素的属性，并用颜色编码、图像、标签等显示它们。这个工具非常好，可以帮助你确定为什么你的图像没有居中……

检查元素示例 1

在这里，您可以看到当我检查 Stack Overflow 的徽标时会发生什么。

此外...

您可以使用样式窗口（位于元素面板的右下方）快速测试新样式。

检查元素示例 2

请注意，我将样式部分中徽标的边框更改为solid 20px red，新样式反映在浏览器窗口中。当然，这只是暂时的，因此您不必担心意外破坏您的代码。

于 2013-07-24T15:16:18.100 回答