web页面

63 阅读 0 评论 42 点赞

我是靠谱客的博主幽默手机，最近开发中收集的这篇文章主要介绍web页面，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

也算是学到现在做的比较完整的一个web界面
login.html

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <img src="hs2.png" alt="">
        <div class="panel">
            <div class="content login">
                <div class="switch">
                    <span id="login" class="active">Login</span>
                    <span>/</span>
                    <span id="signup">Sign Up</span>
                </div>
                <form action="">
                    <div id='email' class="input" placeholder='Email'><input type="text"></div>
                    <div class="input" placeholder='用户名'><input type="text"></div>
                    <div class="input" placeholder='用户密码'><input type="password"></div>
                    <div id='repeat' class="input" placeholder='Repeat'><input type="password"></div>
                    <span>Forget?</span>
                    <a href="E:/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/%E7%BB%83%E4%B9%A0/web%E5%AE%9E%E9%AA%8C.html"
                        target="_blank">LOGIN</a>
                </form>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="dl.js"></script>
<script src="password.js"></script>

</html>

*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:rgb(250, 235, 245); 
}

.container{
    position: relative;
    width: 70rem;
}

.container img{
    width:70rem;
}

.switch span{
    color: rgb(92, 85, 85);
    font-size: 1.4rem;
    cursor: pointer;
}

.switch span.active{
    color: rgb(102, 52, 241);
}

.panel{
    width: 30%;
    margin: 10rem 0 0;
    position: absolute;
    right: 0;
    top: 0;

    display: flex;
    justify-content: center;
}

form{
    width: 12rem;
    margin: 3rem 0 0;
}

form .input{
    position: relative;
    opacity: 1;
    height: 2rem;
    width: 100%;
    margin: 2rem  0; 
    transition: .4s;
}

.input input{
    outline: none;
    width: 100%;
    border: none;
    border-bottom: .1rem solid rgb(181,154,254);
}

.input::after{
    content: attr(placeholder);
    position: absolute;
    left: 0;
    top: -20%;
    font-size: 1.3rem;
    color: rgb(130, 100, 212);
    transition: .3s;
}

.input.focus::after{
    top:-70%;
    font-size: 1rem;
}

.login .input#email,
.login .input#repeat{
    margin: 0;
    height: 0;
    opacity: 0;
}

form span{
    display: block;
    color:rgb(109, 88, 165);
    font-size: .8rem;
    cursor: pointer;
}

dl.js

/*
 * @Author: your name
 * @Date: 2020-12-26 11:10:15
 * @LastEditTime: 2020-12-26 11:10:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: undefinede:前端学习练习dl.js
 */
$('#login').click(function () {
    $('.switch span').removeClass('active');
    $(this).addClass('active');

    $(this).parents('.content').removeClass('signup');
    $(this).parents('.content').addClass('login');

    $('form button').text('LOGIN');
})
$('#signup').click(function () {
    $('.switch span').removeClass('active');
    $(this).addClass('active');

    $(this).parents('.content').removeClass('login');
    $(this).parents('.content').addClass('signup');

    $('form button').text('SIGNUP');
})

$('.input input').on('focus', function () {
    $(this).parent().addClass('focus');
})

$('.input input').on('blur', function () {
    if ($(this).val() === '')
        $(this).parents().removeClass('focus');
})

登录界面就写好啦！

还可以加个验证用户名和密码的js，不过我没改好

也放在下面了

password.js

function fnLogin() {
    var oEmail = document.getElementById("email")
    var oUserame = document.getElementById("userame")
    var oPassword = document.getElementById("password")
    var oError = document.getElementById("error_box")
    var isError = true;
    if (oUsername.value.length > 20 || oUsername.value.length < 6) {
        oError.innerHTML = "用户名请输入6-20位字符";
        isError = false;
        return;
    } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "首字符必须为字母";
        return;
    } else for (var i = 0; i < oUname.value.charCodeAt(i); i++) {
        if ((oUname.value.charCodeAt(i) < 48) || (oUname.value.charCodeAt(i) > 57) && (oUname.value.charCodeAt(i) < 97) || (oUname.value.charCodeAt(i) > 122)) {
            oError.innerHTML = "必须为字母跟数字组成";
            return;
        }
    }

    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "密码请输入6-20位字符"
        isError = false;
        return;
    }
    window.alert("登录成功")
}

zhuye.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web实验</title>
    <link rel="stylesheet" href="web.css">
</head>

<body>
    <div>
        <div id="pink">
            <h1>
                <br>网络一线牵，珍惜这段缘
            </h1>
            <div class="gray">2020-12-26 17:43:03 来源: <a href="#">中国婚恋网</a>
                <input type="text" value="请输入查询条件......" class="search"> <button class="btn">搜索</button>
            </div>
            <h4 align="center"> 我们的故事从这里开始......</h4>
            <table width="600" align="center">
                <!-- 第一行 -->
                <tr>
                    <td>性别：</td>
                    <td>
                        <!-- type="radio"定义单选按钮 -->
                        <!-- label 标签用来增加用户体验 -->
                        <input type="radio" name="sex" id="nan"> <label for="nan"><img src="男.jpg" width="15"> 男</label>
                        <input type="radio" name="sex" id="nv"> <label for="nv"><img src="女.jpg" width="15"> 女</label>
                    </td>
                </tr>
                <!-- 第二行 -->
                <tr>
                    <td>生日：</td>
                    <td>
                        <select>
                            <option>--请选择年份--</option>
                            <option>1995</option>
                            <option>1996</option>
                            <option>1997</option>
                            <option>1998</option>
                            <option>1998</option>
                            <option>1999</option>
                            <option>2000</option>
                            <option>...</option>
                        </select>
                        <select>
                            <option>--请选择月份--</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                        </select>
                        <select>
                            <option>--请选择日--</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                            <option>...</option>
                        </select>
                    </td>
                </tr>
                <!-- 第三行 -->
                <tr>
                    <td>所在地区</td>
                    <!-- text定义单行的输入字段，用户可在其中输入文本，默认宽度是20个字符 -->
                    <td><input type="text" value="安徽"></td>
                </tr>
                <!-- 第四行 -->
                <tr>
                    <td>婚姻状况：</td>
                    <td>
                        <!-- checked="checked"默认选中 -->
                        <input type="radio" name="merry" id="yihun"> <label for="yihun">已婚 </label>
                        <input type="radio" name="merry" id="weihun" checked="checked"> <label for="weihun">未婚 </label>
                        <input type="radio" name="merry" id="sangou"> <label for="sangou">丧偶 </label>
                    </td>
                </tr>
                <!-- 第五行 -->
                <tr>
                    <td>学历：</td>
                    <td><input type="text" value="安徽理工大学"></td>
                </tr>
                <!-- 第六行 -->
                <tr>
                    <td>喜欢类型:</td>
                    <td>
                        <input type="checkbox" name="love">貌美的
                        <input type="checkbox" name="love">很美的
                        <input type="checkbox" name="love">非常美
                        <input type="checkbox" name="love">特别美
                        <input type="checkbox" name="love" checked="checked">是人类
                    </td>
                </tr>
                <!-- 第七行 -->
                <tr>
                    <td>个人介绍:</td>
                    <td>
                        <!-- textarea  标签是用来定义多行文本输入的控件 -->
                        <textarea>个人简介</textarea>
                    </td>
                </tr>
                <!-- 第八行 -->
                <tr>
                    <td></td>
                    <td>
                        <!-- 定义提交按钮 -->
                        <input type="submit" value="免费注册">
                    </td>
                </tr>
                <!-- 第九行 -->
                <tr>
                    <td></td>
                    <td>
                        <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
                    </td>
                </tr>
                <!-- 第十行 -->
                <tr>
                    <td></td>
                    <td>
                        <!-- <a>标签用于定义超链接，作用是从一个页面链接到另外一个页面 
                    href用于指定连接目标的url地址，（必须属性）当为标签应用href属性时，它就具有超链接的功能-->
                        <a href="#">我是会员，立即登录</a>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <h5>我承诺</h5>
                        <!-- ul标签表示HTML页面中项目的无序列表，一般会以项目符号呈现在列表项，而列表项使用li标签定义 -->
                        <ul>
                            <li>母胎solo</li>
                            <li>认真负责</li>
                            <li>真诚择偶</li>
                        </ul>
                    </td>
            </table>
            <p class="footer">资料来源：中国婚恋网 责任编辑 ：胡图图_NO5631</p>
            <div id="bgm">
            </div>
        </div id="pink">
        <div id="bgm">
        </div>
    </div>

</body>

</html>

zhuye.css

#pink {
    width: 1400px;
    height: 800px;
    background-image: url(hs4.png);
    /* background-color:transparent; 透明的 清澈的 */
    /*background-color: rgb(218, 237, 241);*/
    background-position:center;
}
#bgm {
    background-image: url(hs2.png);
}
body {
    
    font: 16px/28px 'Microsoft YaHei';
    background-clip:content-box;
}

h1 {
    /* 文字 不加粗 */
    font-weight: 400;
    /* 让h1里的文字水平居中对齐 */
    text-align: center;
}

.gray {
    color: #034174;
    font-size: 12px;
    text-align: center;
}

a {
    /* 取消下划线 */
    text-decoration: none;
}

.search {
    color: #666;
    width: 170px;
}

.btn {
    /* 加粗 */
    font-weight: 700;
}

p {
    /* 首行缩进2个字的距离 */
    text-indent: 2em;
}

.pic {
    /* 想要图片居中对齐，则是让他的父亲p标签添加水平居中的代码 */
    text-align: center;
}

.footer {
    color: #0e0101;
    font-size: 12px;
}