前端学习————css实现简单登录页面

css实现简单登录页面

  • 一、页面展示
  • 二、思路
    • 1.设置背景图片
    • 2.设置登录框框并使其处于靠右位置
    • 3.设置登录框框内容
  • 三、代码展示
    • 1.HTML
    • 2.css

一、页面展示

前端学习————css实现简单登录页面_第1张图片

二、思路

1.设置背景图片

2.设置登录框框并使其处于靠右位置

3.设置登录框框内容

三、代码展示

1.HTML


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心title>
    <link rel="stylesheet" href="./login.css">
head>
<body>
      <div class="form">
        <h2>
          <span>登录span>
        h2>
        <div class="item">
          <input type="text" placeholder="账号">
        div>
        <div class="item">
          <input type="password" placeholder="密码">
        div>
        <div class="button">
          <button>登录button>
        div>
        <div class="last">
            <last>———————其他方式登录———————last>
        div>
      div>
body>
html>

2.css

在css里面设置背景图片

body{
    background: url("img/6.jpg");
}
.form{
    width: 420px;
    height: 550px;
    border: 1px solid rgb(126,117,117);
    margin-left: 850px;
    margin-top: 130px;
    /*background-color: rgb(94,93,91,.11);*/
    border-radius: 6mm;
    background-color: seashell;
}
.form h2{
    font-family: "Agency FB";
    text-align: center;
    font-size: 30px;
    color: black;
    border-bottom: 1px solid rgb(105,105,105);
    height: 50px;
    margin-bottom: 40px;
}
input[type="text"],input[type="password"]{
    border: 1px solid #dcdfe6;
    width: 75%;
    box-sizing: border-box;
    border-radius: 3px;
    height: 50px;
    text-indent: 1em;
    font-size: 14px;
    color: black;
    margin: 16px 48px;
    background-color: rgb(126,117,117,.20);
    /*background-image: linear-gradient(95deg,rgba(111,399,99,0.61),rgba(111,4557,180,0.5));*/
    background-image: linear-gradient(95deg,rgba(114,114,202,.3),rgba(90,187,182,0.5));
}
input[type="text"]::placeholder,input[type="password"]::placeholder{
    color: black;
}
input[type="text"]:hover,input[type="password"]:hover{
    border-color: #33476e;
}
.form .button{

}
button{
    width: 85px;
    height: 30px;
    margin: 45px 170px;
    background-color: #dcdfe6;
    background-image: linear-gradient(95deg,rgba(114,114,202,.3),rgba(90,187,182,0.5));
}
.last{
    margin:30px 50px ;
    font-size: 15px;
    color: grey;
}

你可能感兴趣的:(前端,#,css,前端,学习,css)