如今,一个专业网站LinkedIn非常流行。这个用户界面通常在“LinkedIn”网站上看到。在本文中,我们将使用 HTML 和 CSS 创建一个 LinkedIn 登录 UI。以下是有关如何执行此操作的两个步骤。通过参考这篇文章,这将帮助初学者使用 HTML 和 CSS 构建一些很棒的 UI。
在代码之前,您只需要在程序中为图标包含以下样式表:
https://use.fontawesome.com/releases/v5.7.0/css/all.css
示例:让我们看看如何创建像 likedin 这样的登录表单。
index.html
LinkedIn Login Form Using HTML and CSS
style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.container {
width: 320px;
height: 480px;
background: #fff;
box-shadow: 0 10px 15px rgba(179, 179, 179, 0.7);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 7px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 1rem;
}
.container h2{
color: #0A66C3;
font-size: 1.6rem;
}
.container h2 i{
font-size: 1.8rem;
padding-left: .1rem;
}
.text p{
font-size: .8rem;
padding-top: 0.3rem;
}
.input {
position: relative;
width: 100%;
height: 50px;
margin-bottom: 0.7em;
}
.your-input input{
width: 100%;
height: 50px;
padding-top: 1.1rem;
padding-left: 9px;
outline: none;
border: 1px solid #8c8c8c;
border-radius: 3px;
transition: .2s;
}
.your-input label {
position: absolute;
top: 30%;
left: 10px;
font-size: 1.1rem;
color: #8c8c8c;
transition: .2s;
}
.input input:focus ~ label,
.input input:valid ~ label{
top: 10%;
font-size: .8rem;
color: #000;
}
.input input:focus {
border-width: 2px;
border-color: #0A66C3;
}
.forgot-password-link {
width: 140px;
padding: .2rem;
text-align: center;
text-decoration: none;
font-weight: bolder;
color: #0A66C3;
transition: .3s;
border-radius: 12px;
}
.forgot-password-link:hover{
background: rgba(10, 102, 195, 0.3);
}
button {
height: 50px;
background: #0A66C3;
outline: none;
border: none;
border-radius: 30px;
color: #fff;
font-size: 1rem;
font-weight: bolder;
}
.join-link {
text-decoration: none;
font-weight: bolder;
color: #0A66C3;
}
.join-now{
text-decoration: none;
font-weight: bolder;
color: #0A66C3;
border-radius: 12px;
transition: .3s;
font-weight: bolder;
padding: .2rem;
}
.join-now:hover{
background: rgba(10, 102, 195, 0.3);
}
样式文件
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.container {
width: 320px;
height: 480px;
background: #fff;
box-shadow: 0 10px 15px rgba(179, 179, 179, 0.7);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 7px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 1rem;
}
.container h2{
color: #0A66C3;
font-size: 1.6rem;
}
.container h2 i{
font-size: 1.8rem;
padding-left: .1rem;
}
.text p{
font-size: .8rem;
padding-top: 0.3rem;
}
.input {
position: relative;
width: 100%;
height: 50px;
margin-bottom: 0.7em;
}
.your-input input{
width: 100%;
height: 50px;
padding-top: 1.1rem;
padding-left: 9px;
outline: none;
border: 1px solid #8c8c8c;
border-radius: 3px;
transition: .2s;
}
.your-input label {
position: absolute;
top: 30%;
left: 10px;
font-size: 1.1rem;
color: #8c8c8c;
transition: .2s;
}
.input input:focus ~ label,
.input input:valid ~ label{
top: 10%;
font-size: .8rem;
color: #000;
}
.input input:focus {
border-width: 2px;
border-color: #0A66C3;
}
.forgot-password-link {
width: 140px;
padding: .2rem;
text-align: center;
text-decoration: none;
font-weight: bolder;
color: #0A66C3;
transition: .3s;
border-radius: 12px;
}
.forgot-password-link:hover{
background: rgba(10, 102, 195, 0.3);
}
button {
height: 50px;
background: #0A66C3;
outline: none;
border: none;
border-radius: 30px;
color: #fff;
font-size: 1rem;
font-weight: bolder;
}
.join-link {
text-decoration: none;
font-weight: bolder;
color: #0A66C3;
}
.join-now{
text-decoration: none;
font-weight: bolder;
color: #0A66C3;
border-radius: 12px;
transition: .3s;
font-weight: bolder;
padding: .2rem;
}
.join-now:hover{
background: rgba(10, 102, 195, 0.3);
}
输出:现在,正如你在输出中看到的,我们已经使用 HTML 和 CSS 创建了 LinkedIn 登录 UI,这将帮助你创建一些著名和流行网站的很棒的 UI。