Web front-end experiment 3

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div_main{
    
    
        width: 254px;

    }
    .text{
    
    
        width: 250px;
        height: 100px;
        word-wrap: break-word;
  
    }
    .div2{
    
    
        float:right;
    }
    .div_message{
    
    
        height: 500px;
        width: 254px;
        margin-top:30px;
    }
    ul{
    
    
        margin-top: 20px;
        padding: 0;
    }
    li{
    
    
        padding-left: 15px;
        padding-right: 15px;
        width: 224px;
        border-bottom: 1px solid;
        overflow: hidden;
        margin-top: 20px;
        margin-bottom: 20px;
        font:15px 黑体;
    }
</style>
<body>
    <div class="div_main">
    <div>
        <input class="text" name="" id="inputbox">
    </div>
    
    <div class="div2">
        <input type="button" value="提交" id="b1">
    </div>

    <div class="div_message">
        <ul id="my_list">
        
        </ul>
    </div>
</div>
</body>
<script src="./js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $("#b1").click(function(){
    
    
        let s1 = "";
        let s2 = $("#inputbox").val();
        s1 += "<li>" + s2 +"</li>";
        $("#my_list").append(s1);
        // 将文本框的内容设置为空
        $("#inputbox").val("")
    })
</script>

</html>

insert image description here

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        li {
    
    
            list-style: none;
        }

        #nav {
      
      
            width: 600px;
            margin: 100px auto 0px;
        }

        #nav li {
      
      
            float: left;
        }

        .box {
    
    
            width: 450px;
            height: 300px;
        }

   
        /* 该样式  会将上面所设置的li样式覆盖 */
        .box ul li {
    
    

            width: 450px;
            font-size: 14x;
            line-height: 40px;
            border-bottom: 1px dotted #aaa;
        }

        span {
    
    
            display: inline-block;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            background: #000;
            font-size: 14px;
        }

        span:hover {
    
    
            background: #aaa;
        }

  
    </style>
</head>

<body>
    <ul id="nav">
        <li>
            <span>热门排行</span>
        </li>
        <li>
            <span>美图速递</span>
        </li>
        <li>
            <span>前沿科技</span>
        </li>


        <div class="box">
            <div>
                <ul>
                     <li>“网红”</li>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>鹅教官</li>
                    <li>444</li>
                    <li>555</li>
                    <li>666</li>
                </ul>
            </div>
            <div>
                <ul>
                     <li>羊陪练</li>
                    <li>777</li>
                    <li>888</li>
                    <li>99</li>
                </ul>
            </div>

        </div>

    </ul>

    <script src="./js/jquery-3.1.1.min.js"></script>
    <script>
        // 1. 鼠标经过左侧的小li
        // $(".box div").hide();
        // 选中了所有 ID 为 "nav" 的元素下的所有 li 标签元素，
        // 并添加了鼠标移入事件 (mouseover) 的监听器
        $("#nav li").mouseover(function () {
    
    
            // 2. 得到当前小li 的索引号
            var index = $(this).index();
            console.log(index);
            // 4. 让其余的图片（就是其他的兄弟）隐藏起来
            // 让类选择器box中的所有div
            // eq(index)表示取指定下标的div  
            // siblings().hide()表示将index指定元素的同级元素进行隐藏
            $(".box div").eq(index).siblings().hide();
            // 取box类下的所有div中的坐标为index的div进行展示
            $(".box div").eq(index).show();
        })
    </script>
</body>

</html>

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>


        body{
    
    
        background-color: darkgray;
        height:90%;width:40%;
        position:fixed;
        top:0;right:0;bottom:0;left:0;
        margin:auto;
        }

        .div_bigbox{
    
    
        width: 400px;
        }

        .div_box2{
    
    
        background-color: rgb(105, 199, 227);
        height: 200px;
        padding-left: 30px;
        padding-top: 30px;
        }

        legend{
    
    
            text-align: center;
        }

        form {
    
    
        display: flex;
        flex-direction: column;
        align-items: center;
        }

        ul{
    
    
            color: red;
            font-size: 1px;
        }


        #submit{
      
      
        margin-top: 8px;
        height: 30px;
        width: 165px;
        background-color:darkcyan;
        color:#fff;
        font-size: 15px;
        }

        #username{
      
      
            height: 30px;
            width: 165px;
            margin-bottom: 10px;
        }

        #password{
      
      
            height: 30px;
            width: 165px;
            margin-bottom: 10px;
        }

    </style>


</head>
<body>
    
    <div class="div_bigbox">
        <div class="div_box2">
        <form >
            <fieldset>
                <legend>注册</legend>
                <input id="username" type="text" placeholder="请输入你的用户名">
                <br>
                <div id="error1"></div>
                <input id="password" type="password" placeholder="请输入你的密码">
                <br>
                <div id="error2"></div>
                <input type="button" id="submit" value="提交">
            </fieldset>
        </form>
        </div>
    </div>
    


</body>

<script src="./js/jquery-3.1.1.min.js"></script>
<script>
    $("#submit").click(function(){
    
    

        $("#error1").empty();
        $("#error2").empty();

        let un = $("#username").val();
        let unl = un.length;
        let pw = $("#password").val();
        let pwl = pw.length;
        console.log(un+unl+pw+pwl);
        if(unl<6 || unl >18){
    
    
            $("#error1").append("<ul> 用户名长度必须为6到18位！</ul>");
        }
        if(pwl < 6){
    
    
            $("#error2").append("<ul> 密码长度不能小于6位！</ul>");
        }
    });
</script>

</html>

Web front-end experiment 3

Guess you like