gpt4 book ai didi

HTML/CSS 布局

转载 作者:太空宇宙 更新时间:2023-11-03 23:51:25 25 4
gpt4 key购买 nike

我有(可能)非常基本的 HTML/CSS 问题:

我正在使用 asp.net MVC 4我应该开发一个简单的网站,如下所示:

  1. 页面示例 1: enter image description here

  2. 页面示例 2: enter image description here

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

由于网站上的所有页面都有通用的页眉和页脚,我决定创建布局文件,如下所示:

...
<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 列会给我所需的行为(中间列将占用其子级的宽度,而左列和右列将平分屏幕上的所有左侧空间,从而使内容在中间居中)。

谢谢

最佳答案

将您的元素包裹在具有设置宽度和以下样式的 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;}

Here's an example fiddle.

关于HTML/CSS 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19981558/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com