时间戳

首页 > 解决方案 > HTML 中的标题问题（没有涵盖所有的权重）

html - HTML 中的标题问题（没有涵盖所有的权重）

问题描述

我是 HTML 和 CSS 的新手，我正在尝试制作一个页面，但我的标题有问题，因为它没有跨越整个宽度。网站图片

这是我的 HTML 代码：

<nav class="links"> 
            <a href="#home"> Home </a>
            <a href="#about"> About </a>
            <a href="#products"> Products </a>
            <a href="#services"> Services </a>
            <a href="#locations"> Locations </a>
            <a href="#contact"> Contact us </a>
        </nav>
    </head>
    <body class="body">
        <header>
            <img class="gato" src="Imagenes/cat.jpg">
            <h1>ArchiteXture</h1>
            <p></p>
            </header>

这是我的 CSS 代码：

header{
    background-color:#ACBBF0;
    padding:20px;
    width:96%;
    border-style:solid;
    border-left:0px;
    border-right:0px;
    border-color:#5666A0;
}
.body{
    background-color:#CBDFE8;
    width:96%;
    border-right:3px;
    border-bottom:3px;
    border-top:0px;
    border-style:solid;
    border-color:#5666A0;
    margin-left:2%;
}
.links{
  background-color: #ACBBF0;
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
  linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
  font-weight:bold;
  padding:20px;
  text-align:center;
  border-bottom:3px;
  border-left:0px;
  border-right:0px;
  border-style:solid;
  border-color:#5666A0;
}

我试图删除填充和边距。我还尝试使用 Chrome 中的 F12 工具检查代码，但我不明白为什么我在标题和正文之间得到那个空间，因为正文是“父亲”。提前致谢

标签： htmlcssheader

解决方案

主要有以下三个错误：

  • 内边距和边距应设置为 0。 解决方案：一次删除所有内边距和边距（使用*{margin:0; padding;0;},
  • 有一些错误的 ubicated 关闭标签（第 9 行）。Sol.：打开和关闭标签的正确顺序（第一个头部，第二个主体），
  • 并且您没有为照片提供附加尺寸。Sol.：以百分比形式给出尺寸（宽度或高度，根据您的喜好）。

*{
  padding: 0;
  margin: 0;
}

header{
    background-color:#ACBBF0;
    padding:20px;
    width: inherit;
    border-style:solid;
    border-color:#5666A0;
}
.body{
    background-color:#CBDFE8;
    width: inherit;
    border-right:3px;
    border-bottom:3px;
    border-style:solid;
    border-color:#5666A0;
}
.links{
  background-color: #ACBBF0;
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
  linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
  font-weight:bold;
  padding:20px;
  text-align:center;
  border-bottom:3px;
  border-style:solid;
  border-color:#5666A0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Hi</title>
  <link rel="stylesheet" href="css.css">
</head>

<body>
  <nav class="links">
    <a href="#home"> Home </a>
    <a href="#about"> About </a>
    <a href="#products"> Products </a>
    <a href="#services"> Services </a>
    <a href="#locations"> Locations </a>
    <a href="#contact"> Contact us </a>
  </nav>
  <header>
    <img class="gato" src="photo.jpg" style="width: 100%;">
    <h1>ArchiteXture</h1>
    <p></p>
  </header>
</body>

</html>

推荐阅读