简单留言板练习 -

登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录表单</title>
    <style>
        body{
            /* 将浏览器的视口改变为 灰色 */
            background-color:silver
        }
            .form{
                /* 设置为固定定位 */
                position: fixed;
                top: 15rem;
                left: 28rem; 
                background-color: skyblue;
                border-radius: .3rem;
                width: 300px;
                height: 130px;
            }
          .form .form-title{
                /* //设置为网格容器,三行1列,水平和垂直居中 */
                display: grid;
                grid-template-rows: repeat(3,1fr);
                place-items: center;
                outline: none;
            }
            .form .form-title legend{
                margin: auto 0;
                outline: none;
                /* 文本居中 */
                text-align: center;
                outline: solid skyblue;
                font-weight: bold;
            }
           .form .form-title .item{
                margin-bottom: .3rem;
            }
            .form .form-title .item input:hover{
                /* //鼠标移动到input控件中,改变样式 */
               box-shadow: .1rem .1rem .1rem skyblue;
                outline: none;
            }
            .form .form-title .item input{
                border-radius: .2rem;
            }
            .form .form-title .item button{
                border-radius: .2rem;
                padding: 0 .6rem;
            }
            .form .form-title .item a{
                /* 下划线取消 */
                text-decoration: none; 
                border-radius: .2rem;
                padding: 0 .6rem .3rem;
                background-color: cadetblue;
            }
            .form .form-title .item a:hover{
                font-weight: bold;
            }
    </style>
</head>
<body>
        <form action="php" method="POST" class="form">
            <fieldset  class="form-title">
                <legend>请登录</legend>
                <div class="item">
                        <label for="username">用户名:</label>
                        <input type="text" name="username" id="username"  required placeholder="请输入用户名"  >
                </div>
                <div class="item">
                     <label for="">email:&nbsp;</label>
                    <input type="email" name="useremail" id="useremail" required placeholder="请输入邮箱" >
                </div>
               <div class="item">
                   <a href="#" onclick="add()">登录</a>
               </div>
            </fieldset>
        </form>
</body>
<script>
        function add(){
            const username=document.querySelector("#username").value;
            const useremail=document.querySelector("#useremail").value;
            if(username!='123123' && useremail!="123123@qq.com"){
                        alert("用户名或邮箱错误");
                        return false;
            }
            window.location.href="dome4.html";
        }
</script>
</html>

点击登录跳转到留言页面

留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: silver;
    }
    .main{
        width: 300px;
        /* 固定定位 */
        position: fixed;
        top: 5rem;
        left: 27rem;
        background-color: white;
        border-radius: .3rem;
        display: grid;
        grid-template-rows: repeat(2,1fr);
        place-items: center;
    }
    .main .LeaveWord{
            width: 200px;
            margin-top: .2rem;
            border:.1rem solid cadetblue;
            border-radius: .1rem;
    }
    a{
            margin-left: 1rem;
        text-decoration: none;
        padding: 0 .1rem;
        background-color: skyblue;
    }
    li{
        padding-right: 11rem;
        list-style: none;
    }
</style>
<body>
        <div class="main">
                <input type="text" name="" id="" class="LeaveWord" placeholder="请输入留言" onkeydown="tianjia(event)">
                <ul class="list"></ul>
        </div>
</body>
<script>
        function tianjia(event){
            //当按下的按键等于回车键是进入判断体
            if(event.key=='Enter'){
                //获取输入框的值
                const inp=document.querySelector('input');
                const value=inp.value;
                // 创建 li元素
                const li=document.createElement('li');
                //将输入框的值赋给li,并加一个删除按钮
                li.innerHTML=value+"<a href=\"#\" onclick=\"del(this.parentNode)\" >删除</a>";
                //获取ul节点
                const ul=document.querySelector('.list');
                ul.insertAdjacentElement("afterbegin",li);
                inp.value=null;
            }
        }
        function del(element){
            console.log(element);
            //删除当前元素的父节点
            element.remove();
        }
</script>
</html>

留言板页面效果