react中，div+css页面效果，包含登录页和首页样式，自认为还不错的，可以使用的登录页，带一点点登录验证。

 1.很适合在校大学生完成作业的一些页面效果！

效果图如下：

2.话不多说！源码奉上！！

、、--------------------------html标签内容内容--------

import React, { useState } from 'react';

import './Index2.css'

import { useNavigate  } from 'react-router-dom';

const Login = () => {

    let [name, setName] = useState('');

    let [pwd, setPwd] = useState('');

    const navigate  = useNavigate();

    let shuliang = (event) => {

        console.log("eee",event);

        let name = event.target.value;

        setName(name)

    };

    let shuliang2 = (event) => {

        let name = event.target.value;

        setPwd(name)

    };

    let loginclick = () => {

       if(name === '' || pwd === ''){

        alert('用户名或密码不能为空');

        return

       }

       alert('登录成功');

       navigate('/home');

    };

 

    return (

        <div class="container2">

        <div class='container'>

<div class='login-wrapper'>

<div class='header'>茉莉婚纱艺术馆</div>

<div class='form-wrapper'>

<input type='text' name='username' placeholder='username' class='input-item' onChange={(event)=>shuliang(event)} />

<input type='password' name='password' placeholder='password' class='input-item' onChange={(event)=>shuliang2(event)}/>

<div class='btn' onClick={()=>loginclick()}>登录</div>

</div>

<div class='msg'>

Don't have account?

<a href='#'>Sign up</a>

</div>

</div>

</div>

    </div>

    );

};

export default Login;

、、---------------------------------------css的一些样式------------

/* 主体 div 样式 */

.container2 {

    height: 100%;

    background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);

    width: 100%;

   

}

.login-wrapper {

    background-color: #fff;

    width: 358px;

    height: 588px;

    border-radius: 15px;

    padding: 0 50px;

    position: relative;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    margin-top: 25%;

    }

    .header {

    font-size: 38px;

    font-weight: bold;

    text-align: center;

    line-height: 200px;

    margin-left: -122%;

    color: #fbc2eb;

    }

    .input-item {

    display: block;

    width: 100%;

    margin-bottom: 20px;

    border: 0;

    padding: 10px;

    border-bottom: 1px solid rgb(128, 125, 125);

    font-size: 15px;

    outline: none;

    }

    .input-item:placeholder {

    text-transform: uppercase;

    }

    .btn {

    text-align: center;

    padding: 10px;

    width: 100%;

    margin-top: 40px;

    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);

    color: #fff;

    }

    .msg {

    text-align: center;

    line-height: 88px;

    }

    a {

    text-decoration-line: none;

    color: #abc1ee;

}

3.耽误大家的时间了，如果有帮助到大家，希望大家可以关注我，以后会经常更新一些页面样式，以及vue，react常见的一些问题和解决办法！！谢谢大家啦！！！