主页 / 问题 / 1355200
Accepted
dudha369
Asked:2022-04-29 17:25:25 +0000 UTC2022-04-29 17:25:25 +0000 UTC

如果某个元素出现的 HTML5、CSS 太低怎么办？

  • 772

我正在建立一个关于 html 和 css 信息安全主题的网站，我想用一行分隔信息。我能够划出一条线，但它似乎有点弯曲......

* {
    font-family: "Roboto", sans-serif;
}

body {
    background-color: #1F1230;
    color: white;
}

.connection {
    background-color: #3e255e;
    height: 165px;
    width: 165px;
    border: 0.5px solid #fff; /* Белая рамка */
    border-radius: 10px; /* Радиус скругления */
}

.line {
    margin: 166px;
    border-left: 2px solid white;
    height: 500px;
}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🖥RemotePC💻</title>
    <script src="eel.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" id="theme-link">
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>
<body>
    <div class="connection">
        <br \>
        <center><img src="images/lock.png"></center>
    </div>
    <div class="line"></div>
    <script type="text/javascript">     
        window.onresize = function () 
        {
            window.resizeTo(1100, 625);
        }
    </script>
</body>
</html>

这是 CodePen上的完整代码 谁能帮忙！！！！！！

html

1 个回答

  1. Best Answer

    您可以通过给元素一个绝对位置来提升线。为此，您需要设置 position: relative 相对于您想要定位线条的元素。

    使用您的代码添加：

    .connection{
    position: relative;
}

.line{
    position: absolute;
    bottom: 0;
}

    因此，该行将上升到页面的最顶部。在这里可以找到不同类型的定位工作方式：https ://developer.mozilla.org/ru/docs/Web/CSS/position

    • 1

相关问题