web頁面

你不困我困發表於2020-12-28
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>

login.css

*{
    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;
}

相關文章