如何划分标题和主标签？

发布于 2025-01-24 16:35:02 字数 2758 浏览 2 评论 0原文

我刚刚创建了一个标题，在主段之后，我的主要部分位于标题中，我试图从顶部获得保证金，但对我不起作用。我制作了一个屏幕，以显示我的问题： ”这就是看起来像“ ” 我需要将标头和主分开，以便for ex。带有标头的边距。我也将两个显示为块，而无效。不应该使用主标签还是切换到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;
}

原文

I just created a header, and after main section, and my main section is in header, I tried to margin from top, and isn't worked for me. I've made a screen, to show my problem :
I need to divide header and main, for main for ex. with margin top of header.
Also I setted for both display as block, not worked. Should'nt to use main tag or to switch to a div element? There is my html code :

<!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>

and my 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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抹茶夏天i‖ 2025-01-31 16:35:02

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>

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>

回复收藏 0 原文

~没有更多了~