html+css+js入门一-CSDN博客

本文链接：https://blog.csdn.net/ljs298443/article/details/117752318

一、登录界面：

<!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>登录</title>
    <style>
        .boy{
            /* position: absolute;
            top:0; */
            width: 100%;
            height: 700px;
            /* background-repeat: no-repeat; */
            /* background-size: auto; */
            background-image: url(bg06.png);
            /* background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F9%2F5438cce179af0.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625751180&t=3cb835fa00944bdd4085f3c4aa47d5af); */
        }
        .yuan{
            position: absolute;
            top:70px;
            left:480px;
            width: 600px;
            height: 600px;
            border-radius: 70%;
            background-color:white;
            opacity: 0.7;
        }
        .login{
            font-size: 35px;
            font-weight: bolder;
            position: absolute;
            top:100px;
            left: 220px;
            /* text-align: center;
            width: 420px;
            height: 420px;
            font-size: 35px;
            font-weight: bolder;
            border: solid 1px; */

        }

        #yx{
            position: absolute;
            top:30px;
            left: -56px;
            border: none;
            border-bottom: solid 2px gray;
            
        }

        #mm{
            position: relative;
            top:30px;
            left: -56px;
            border: none;
            border-bottom: solid 2px gray;
        }


        #one{
            position: absolute;
            top:170px;
            left: 270px;
        }

        #two{
            position: absolute;
            top:80px;
            left: -5px;
        }

        #three{
            position: absolute;
            top:90px;
            left: -5px;
        }

        #btn1{
            width: 100px;
            height: 35px;
            position: absolute;
            top:130px;
            left: -73px;
            background-color:rgb(238, 255, 0);
            display: inline-block;
            padding: 2px;
            border-radius: 45px;
        }

        #btn2{
            width: 100px;
            height: 35px;
            position: absolute;
            top:130px;
            left: 45px;
            background-color: rgb(238, 255, 0);
            display: inline-block;
            padding: 2px;
            border-radius: 45px;
        }
    </style>
</head>
<body>
    <div class="boy">
        <div class="yuan">
            <b class="login">立即登录</b>
            <text id="one">邮箱<text><input type="text" id="yx" onblur="checkemail()">
            <text id="two">密码<text><input type="password" id="mm" placeholder="密码长度至少为6位" onblur="checkpassword()">
            <a href="" style="flood-color: rgb(180, 48, 48);" id="three">忘记密码?</a>
            <button type="button" id="btn1">登录</button> <button type="button" id="btn2">注册</button>
        </div>
    </div>
    
</body>
<script>
    function checkemail(){
        var email=document.getElementById("yx").value;
        if(email.match(/[0-9]{5,8}@[0-9a-zA-Z]{2,4}.com/) == null){
            alert("邮箱格式错误");
            return false;
        }
        return true;
    }

    function checkpassword(){
        var pas=document.getElementById("mm").value;
        if(pas.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/) == null){
            alert("密码格式错误");
            return false;
        }
        return true;
    }
</script>
</html>

效果：

二、注册界面

<!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>注册</title>
    <style>
        #boy{
            width: 100%;
            height: 700px;
            background-image: url(bg06.png);
        }

        .zc{
            font-size: 30px;
            font-weight: bolder;
            position: absolute;
            top:30px;
            left: 320px;

        }

        #one{
            position: absolute;
            top:60px;
            left:200px;
            width: 800px;
            height: 600px;
            background-color:white;
            opacity: 0.7;
        }

        #two{
            position: relative;
            top:52px;
            left:992px;
            width: 300px;
            height: 600px;
            /* background-color:white; */
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.t-biao.com%2FtubiaoJDEwLmFsaWNkbi5jb20vYmFvL3VwbG9hZGVkL2kzL1RCMTdsb2VSJDZYYUZYViQ1JDM.jpg&refer=http%3A%2F%2Fwww.t-biao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625799470&t=d2fbc86763123dcb5bc62b4c2849e10a);
        }

        #fir{
            position: absolute;
            top:90px;
            left: 370px;
        }

        #sen{
            position: absolute;
            top:70px;
            left: -5px;
        }

        #three{
            position: absolute;
            top:70px;
            left: 5px;
        }

        #four{
            position: absolute;
            top:70px;
            left: 1px;
        }

        #five{
            position: absolute;
            top:80px;
            left:1px;
        }

        #six{
            position: absolute;
            top:80px;
            left: -15px;
        }

        #yx{
            position: absolute;
            top:30px;
            left: -100px;
            width: 254px;
            border: none;
            border-bottom: solid 2px gray;
            
        }

        #ming{
            position: relative;
            top:10px;
            left: -100px;
            width: 254px;
            border: none;
            border-bottom: solid 2px gray;
        }

        #nan{
            position: absolute;
            top:37px;
            left: -11px;
        }

        #nu{
            position: absolute;
            top:37px;
            left: 50px;
        }
        
        #l{
            position: absolute;
            top: 35px;
            left: -30px;
        }

        #n{
            position: relative;
            top: 15px;
            left: 30px;
        }

        #toux{
            position: relative;
            top:15px;
            left: -110px;
            width: 262px;
            border: none;
            border-bottom: solid 2px gray;
        }

        #mm{
            position: relative;
            top:15px;
            left: -110px;
            width: 262px;
            border: none;
            border-bottom: solid 2px gray;
        }

        #resm{
            position: relative;
            top:15px;
            left: -95px;
            width: 262px;
            border: none;
            border-bottom: solid 2px gray;
        }

        #btn1{
            width: 270px;
            height: 35px;
            position: absolute;
            top:85px;
            left: -100px;
            background-color:rgb(238, 255, 0);
            display: inline-block;
            padding: 2px;
            border-radius: 45px;
        }

        #btn2{
            width: 100px;
            height: 35px;
            position: relative;
            top:430px;
            left: 90px;
            text-decoration: none;
            color:white;
            /* background-color:rgb(238, 255, 0); */
            display: inline-block;
            padding: 2px;
            border-radius: 45px;
            background-color: transparent;
        }


        #zhanghao{
            font-size: 30px;
            font-weight: bolder;
            position: absolute;
            top:60px;
            left: 80px;
            color: rgba(218, 36, 36, 0.842);
        }

        #haojiu{
            font-size: 18px;
            font-weight: bolder;
            position: absolute;
            top:90px;
            left:50px;
            color: rgba(231, 33, 33, 0.986);
        }

    </style>
</head>
<body>
    <div id="boy">
        <div id="one">
            <b class="zc">立即注册</b>
            <text id="fir">邮箱<text><input type="text" id="yx" onblur="checkemail()">
            <text id="sen">用户名<text><input type="text" id="ming" placeholder="用户名长度不能超过五位" style="text-align: center;" onchange="checkname()">
            <text id="three">性别<br><text><text id="l">男</text><input type="radio" name="sex" id="nan"> <text id="n">女</text><input type="radio" name="sex" id="nu"><br>
            <text id="four">头像<text><input type="file" id="toux" placeholder="未选择任何文件">
            <text id="five">密码<text><input type="password" id="mm" placeholder="密码长度至少为6位,且为数字和字母的组合" onblur="checkpassword()">
            <text id="six">确认密码<text><input type="password" id="resm" placeholder="两次密码须一致" style="text-align: center;" onblur="checkrespassword()">
            <button type="button" id="btn1">注册</button>
        </div>
        <div id="two">
            <text id="zhanghao">已有账号?</text>
            <p id="haojiu">有账号就登录吧,好久不见了!</p>
            <button type="button" id="btn2">登录</button>
        </div>
    </div>
</body>
<script>
    function checkemail(){
        var email=document.getElementById("yx").value;
        if(email.match(/[0-9]{5,8}@[0-9a-zA-Z]{2,4}.com/) == null){
            alert("邮箱格式错误");
            return false;
        }
        return true;
    }

    function checkname(){
        var xm=document.getElementById("ming").value;
        if(xm.length>5){
            alert("用户名格式错误");
            return false;
        }
        return true;
    }

    function checkpassword(){
        var pas=document.getElementById("mm").value;
        if(pas.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/)==null){
            alert("密码格式错误");
            return false;
        }
        return true;
    }

    function checkrespassword(){
        var password1=document.getElementById("mm").value;
        var password2=document.getElementById("resm").value;
        if(password1 != password2){
            alert("密码不一致!");
            return false;
        }
        return true;
    }
</script>
</html>

效果：

三、旋转相册：

<!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>
        /* p{ color:red; } */
        *{  
            padding: 0;  
            margin: 0;  
            border: none;  
            outline: none;  
            box-sizing: border-box;  
        }  

        /* *:before,*:after{  
            box-sizing: border-box;  

        }  

        html,body{  
            min-height: 100%;  
        }  

        body{
            background:#99FF00;
            background-image: radial-gradient(mintcream 0%, lightgray 100%);
        } */

        .Container{
            margin: 4% auto;  
            width: 300px;  
            height: 140px;  
            position: relative;
            top: 100px;
            perspective: 1000px;
            border: 2px; 
            
        }

        #one{
            /* width: 100; */
            background-image: url("bg06.png");
            width: 100%;
            height: 650px;
            overflow: hidden;
            position: absolute;
            top: 50px;
            /* background-repeat: no-repeat;
            background-size: auto; */

        }

        #two{
            position: fixed;
            top: 0px;
            background-color: cadetblue;
            width: 100%;
            height: 50px;
        }

        #three{
            position: relative;
            left: 45px;
            top: 12px;
        }

        #four{
            position: fixed;
            right: 140px;
            top: 12px;
        }

        #five{
            position: fixed;
            right: 45px;
            top: 12px;
        }

        #carousel{
            width: 100%;
            height: 650px;
            position: absolute;
            transform-style:preserve-3d; 
            animation: rotation 20s infinite linear;
        }  

        #carousel:hover{ 
            animation-play-state: paused;  

        }  

        #carousel figure{
            display: block; 
            position: absolute;  
            width: 220px;  
            height: 200px;  
            left: 10px;  
            top: 10px;  
            background: black;  
            overflow: hidden;  
            border: solid 5px black;  
        }  

        img{
            filter: grayscale(0);
            cursor: pointer;  
            transition:all 0.3s ease 0s;  
            width: 100%;  
            height: 100%;  
        }  

        img:hover{  
            filter: grayscale(1);  
            transform: scale(1.2,1.2);
        }  

        #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}  
        #carousel figure:nth-child(2) { transform: rotateY(45deg) translateZ(288px);}  
        #carousel figure:nth-child(3) { transform: rotateY(90deg) translateZ(288px);}  
        #carousel figure:nth-child(4) { transform: rotateY(135deg) translateZ(288px);}  
        #carousel figure:nth-child(5) { transform: rotateY(180deg) translateZ(288px);}  
        #carousel figure:nth-child(6) { transform: rotateY(225deg) translateZ(288px);}
        #carousel figure:nth-child(7) { transform: rotateY(270deg) translateZ(288px);}
        #carousel figure:nth-child(8) { transform: rotateY(325deg) translateZ(288px);}


        @keyframes rotation{
            from{
                transform: rotateY(0deg);  
            }  
            to{  

                transform: rotateY(360deg);  
            }  

        }
    </style>
</head>
<body>
    <!-- <p id="word" style="display:none;"><strong>***************
    <br>@@@@@@@@@@@@@@@@@@@@@@@@@<br>
        %%%%%%%%%%%%%%%%%%%%%%%%%%%</p>
    <p id="show"></p> -->
    <div id="one">
        <div id="two">
            <text id="three">欢迎李四登录!</text> <text id="four">个人信息</text> <text id="five">退出</text>
        </div>
        <div class="Container"> 
            <div id="carousel"> 
                <figure><img src="pic1.jpeg" ></figure>
            
                <figure><img src="pic2.jpg"></figure>  
            
                <figure><img src="pic3.jpg" ></figure>  
            
                <figure><img src="pic4.jpg" ></figure>  
            
                <figure><img src="pic5.jpg"></figure>  
            
                <figure><img src="pic6.jpg" ></figure>
                <figure><img src="pic7.jpg" ></figure>
                <figure><img src="pic8.jpg" ></figure>
            </div> 
        </div> 

    </div>
   
</body>
</html>

效果：