gpt4 book ai didi

HTML5 & CSS3 固定导航栏

转载 作者:太空宇宙 更新时间:2023-11-03 18:09:11 25 4
gpt4 key购买 nike

我正在尝试手动创建我的第一个网站,但我有几个关于如何做的问题。请注意我想用纯 HTML5 来完成这个,没有 JS。我现在只有一个导航标题,无论滚动多远,它都应该固定在页面顶部。但是,为了让图像符合此 header 大小,我不得不按以下方式使用 css:

main {
position: absolute;
top: 60px;
z-index: -1;
}

是否有更优雅的方式来实现这一点?此外,是否有比使用 px 更相关的方法来完成间距?我知道字体的 rem,但是间距有什么类似的吗?我的读数表明视网膜屏幕支持 2px 转换,但 4k 屏幕呢?

另外,如何在标题间距中垂直居中文本?

最后,我如何在个人桌面上引用本地安装的字体,从而避免从服务器下载字体的需要?

CSS3

* { all: unset }


@font-face {
font-family: 'biolinum';
src: url('LinBiolinum_R.woff'),
local('Linux Biolinum O');
}

.logo {
float: left;
height: 50px;
padding: 5px;
}

.image {
height: auto;
width: 100%;
background: black;
}

header {
position: fixed;
height: 60px;
width: 100%;
background: white;
}

main {
position: absolute;
top: 60px;
z-index: -1;
}

nav {
list-style-type: none;
float: right;
font-family: 'biolinum';
font-size: 1.25rem;
color: #465053;
text-transform: uppercase;
}

p {
font-family: 'biolinum';
font-size: 1rem;
color: #465053;
text-align: justify;
}

title {
display: none;
}

html5

        <title>Title</title>

<link rel='icon' href='images/logo.svg'>
<link rel='stylesheet' href='css/style.css'>
</head>

<body id='index' class='home'>
<header>
<a href='#'>
<img src='images/name.svg' class='logo'>
</a>
<nav>
<a href='index.html'>about</a>
<a href='#'>design</a>
<a href='#'>analysis</a>
<a href='#'>contact</a>
</nav>
</header>

<main>
<img src='images/temp.png' class='image'>
<img src='images/temp.png' class='image'>
<img src='images/temp.png' class='image'>
<img src='images/temp.png' class='image'>
</main>
</body>
</html>

最佳答案

I'm trying to create my first website manually, and I have a few questions on how to do things. Please note I want to accomplish this in pure HTML5, no JS. All I have right now is a navigation header, which should stay fixed at the top of the page no matter how far one scrolls. However, in order to get an image to respect this header size, I've had to resort to using css in the following manner:

Is there a a more elegant way to accomplish this?

另一种方法是这样的:

body
{
overflow: hidden;
}
header {
height: 20vh;
}
main {
height: 80vh;
overflow: scroll;
}

您认为这是否更优雅取决于您。

Additionally, is there a more relative way to accomplish spacing than using px? I know about rem for font, but is there anything similar for spacing? My reading indicates that retina screens honor a 2px conversion, but what about 4k screens?

你可以像我上面那样使用“vh”,它是视口(viewport)高度的百分比。

Also, how do I center text vertically in the header spacing?

nav {
text-align: center;
}

这将使文本在导航中居中。

Lastly, how do I reference a locally installed font on a person's desktop, hopefully negating the need to download a font from the server?

p {
font-family:"Times New Roman";
}

如果它安装在用户桌面上,您应该能够像这样引用它。

关于HTML5 & CSS3 固定导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24073075/

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