2021-06-09

最新推荐文章于 2023-05-25 14:06:34 发布

晏虹计科非

最新推荐文章于 2023-05-25 14:06:34 发布

阅读量99

点赞数

本文链接：https://blog.csdn.net/wwwwww234523/article/details/117751520

版权

文章目录

前言
一、登录页面
- .html
- .css
二、注册页面
- .html
- .css
三、相册
- .html
- .css

前言

HTML CSS JS个人相册的例子

提示：以下是本篇文章正文内容，下面案例可供参考

一、登录页面

.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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <!-- 背景颜色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
        
            <!-- 背景圆 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>

            <div class="circle" style="--x:3"></div>
            
            <!-- 登录框 -->
            <div class="container">
                <div class="form">
                    <h2>登录</h2>
                    <form>
                        <div class="inputBox">
                        <input type="text" id="email" placeholder="姓名（邮箱）" οnchange="emailCheck()">
                         
                            
 
                        </div>
                        <div class="inputBox">
                            <input type="password" placeholder="密码" id="password" οnchange="passwordCheck()">
            
                           
 
                        </div>
                        <div class="inputBox">
                           <input type="submit" value="登录">
                    
                    </div>
                        <p class="forget">忘记密码?<a href="./zhaopian.html">
                                点击这里
                            </a></p>
                        <p class="forget">没有账户?<a href="./zhuce.html">
                                注册
                            </a></p>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <script>
        function emailCheck() {
            let email = document.getElementById("email")
            let value = email.value
            let patt = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
            if (!patt.test(value)) {
                alert("邮箱格式不正确！应为xxx@xx.com")
                email.value = ""
                email.focus()
            }
        }

        function passwordCheck() {
            let password = document.getElementById("password")
            let value = password.value
            let patt =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/         // /^\d{6}$/
            if (!patt.test(value)) {
                alert("密码格式不正确！应为至少6位的数字与字母组合")
                password.value = ""
                password.focus()
            }
        }
    </script>
    </body>
</html>

.css

/* 清除浏览器默认边距，
使边框和内边距的值包含在元素的width和height内 */
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* 使用flex布局，让内容垂直和水平居中 */
 
section {
    /* 相对定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #65748b, #ca4a86);
   /*img src="img" alt=""*/
}
 
/* 背景颜色 */
 
section .color {
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
}
 
/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
 
section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #3b8fc0c2;
}
 
section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #e7e7e7;
}
 
section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #ad67db;
}
 
.box {
    position: relative;
}
 
/* 背景圆样式 */
 
.box .circle {
    position: absolute;
    background: rgba(11, 137, 146, 0.295);
    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(137, 239, 20, 0.112);
    border: 1px solid rgba(102, 88, 185, 0.685);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(滤镜) 属性，改变颜色。
    hue-rotate(deg)  给图像应用色相旋转 
    calc() 函数用于动态计算长度值 
    var() 函数调用自定义的CSS属性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 调用动画animate，需要10s完成动画，
    linear表示动画从头到尾的速度是相同的，
    infinite指定动画应该循环播放无限次*/
    animation: animate 10s linear infinite;
    /* 动态计算动画延迟几秒播放 */
    animation-delay: calc(var(--x) * -1s);
}
 
/* 背景圆动画 */
 
@keyframes animate {
    0%, 100%{
        transform: translateY(-50px);
    }
    50% {
        transform:translateY(50px);
    }
}
 
.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}
 
.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}
 
.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}
 
.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}
 
.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}
 
/* 登录框样式 */
 
.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
 
.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}
 
/* 登录标题样式 */
 
.form h2 {
    position: relative;
    color: rgba(109, 28, 156, 0.692);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}
 
/* 登录标题的下划线样式 */
 
.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}
 
.form h2:hover:before {
    width: 53px;
}
 
.form .inputBox {
    width: 100%;
    margin-top: 20px;
}
 
/* 输入框样式 */
 
.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
 
.form .inputBox input::placeholder {
    color: #fff;
}
 
/* 登录按钮样式 */
 
.form .inputBox input[type="submit"] {
    background: #fff;
    color: #666;
    max-width: 100px;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
}
 
.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}
 
.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

效果示例：
在这里插入图片描述

二、注册页面

.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>
    <link rel="stylesheet" href="./set.css">
    
</head>
<body>
    <div class="reg_back">
        <div class="reg_left">
            <p>立即注册</p>
            
        </div>
        <div class="reg_center">
            <div class="reg_form">
                <form action="#" method="post">
                    <table>
                        
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right"><input type="text" name="username" placeholder="请输入用户名"id="username" onchange="usernameCheck()"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right"><input type="password" name="password" placeholder="请输入密码"id="password" onchange="passwordCheck()"></td>

                           
                        </tr>
                        <tr>
                            <td class="td_left"><label for="confirmPwd">再次输入密码</label></td>
                            <td class="td_right"><input type="password" name="pconfirmPwd" placeholder="再输入密码"id="confirmPwd" onchange="confirmPwdCheck()"></td>  
                        </tr>
                        <tr>
                            <td class="td_left"><label for="Email">Email</label></td>
                            <td class="td_right"><input type="email" name="email" placeholder="请输入Email" id="Email" onchange="emailCheck()"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="rename">姓名</label></td>
                            <td class="td_right"><input type="text" name="rename" placeholder="请输入真实姓名" id="rename" onchange="renameCheck()">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="Telphone">手机号</label></td>
                            <td class="td_right"><input type="text" name="telphone" placeholder="请输入您的手机号"
                                                        id="Telphone" onchange="TelphoneCheck()"> </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label>性别</label></td>
                            <td class="td_right"><input type="radio" name="gender" value="male" checked> 男
                                <input type="radio" name="gender" value="female"> 女
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="Birthday">出生日期</label></td>
                            <td class="td_right"><input type="date" name="birthday" id="Birthday"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="checkcode">验证码</label></td>
                            <td class="td_right"><input type="text" name="checkcode" id="checkcode" onchange="passwordCheck()">
                                <img src="./验证码.png" id="img_check"></td>
                             
                        </tr>
                        <tr>
                            <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="reg_right">
            <p>已有账号?<a href="./xiangce.html">立即登录</a></p>
        </div>
    </div>
   
   <script>
         function emailCheck() {
            let email = document.getElementById("email")
            let value = email.value
            let patt = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
            if (!patt.test(value)) {
                alert("邮箱格式不正确！应为xxx@xx.com")
                email.value = ""
                email.focus()
            }
        }


        function TelphoneCheck() {
            let Telphone = document.getElementById("Telphone")
            let value = Telphone.value
            let patt = /^[1,2,3,4,5,7,8,9,0][0-9]{11}$/
            if (!patt.test(value)) {
                alert("应为11位手机号")
                Telphone.value = ""
                Telphone.focus()
            }
        }

        function passwordCheck() {
            let password = document.getElementById("password")
            let value = password.value
            let patt =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/         // /^\d{6}$/
            if (!patt.test(value)) {
                alert("密码格式不正确！应为至少6位的数字与字母组合")
                password.value = ""
                password.focus()
            }
        }

        function confirmPwdCheck() {
            let confirmPwd = document.getElementById("confirmPwd")
            let passwordValue = document.getElementById("password").value
            let value = confirmPwd.value
            if (passwordValue !== value) {
                alert("二次密码不一致")
                confirmPwd.value = ""
            }
        }

        function codeCheck() {
            let code = document.getElementById("code")
            let value = code.value
            let patt = /^[A-Za-z]{5}$/
            if (!patt.test(value)) {
                alert("验证码格式不正确！")
                code.value = ""
                code.focus()
            }
        }
        function usernameCheck() {
            let username = document.getElementById("username")
            let value = username.value
            let patt =/^(?![a-zA-Z]+$)[0-9A-Za-z]{1,5}$/ 
            if (!patt.test(value)) {
                alert("错误，不能超过5位")
                username.value = ""
                username.focus()
            }
        }
    </script>
</body>
</html>

.css

代码如下（示例）：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    }
    
    body {
        background: linear-gradient(to bottom, #65748b, #ca4a86);
       /* background: url("./梅里雪山.png") no-repeat center;*/
        /*设置图片适应整个页面*/
        background-size: 100% 100%;
        background-attachment:fixed;
    }
    
    .reg_back {
        /*设置整体的尺寸、背景色、边距等*/
        width: 850px;
        height:500px;
        border: 2px solid #1d3a3f;
        background: rgba(24, 61, 95, 0.288);
        margin: auto;
        margin-top: 20px;
    }
    
    .reg_left {
        /*设置左浮动和外边距*/
       /*float: left;*/
       display: flex;
       justify-content: center;
       align-items: center;
        margin: 10px;
    }
    
   /*.reg_left > p:first-child { 
        /*设置段落（新用户注册）颜色和字体大小*/
       /* color: rgb(26, 11, 11);
        font-size: 20px;
    } */
    
    .reg_left > p:last-child {
        color: #000000;
        font-size: 25px;
    }
    
    .reg_center {
        /*设置中间的各种输入框等*/
        float: center;
        width: 450px;
    }
    
    .reg_right {
        /*设置右边段落浮动和外间距*/
        float: right;
        margin: 30px;
    }
    
    .reg_right > p:first-child {
        font-size: 15px;
    }
    
    .reg_right p a {
        /*设置超链接（立即登录）颜色*/
        color: crimson;
    }
    
    .td_left {
        /*设置表单中字体对齐方式和宽度、高度*/
        width: 100px;
        text-align:right;
        height: 40px;
    }
    
    .td_right {
        /*设置输入框内边距*/
        padding-left: 40px;
    }
    
    #username ,#password,#confirmPwd,#Email, #rename ,#Telphone,#Birthday,#checkcode{
        /*设置输入框大小和边框*/
        width: 200px;
        height: 30px;
        border: 1px solid #A4A4A4;
        /* 设置边框为圆角 */
        border-radius: 8px;
        padding-left: 10px;
    }
    #checkcode{
        /*验证码宽度*/
        width: 100px;
    }
    #img_check{
        /*验证码图片*/
        vertical-align: middle;
        height: 30px;
        width: 95px;
    }
    #btn_sub{
        /*注册按钮*/
        background: rgba(59, 82, 145, 0);
        width: 100px;
        height: 40px;
        border: 1px solid rgba(166, 34, 199, 0.568) ;
    }


```c
data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

效果展示：
在这里插入图片描述

三、相册

.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>
    <link rel="stylesheet" href="zhoapian.css">
</head>

<body>
    <div class="titlebox">
        <!--小黑阴影框-->
        <div class="text">
            <!--欢迎登录-->
            <p>欢迎登录!</p>
        </div>
        <div class="righttext">
            <!--个人信息 退出-->
           <span>个人信息</span>&nbsp;&nbsp;&nbsp;
           <span>退出</span>
        </div>
    </div>
    <div class="photoshow">
        <!--照片显示框-->
       <div id="photobox"> 
        <img src="./1/1.jpg" alt="">
        <img src="./1/2.jpg" alt="">
        <img src="./1/3.jpg" alt="">
        <img src="./1/4.jpg" alt="">
        <img src="./1/5.jpg" alt="">
        <img src="./1/6.jpg" alt="">
        <img src="./1/7.jpg" alt="">
        <img src="./1/8.jpg" alt="">
        <img src="./1/9.jpg" alt="">
        <img src="./1/10.jpg" alt="">
        <img src="./1/11.jpg" alt="">
       </div>
       </div>
</body>
</html>

.css

*  {
    padding: 0;
    margin: 0;
    list-style: none;
}
.titlebox{
    display: flex;
    background-color: #2fa37788;
    width: 100%;
    height: 90px;
}
.photoshow{
    /*margin-top: 10px;*/
    background: linear-gradient(to bottom, #65748b, #ca4a86);
    background-size: 100%;
    height: 700px;
    width: 100%;

}
.text{
    color:aliceblue;
    margin: 30px;
    font-size: 20px;
    font-weight: bold;
}
.righttext{
    color:aliceblue;
    margin: 30px;
    font-size: 20px;
    font-weight: bold;
    float: right;
    margin-left: 1200px; 
}
img{
    width: 400px;
    height: 500px;
}
#photobox{
    width: 280px;
    height: 400px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 200px auto;
    transform-style: preserve-3d;
    transform: rotate3d(-5deg) rotate3d(0deg);
    animation: run 30s linear infinite;
}
#photobox img{
    width: 250px;
    height: 350px;
    border: 5px solid #ccc;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 0;
}

/*依次设置图像盒子中每个图像旋转后位置*/
#photobox img:nth-child(1){
    transform: rotateY(0deg) translateZ(500px);
}
#photobox img:nth-child(2){
    transform: rotateY(36deg) translateZ(500px);
}
#photobox img:nth-child(3){
    transform: rotateY(72deg) translateZ(500px);
}
#photobox img:nth-child(4){
    transform: rotateY(108deg) translateZ(500px);
}
#photobox img:nth-child(5){
    transform: rotateY(144deg) translateZ(500px);
}
#photobox img:nth-child(6){
    transform: rotateY(180deg) translateZ(500px);
}
#photobox img:nth-child(7){
    transform: rotateY(216deg) translateZ(500px);
}
#photobox img:nth-child(8){
    transform: rotateY(252deg) translateZ(500px);
}
#photobox img:nth-child(9){
    transform: rotateY(288deg) translateZ(500px);
}
#photobox img:nth-child(10){
    transform: rotateY(324deg) translateZ(500px);
}
#photobox img:nth-child(11){
    transform: rotateY(360deg) translateZ(500px);
}

/*采用@keyframes 规则创建run动画。*/
@keyframes run {
    0%{transform: rotateX(0deg) rotateY(0deg);
    }
    25%{transform: rotateX(10deg) rotateY(90deg);
    }
    50%{transform: rotateX(0deg) rotateY(180deg);
    }
    75%{transform: rotateX(-10deg) rotateY(270deg);
    }
    100%{transform: rotateX(0deg) rotateY(360deg);
    }
}

效果展示
在这里插入图片描述

晏虹计科非

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-09

文章目录前言一、登录页面.html.css二、注册页面.html.css三、相册.html.css前言HTML CSS JS个人相册的例子提示：以下是本篇文章正文内容，下面案例可供参考一、登录页面.html<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
复制链接

扫一扫