我正在嘗試爲網站創建登錄頁面,https://essaydapp.com要提交併嘗試進入應用程序。我試圖模仿他們的設計(見鏈接),但我有一些問題:如何爲分隔線製作完整的窗口頁面高度邊框?
截圖:
在第一張截圖你可以看到小的1px虛線邊框,我希望這是整個頁面的高度而不是僅僅是表單。 在第二個屏幕截圖中,您可以看到頁面的邊緣,頂部有白色,但我希望它也是藍色。
感謝您提前提供任何幫助。
form {
/*border: 10px solid #1acebc;*/
padding: 28px;
border-left: 1px solid black;
border-left-style: dashed;
border-right: 1px solid black;
border-right-style: dashed;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}
img {
display: block;
margin: 0 auto;
padding-bottom: 60px;
padding-top: 30px;
width: 300px;
height: 300px;
}
body {
background-color: #e7f3f6;
/*border-left: 250px solid #007da5;
border-right: 250px solid #007da5;*/
border-left: 175px solid #007da5;
border-right: 175px solid #007da5;
padding-top: 175px;
padding-bottom: 215px;
}
<form>
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>
提供一個片段與所需的代碼來重現問題。 –
https://codepen.io/Kastel/pen/VMEayr這是一個codepen。 – Kastel