gpt4 book ai didi

html - 无法让我的标题和主要样式正确

转载 作者:太空宇宙 更新时间:2023-11-04 01:35:39 25 4
gpt4 key购买 nike

我有一个网页,我想做两件事:在“桌面” View 中,我希望标题位于侧面,而在“移动” View 中,我希望标题位于顶部。我还希望标题固定(或粘性)到位,并且我希望顶部或侧面的标题周围没有“空白”。我的问题是,如果我做位置粘性,我无法弄清楚如何让页眉占据页面的整个宽度(在顶部时)或在桌面 View 中以全高上下定向。但是当我将位置更改为固定而不是粘性时,标题在移动 View 中覆盖了文章的大部分内容,并且当我应用 margin-top 值时,它适用于该特定视口(viewport)(看起来不错),但可以调整浏览器的大小窗口有太多或太少的 margin 。

长话短说-

如何将 header 固定在顶部(和侧面)而不覆盖内容,同时使 header 周围没有空白?

@import url('https://fonts.googleapis.com/css?family=Lora');
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: 400px;
}
html {
height: 100%;
}
body {
font-size: 1.2em;
margin: 0;
padding: 0;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
background-color: #FAEBD7;
}
body > div {
padding: .4em;
}
header {
position: sticky;
background-color: #6495ED;
padding: 2.5%;
top: 0;
left: 0;
right: 0;
width: 100%;
}
a {
text-decoration: none;
color: #FAEBD7;
}
a:visited {
color: #FAEBD7;
}
nav {
text-align: right;
}
nav li {
list-style: none;
}
nav a {
color: #FAEBD7;
text-decoration: none;
}
nav a:visited {
color: #FAEBD7;
}
nav a:active {
color: #DEB887;
}
nav a:hover {
color: white;
text-decoration: underline;
}
main {
display: flex;
flex-direction: column;
}
article {
background-color: white;
box-shadow: 10px 10px 10px 5px #888888;
margin: 2.5%;
padding: 1%;
}
article figure {
display: flex;
justify-content: center;
padding: 10%;
}
article a {
color: #6495ED;
}
article a:visited {
color: #6495ED;
}
article a:active {
color: #DEB887;
}
article a:hover {
color: black;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Lora', serif;
}
.post-date {
color: grey;
}

@media screen and (min-width: 880px) {
body > div {
width: 100%;
max-width: 75em;
margin: 0 auto;
}
article {
width: 55%;
}
main {
align-items: flex-end;
}
}

@media screen and (max-width: 500px) {
img {
height: 200px;
}
}
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Kids Read for Fun | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
<div>
<header>
<h1><a href="#">Kids Read for Fun</a></h1>
<hr>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Current Reviews</a></li>
<li><a href="#">Archive</a></li>
</ul>
</nav>
</header>
<main>
<article>
<div class="post-date">January 6, 2016</div>
<section class="post-content">
<h2><a href="#">Septimus Heap Book One: Magyk</a></h2>
<figure>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSefEemDZe2rlGwqBTPEtZHr1pn54ve_q0eumcdUWQXvsEHd-D9" alt="Book cover for Septimus Heap 1">
</figure>
<p>If you enjoy stories about seventh sons of seventh sons and magyk this is the book for you. <a href="#">Read More...</a></p>
</section>
</article>

<article>
<div class="post-date">Dec 20, 2015</div>
<section class="post-content">
<h2><a href="#">Magnus Chase Book One: Sword of Summer</a></h2>
<figure>
<img src="https://books.google.com/books/content/images/frontcover/xWuyBAAAQBAJ?fife=w300" alt="Book cover for Magnus Chase 1">
</figure>
<p>The anticipated new novel by Rick Riordan. After Greek mythology (Percy Jackson), Greek/Roman (Heroes of Olympus), and Egyptian (Kane Chronicles), Rick decides to try his hand with Norse Mythology, and the end result is good. <a href="#">Read More...</a></p>
</section>
</article>
</main>
</div>
</body>

</html>

最佳答案

我会为此使用 CSS 网格和媒体查询。所有面临的问题都可以用网格区域来解决。

关于html - 无法让我的标题和主要样式正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46259526/

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