时间戳

首页 > 解决方案 > HTML & CSS - 将对象移动到特定位置

html - HTML & CSS - 将对象移动到特定位置

问题描述

我最近开始制作一个网络服务器，我通常使用后端代码，但现在我有一个项目要做。我对 CSS 和 HTML 还是很熟悉。所以基本上我需要以某种方式将银行标志向下移动，并将Label - “Los-Santos迷宫银行”的标志靠近一点，我研究了很多，但我仍然不明白这个位置的工作原理, width, display, margin, top 有时有效，有时无效，有时我使用右、左定位，但此时我不知道该怎么做。

这是我的网站的外观： 在此处输入图像描述

我的索引代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/style2.css">
    <title>Maze bank - Log In</title>
    <link rel="icon" href="https://i.ibb.co/hm8Fz83/bank.png">
    <link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
    <br>
    <img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
    <p><span style="color:white">Maze Bank Of </span>Los-Santos</p>
        <form action="http://127.0.0.1:8080/api/test?category=computers" method="POST" target="_blank">
            <div class="login-box">
                <div class="textbox">
                    <i class="fa fa-credit-card" aria-hidden="true"></i>
                    <input type="password" placeholder="Bill Number" name="bill" value="" maxlength="15" minlength="15" >
                </div>
            <div class="textbox">
                <i class="fa fa-key" aria-hidden="true"></i>
                <input type="password" placeholder="Pincode" name="pin" value="" maxlength="4" minlength="4">
            </div>
            <button class="link">Forgot password ?</button>
            <input class="btn" type="submit" name="" value="Log in">
        </form>
    </div>
    <div class="copyright">
            <h4>©™ 2019 Copyright All Rights Reserved</h4>
         </div>
</body>
</html>**strong text**

这是我的 CSS 代码：

@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";

p{
    display:block;
    color: #2ECC71;
    font-family: 'Teko', sans-serif;
    font-size: 50px;
    text-align: center;
    font-weight: bold;
    border-block: 2px solid black;
    text-shadow: 2px 2px #1a1111;
}

p:first-letter{ 
    display:block; 
    /*adjust the letter position for best appearance*/
    margin:4px 4px 0 5px!important;  
    /*set font family color and size*/
    color:#2ECC71; 
    font-size:1.5em; 
    font-family: 'Teko', sans-serif;
}

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
}


html, body{

    margin: auto;
    background: white;
    background: url(https://external-preview.redd.it/ar2z7yTm97BFzRtPJXWA_twAbm-DlDKUt3mS0R8aJtY.png?auto=webp&s=c965a508182b77fbdec96dd82d6ed224a3b17543) no-repeat fixed center;
}

.logo{
    font-family: fantasy;
}

.login-box{
    width: 280px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.textbox{
    width: 100%;
    overflow: hidden;
    font-size: 20px;
    padding: 8px 0;
    margin: 8px 0;
    border-bottom: 1px solid #e16a74;

}

.textbox i {
    width: 26px;
    float: left;
    text-align: center;

}

.textbox input{
    border: none;
    outline: none;
    background: none;
    color: white;
    font-size: 18px;
    float: left;
    width: 80%;
    margin: 0 10px;
}

.btn{
    width: 100%;
    background: #e16a74;
    border: 2px solid #e16a74;
    margin: 12px 0 ;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    color: white;

}
.btn {border-radius: 12px;}

.copyright {
    position: absolute;
    width: 100%;
    color: #fff;
    line-height: 40px;
    bottom:0;
}

.copyright h4{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10;
    text-align: center;
}


.login-box button.link
{
    background:none;
    border:none;
    color: wheat;
    font-family: 'Teko', sans-serif;
    font-weight: normal;
    font-size: 20px;
    position:relative;
    bottom:1000%;
    left:55%;
}

标签： htmlcss

解决方案

首先，检查您的代码是否有效:) 例如，<img>元素不应有结束标记。您应该始终尝试使用有效的 html，因为带有错误的 html 会影响浏览器中的呈现。

其次，我看到您添加了<br>after<body>和 before <img>。这可能是为了在徽标上方留出一个小边距。不要那样做，因为这样你永远不会在浏览器中获得可靠的距离。在您的 css 中删除<br>并使用orso 样式。margin-top: 16pximg

接下来，为您的p元素提供一个 css 类，<p class="bank-name">并在 css 中设置样式：

.bank-name {
  color: white;
  margin-top: 10px;
}

这p是非常具体的，所以你应该给它一个专门的类，因为你可以<p>在页面上拥有其他不需要相同外观的s。

还有两件事：

  1. 避免在 html 中使用内联样式。
  2. !important除非您有充分的理由这样做，否则不要使用。

<p>默认情况下也是block如此，因此您不需要display: block在 html 中使用它。您通常可以在W3school找到默认样式。

希望这可以帮助！

推荐阅读