gpt4 book ai didi

html - 如何在不影响宽度的情况下固定位置

转载 作者:行者123 更新时间:2023-11-28 03:28:35 24 4
gpt4 key购买 nike

<分区>

想知道如何固定我的#header 位置而不让它变得更宽。

我多次检查我的代码,但似乎无法弄清楚是什么干扰了我的页眉宽度。出于某种原因,它变得更宽并且跳得有点低,而我之前给它设置了 70% 的宽度并且以后不要在任何地方更改宽度。

如何将标题位置固定为正确的宽度:70% 并且不让它跳下?还有比我现在拥有的正确方法或更好的方法让我的“我的名字”和我的导航在#header 中彼此相邻吗? #header 中左边是我的名字,右边是导航。

HTML5:

    <body>
<section id="Header" class="group">
<header>
<h2><a href="http://www.epicforever.com">My Name</a></h2>
</header>
<nav class="main">
<ul class="group">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</section>

<section id="TopContainer" class="group">
<p>Welcome to my Portfolio</p>
<p>Webdevelopment is my passion and I'd love to design and develop a website for you
sometime!</p>
<div class="block1">
<header><h2>Brand</2></header>
</div>
<div class="block2">
<header><h2>Web</h2></header>
</div>
<div class="block3">
<header><h2>Design</h2></header>
</div>
<aside><p>See all projects<a href="#">// brand // web // print</a></p></aside>
</section>

CSS3:

html {
width: 100%;
}


body{
background-image: url("img/bg.png");
font-family: arial, 'Lucida Sans Unicode';
font-size: 87.5%;
line-height: 15px;
color: #000305;
}

#Header, #TopContainer, #MidContainer, #AboutContainer, #ContactContainer{
width: 70%;
margin: 0 auto;
}

#Header{
padding: 0 10% 0 10%;
background-color: #fff;
margin-top: -8px;
position: fixed;
}

#Header header h2 {
padding-top: 13px;
}

#Header nav{
text-align: right;
}

#Header nav ul li{
list-style: none;
display: inline-block;
padding: 5px;
}


#TopContainer{
height: 150px;
padding: 0 10% 10% 10%;
background-color: #fff;
margin-top: 90px; /* change this at the end*/
}

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