如何划分标题和主要标签？

霍西托

我刚刚创建了一个标题，在主要部分之后，我的主要部分在标题中，我试图从顶部开始，但对我不起作用。我制作了一个屏幕来显示我的问题：我需要将标题和主要内容分开，例如主要内容。带有页眉顶部的边距。我也将两者都设置为块显示，不起作用。不应该使用主标签或切换到 div 元素？有我的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Microsoft Windows</title>

    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/png" href="favicon/microsoft32.png">
</head>
<body>
    <header>
        <ul id="header-left">
            <li><a href="#">Microsoft Windows</a></li>
        </ul>
        <ul id="header-right">
            <li><a href="#">Explore Windows 11</a></li>
            <li><a href="#">Shop devices</a></li>
            <li><a href="#">Download</a></li>
        </ul>
    </header>
    <main>
        <div id="hero">
            <div id="hero-text">
                <h2>Made for you, designed for all</h2>
            </div>
        </div>
    </main>
</body>
</html>

和我的CSS：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Source+Sans+Pro:wght@300;400&display=swap');

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    width: 70%;
    margin: auto;
}

header {
    margin-top: 5%;
    display: block;
}

header ul {
    width: fit-content;
}

header #header-left {
    float: left;
    font-family: 'Poppins', sans-serif;
}

header #header-right {
    float: right;
    font-family: 'Source Sans Pro', sans-serif;
}

header #header-right li {
    margin-right: 25px;
}

header #header-right li:last-child {
    margin-right: 0px;
}

header ul li {
    display: inline-block;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
}

header #header-right li::after {
    display:block;
    content: '';
    border-bottom: solid 2px black;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
}

header #header-right li:hover:after { transform: scaleX(1); }

header #header-right li::after {
    transform-origin: 0% 50%;
}

header ul li a {
    color: black;
}

main {
    display: block;
}

莫妮卡·维尔玛尼

try this it will help you

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Source+Sans+Pro:wght@300;400&display=swap');

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    width:100%;
    margin: 0;
}
.conatiner{
margin:auto;
max-width:1200px;
width:100%;
}
header {
float:left;
width:100%;

}
.navbar{
float:left;
width:100%;
padding:10px;
background:#eee;
}
header ul {
    width: fit-content;
}

header #header-left {
    float: left;
    font-family: 'Poppins', sans-serif;
}
.navbrand{
line-height:35px;
}
header #header-right {
    float: right;
    font-family: 'Source Sans Pro', sans-serif;
}

header #header-right li {
  padding:10px;
  font-size:14px;
}

header #header-right li:last-child {
    margin-right: 0px;
}

header ul li {
    display: inline-block;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
}

header #header-right li::after {
    display:block;
    content: '';
    border-bottom: solid 2px black;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
}

header #header-right li:hover:after { transform: scaleX(1); }

header #header-right li::after {
    transform-origin: 0% 50%;
}

header ul li a {
    color: black;
}

main {
float:left;
width:100%;

}
#hero{float:left;
width:100%;
padding:1em;
text-align:center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Microsoft Windows</title>

    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/png" href="favicon/microsoft32.png">
</head>
<body>

    <header>
    <section class="navbar">
           <section class="conatiner">
          <a href="#" class="navbrand">Microsoft Windows</a>
      
        <ul id="header-right">
            <li><a href="#">Explore Windows 11</a></li>
            <li><a href="#">Shop devices</a></li>
            <li><a href="#">Download</a></li>
        </ul>
          </section>
        </section>
    </header>
    <section class="conatiner">
    <main>
        <div id="hero">
            <div id="hero-text">
                <h2>Made for you, designed for all</h2>
            </div>
        </div>
    </main>
    </section>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2022-05-22

我来说两句

0 条评论

登录后参与评论

上一篇：Angular 11 - mar-grid-list 在一个组件中无法识别，但在其他几个组件中工作

如何删除android活动标签（活动标题）和标签栏？

在Matplotlib中划分x和y标签

如何使用.plot（）设置figsize，标签和标题

如何在 gnuplot 中使标签和标题加粗？

如何从该元素标签获取价格，标题和链接？

如何划分标题和主要标签？

如何划分标题和主要标签？

隐藏发件人没有短信PHP

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

在浏览器中请求URL时会发生什么？

flask-admin 如何自定义删除按钮

材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）

用日期数据透视表和日期顺序查询

Jqgrid：多级别组摘要

java io ioexception无法解析服务器地址解析器的响应

Swift如何使用Base64Url编码JWT标头和有效负载之类的json对象

sshd AllowGroups组未授予访问权限

jQuery无限滚动固定div中的滚动

android 背部按下

Flexbox CSS 对齐属性环境惰性？

为什么随机森林中的平均降低基尼系数取决于人口规模？

ClickHouse 创建临时表

为什么PlusShare.Builder setRecipients方法不起作用？

如何在Android中识别MICR代码

PyQt4.QtCore模块无法向sip模块注册

正则表达式，用于查找所有以任何字母开头和数字开头的文件

是否可以通过编程方式对很多动画进行重新着色？

机器密钥生成