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

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

html css

HTML&；CSS-将对象移动到特定位置,html,css,Html,Css,我最近开始制作一个web服务器，我通常使用后端代码，但现在我有一个项目要做。我对CSS和HTML仍然很熟悉。所以基本上我需要将银行标识向下移动，标签“Los Santos迷宫银行”稍微靠近标识，我已经研究了很多，但我仍然不了解位置、宽度、显示、边距、顶部的工作原理有时有效，有时不有效，有时我使用右、左定位，但在这一点上我不知道怎么做以下是我的网站的外观：我的索引代码： <!DOCTYPE html> <html lang="en"> <head>

我最近开始制作一个web服务器，我通常使用后端代码，但现在我有一个项目要做。我对CSS和HTML仍然很熟悉。所以基本上我需要将银行标识向下移动，标签“Los Santos迷宫银行”稍微靠近标识，我已经研究了很多，但我仍然不了解位置、宽度、显示、边距、顶部的工作原理有时有效，有时不有效，有时我使用右、左定位，但在这一点上我不知道怎么做

以下是我的网站的外观：

我的索引代码：

<!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**

您只需要有一个

div

标记来重新组合图像和文本。该

div

必须具有

display:block

，以便文本不会在同一行上，而是在下面。现在，根据图像的宽度，您可能需要将文本与

text align:center

您可以在上阅读更多有关css规则的信息

img{
显示：块；
文本对齐：居中；
}


洛桑托斯迷宫银行

Firsts，：）例如，

元素。您应该始终尝试使用有效的html，因为带有错误的html可能会影响浏览器中的呈现

其次，我看到您在

之后和

之前添加了

。这可能是为了在徽标上方留出一小部分空白。不要这样做，因为这样你就永远无法在不同的浏览器中与顶端保持可靠的距离。删除

并在您的css中使用

img

的

页边距顶部：16px

左右样式

接下来，为您的

元素指定一个css类，如

并用css设置样式：

。银行名称{
颜色：白色；
边缘顶部：10px；
}

这个

非常具体，因此您应该给它一个专用类，因为页面上可以有其他不需要相同外观的

还有两件事：

避免在html中使用内联样式

不要使用

！重要信息

除非你有充分的理由这么做

另外，默认情况下，

是

块

，因此您不需要html中的

显示：块

。您通常可以在中找到默认样式

希望，这有帮助

感谢您的时间和帮助：）

@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%;
}