html - 主页部分布局-6ren

html - 主页部分布局

转载作者：行者123 更新时间：2023-11-28 16:16:38

25

4

我正在实现一个新网站。我附上了一张图片，说明我希望它成为我主页的基础。我问你创建这三个彩色部分的最佳方法是什么。

要插入标题的第一个蓝色。第二个带有黑色边框的浅蓝色，其中包含名称。其余的浅灰色，我将在其中添加一个包含输入框的表格，并在下方添加文本。

我声明我对标题、表格、文本、输入框等的格式化没有问题。

我只是无法得到像图中那样的三个部分的效果。我要么尝试使用 div，但我认为这不是最佳解决方案，因为我得到了不需要的边距。

你会怎么做？

谢谢 :)

.div0 {
background-color: red;
margin-top: 0%;
margin-bottom: 0%;
}

.title1 {
font-family: Arial;
font-weight: normal;
color:  black;
font-size: 428%;
margin-top: 0.7%;
margin-bottom: 0%;
text-align: center;
bgcolor: red;
}

.td1 {
text-align: center;
}

.div1 {
background-color: blue;
margin-top: 0%;
margin-bottom: 0%;
}

<BODY>

<div class="div0">
	<H1 class="title1">
	Title
	</H1>
</div>

<div class="div1">
	<table width="96%" align="center">
		<tr class="tr1">
			<td class="td1" width="1/7">
			Name1
			</td>
			<td class="td1" width="1/7">
			Name2
			</td>
			<td class="td1" width="1/7">
			Name3
			</td>
			<td class="td1" width="1/7">
			Name4
			</td>
			<td class="td1" width="1/7">
			Name5
			</td>
			<td class="td1" width="1/7">
			Name6
			</td>
			<td class="td1" width="1/7">
			Name7
			</td>
		</tr>
	</table>
</div>
<div class="div2">

</div>

</BODY>

最佳答案

类似的最小标记和 css，使用 css 网格和 flexbox，或多或少像这样:

body {
  margin: 0;
  font-family: sans-serif;
}

.main {
  display: grid;
  grid-template-rows: 120px max-content 1fr;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  color: yellow;
}

.header__title {
  text-transform: uppercase;
}

.navbar {
  display:    flex;
  background: lightblue;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

.navbar__item {
  flex-grow: 1;
  padding: 6px 12px;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  color: black;
}

.content {
  background: silver;
}

<main class="main">
  
  <header class="header">
    <h1 class="header__title">Title</h1>
  </header>
  
  <nav class="navbar">
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
  </nav>
    
  <article class="content">
    
  </article>
</main>

我建议您稍微研究一下 html5 语义标记，以帮助您了解在适当的上下文中在哪里使用每种标记。

关于html - 主页部分布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58440910/

25

4

0

文章推荐： javascript - 正则表达式替换

文章推荐： html - 如何删除div的一个 Angular

文章推荐： php - IF 语句不改变变量的结果

文章推荐： css - HTML 电子邮件文本被剪裁

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - 主页部分布局