0

我有（可能）非常基本的 HTML/CSS 问题：

我正在使用 asp.net MVC 4 我应该开发简单的网站，如下所示：

  1. 页面示例1： 在此处输入图像描述

  2. 页面示例 2： 在此处输入图像描述

在每个页面上，都应该有一个标题图标（这是一个网站徽标）和底部的链接。页面之间唯一变化的是内容区域。内容宽度因页面而异。整个布局应居中（如设计示例所示）。

由于网站上所有页面都有共同的页眉和页脚，我决定创建布局文件，如下所示：

...
    <body id="index" class="home">

        <header id="header" class="body">
            here comes a logo
        </header>

        <section id="content" class="body">
            @RenderBody()
        </section>

        <footer id="footer" class="body">
            <nav>
                <ul id="menu">
                   here the links
                </ul>
            </nav>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

问题：我不知道如何获得所需的外观。我是否做出了将页眉和页脚放入通用布局文件的正确决定？

我不懂 HTML，但我很了解 XAML。在 XAML 中，我会执行以下操作：

<Grid>
 <Grid.ColumnDefinitions>
   <Column Width="*"/>
   <Column Width="auto"/>
   <Column Width="*"/>
 </Grid.ColumnDefinitions>
</Grid>

将内容放入第 1 列会给我所需的行为（中间列将占用它的宽度，而左右列将占用屏幕上的所有左侧空间均分，从而使内容居中居中）。

谢谢

4

4 回答 4

2

将您的元素包裹在具有设定宽度和以下样式的 div 中：margin:0 auto;

HTML：

<div id="widthContainer">
    <div id="header">
        <div id="logo">Logo</div>
    </div>
    <div id="mainContent">mainContent</div>
    <div id="footer">footer</div>
</div>

CSS

#widthContainer{width:800px;height:1000px;background-color:red;margin:0 auto;}
#header{width:100%;height:200px;background-color:blue;margin-bottom: 50px;}
#logo{width:200px;height:200px;background-color:green;}
#mainContent{position:relative;width:100%;height:500px;background-color:pink;margin-bottom: 50px;}
#footer{position:relative;width:100%;height:300px;background-color:green;margin-bottom: 50px;}

这是一个示例小提琴。

于 2013-11-14T15:37:08.113 回答
1

如果您不熟悉 HTML 和 CSS，那么我建议您从 Foundation 之类的框架开始。Foundation 会给你一个 CSS 网格，它会让页面布局非常容易理解。

有一个带有简单安装说明的 NuGet 包。你可以在这里找到更多信息： http ://responsivemvc.net/foundation

您可以在此处获取许多不同布局的模板：http: //foundation.zurb.com/templates.php

于 2013-11-14T15:52:47.087 回答
0

在所有具有样式的容器周围创建一个包装器

  width:960px; /* or whatever you want */
  margin:0 auto;

此包装器中的每个 div 都将居中对齐。

于 2013-11-14T15:33:07.350 回答
0

据我所知，您的 CSS 将是基本的东西。您需要将它们从类更改为您想要使用的任何 CSS 类型（我喜欢类，如果它们被称为 :| ）。如果您打算使用 CSS“类”，您将更改元素上的“类”以匹配每个名称。

此外，您可能不需要页眉上的浮动属性，它可能会扭曲页面。我不确定。

.body {
    display:block;
    width: 1080px; /* your choice*/
    margin: 0 auto;
    padding: 0;
}
.header {
    display:block;
    float:left;
}
.content {
    display:block;
}
.footer {
    display:block;
}
于 2013-11-14T15:35:56.937 回答