Question

我试图手动创建我的第一个网站，我有一些关于如何做事的问题。请注意我想在纯HTML5中实现这一点，没有JS。我现在所拥有的只是一个导航标题，无论滚动多远都应该固定在页面顶部。但是，为了使图像符合此标题大小，我不得不采用以下方式使用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>

Answer 1

我正在尝试手动创建我的第一个网站，我有一些关于如何做事的问题。请注意我想在纯HTML5中实现这一点，没有JS。我现在所拥有的只是一个导航标题，无论滚动多远都应该固定在页面顶部。但是，为了使图像符合此标题大小，我不得不采用以下方式使用css：

有没有更优雅的方法来实现这一目标？

另一种方法是：

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

您是否认为优雅或多或少取决于您。

此外，是否有比使用px更实现间距的相对方法？我知道有关字体的rem，但间距是否有类似的东西？我的阅读表明视网膜屏幕可以实现2px转换，但是4k屏幕呢？

你可以像我上面那样使用“vh”，这是视口高度的百分比。

另外，如何在标题间距中垂直居中文字？

nav {
    text-align: center;
}

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

最后，如何在人的桌面上引用本地安装的字体，希望无需从服务器下载字体？

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

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

HTML5＆amp; CSS3固定导航栏

1 个答案: