記錄一起走過(guò)的那些日子

• 問(wèn)：那些初見(jiàn)的印象

? ? 初見(jiàn)，一個(gè)很好的詞語(yǔ)，到現(xiàn)在已經(jīng)是105天了吧，異地戀有點(diǎn)辛苦，但是好在，我們沒(méi)有出現(xiàn)異地情侶會(huì)出現(xiàn)的哪種情感危機(jī)，比如，吵架、冷戰(zhàn)等等，兩個(gè)人都開(kāi)始工作，為我們的未來(lái)而努力，我的心事我可以找你訴說(shuō)，你的心是我也可以傾聽(tīng)，愿意陪我瘋，愿意陪我鬧，會(huì)無(wú)條件的謙讓我，除了我不聽(tīng)話和不乖這件事。

• 問(wèn)：那些浪漫的開(kāi)始

? ?我們相識(shí)是在于一場(chǎng)游戲，現(xiàn)在想起來(lái)，緣分真的妙不可言！

• 問(wèn)：那些銘記于心的大小事

? 銘記于心的事，對(duì)于我來(lái)說(shuō)，我為她做的第一件“傻事”就是為她手工熬了兩個(gè)大晚上針織了一個(gè)包包，期間膠水粘到了手，很疼！

• 問(wèn)：那些經(jīng)歷的曲折

? 這個(gè)嘛，到目前還沒(méi)有遇到，硬是要收的話，那應(yīng)該就是家里人可能有一些人會(huì)支持，但是有人可能會(huì)反對(duì)吧，畢竟那么優(yōu)秀的女孩子被我這個(gè)豬拱了！

• 問(wèn)：那些經(jīng)歷的幸福與快樂(lè)

這個(gè)問(wèn)題很難回答，因?yàn)轲I每一天都很幸?？鞓?lè)，這個(gè)不好分享，狗糧撒多了不好！

• 問(wèn)：哪些對(duì)未來(lái)的期許/計(jì)劃

計(jì)劃年后能夠到她的城市，然后一起努力，1130是她的生日，為她過(guò)每一年的生日，我喜歡煮飯，希望能把她養(yǎng)的白白胖胖的（這樣她父母才會(huì)放心把她交到我手上），然后賺夠老婆本，能在2026年這樣結(jié)婚，到時(shí)候回帖!

創(chuàng)意代碼表白

接下來(lái)，為她呈上我的第三份禮物：

登錄七夕愛(ài)情網(wǎng)站：由于只買了一天的服務(wù)器，所以沒(méi)辦法給大家詳細(xì)的演示服務(wù)器不便宜，大家諒解！能看到就好，代碼后面會(huì)奉上，有一些只是羅列了部分的的功能代碼，因?yàn)榭赡芴L(zhǎng)，最后會(huì)進(jìn)行壓縮，有需要的朋友可以私信，不忙的時(shí)候，會(huì)看到的，會(huì)回大家的。

我用的服務(wù)器用的是xshell,IP什么的都是買好的，所以大家如果要做靜態(tài)網(wǎng)頁(yè)的話，可能會(huì)簡(jiǎn)單一點(diǎn)，可能是我覺(jué)得畢竟第一次當(dāng)人家男朋友嘛，要做就要做到最好嘛！

• 進(jìn)入第一部分：記錄趣事的愛(ài)情話匣子

c點(diǎn)擊“記錄”按鈕，即可記錄當(dāng)前續(xù)寫的趣事，“保存”，當(dāng)完成記錄，點(diǎn)擊保存按鈕，即可保存寫的事，可以上傳到自己買的一天的服務(wù)器上面，不過(guò)就一天，所以就記錄了兩件小事，因?yàn)檫@一些事，我都時(shí)刻記著！都是最浪漫的事！

• ?進(jìn)入第二部分：戀愛(ài)紀(jì)念冊(cè)

?這里絕大多數(shù)都是用了a標(biāo)簽，大家可以自行去編寫，沒(méi)有什么難度！主要就是搭建網(wǎng)站而已，搭建網(wǎng)站我就不寫了，因?yàn)榻裉斓闹黧w不是搭建網(wǎng)站！

• 進(jìn)入第三部分：愛(ài)情相冊(cè)

整體部分，因?yàn)榻缑娌季执笮∽詈每吹木褪窃O(shè)置成三個(gè)相片冊(cè)，所以，后面還有很多，這里就不一一羅列出我們的愛(ài)情小秘密了，大家包含！嘿嘿！

?這個(gè)功能通過(guò)鼠標(biāo)，可以展示收縮照片冊(cè)的樣子，所以我很喜歡！

?展示我寫得情書，我家領(lǐng)導(dǎo)說(shuō)我寫的情書很好看，貌似那時(shí)候是通過(guò)一份手寫的情書俘獲芳心的！嘿嘿，所以大家不妨把自己不好意思說(shuō)的話，通過(guò)書信的方式寫出來(lái)吧，說(shuō)不定會(huì)有意想不到的效果哦，當(dāng)然，程序猿寫代碼也可以的，哈哈哈！

?最后，大家一起來(lái)看看我家領(lǐng)導(dǎo)吧，很優(yōu)秀的女孩子，我很喜歡她，希望看到這里的哥哥姐姐們，能夠給我們祝福，多一分祝福，我們就多一份信心！謝謝各位了！

當(dāng)然，女孩子嘛，還是買點(diǎn)實(shí)際的禮物比較好，畢竟浪漫歸浪漫，現(xiàn)實(shí)的禮物還是要有的：

給各位男同胞推薦一個(gè)好的禮物去向--花西子口紅套裝，可以選擇定制的，我就是選擇了定制的一款花西子口紅：

?我的第二份禮物是，因?yàn)轲I我家姑娘比較饞，分配到的公司分部能買到的東西比較少，所以寄了一箱零食大禮包，還是很實(shí)惠的，當(dāng)然，也很直男。

?好了，撒狗糧的時(shí)間已經(jīng)結(jié)束，接下來(lái)，奉上我們各個(gè)部分的代碼（有一些部分代碼太長(zhǎng)，只寫出關(guān)鍵的代碼關(guān)鍵代碼）

登錄界面（代碼）

<template>
    <div class="login_container">
        <!-- 登錄模塊盒子 -->
<div class="login-box">
<!-- 圖片盒子 -->
<div class="avatar_box">
    <img src="../assets/1234.png" alt="">
    <h3 class="text">云 </h3>
</div>
<!-- 登陸表單區(qū)域 -->
<el-form label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
    <!-- :model數(shù)據(jù)綁定對(duì)象，綁定到login from這個(gè)表單中,rules表單的驗(yàn)證規(guī)則對(duì)象 -->
    <!-- 用戶登錄 -->
  <el-form-item prop="username">
    <el-input  prefix-icon="el-icon-user-solid" v-model="loginForm.username" size="mini" ></el-input>
    <!-- v-model雙向綁定，綁定到用戶名 -->
  </el-form-item>
  <!-- 密碼 -->
  <el-form-item prop="password">
    <el-input  prefix-icon="el-icon-lock" v-model="loginForm.password" type="password" size="mini" ></el-input>
     <!-- v-model雙向綁定，綁定到用戶登錄密碼,type="password可以使得密碼隱藏"-->
  </el-form-item>
  <!-- 按鈕區(qū)域 -->
  <el-form-item class="btns">
    <el-button type="primary" @click="login" size="mini" ></el-button>
    <!-- 為登錄綁定一個(gè)單擊事件，名為login -->
    <el-button type="info" @click="resetLoginForm" size="mini"></el-button>
    <!-- click綁定單擊事件，名為resetloginfrom -->
  </el-form-item>
  </el-form>
    </div>
</div>
</template>

<script>
import {Login} from '../network/login'
export default {
  data () {
    return {
      // 登錄表單的數(shù)據(jù)綁定對(duì)象
      loginForm: {
        username: '',
        password: ''
      },
      // 表單的驗(yàn)證規(guī)則對(duì)象
      loginFormRules: {
        // 驗(yàn)證用戶名是否合法
        username: [
          { required: true, message: '請(qǐng)輸入登錄名稱', trigger: 'blur' },
          { min: 3, max: 10, message: '長(zhǎng)度在 3 到 10 個(gè)字符', trigger: 'blur' }
        // trigger便是失去焦點(diǎn)后出發(fā)這一次驗(yàn)證
        ],
        // 驗(yàn)證密碼是否合法
        password: [
          { required: true, message: '請(qǐng)輸入登錄密碼', trigger: 'blur' },
          { min: 3, max: 15, message: '長(zhǎng)度在 3 到 15 個(gè)字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 點(diǎn)擊重置按鈕，重置表單
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    },
    login () {
      this.$refs.loginFormRef.validate( valid => {
        if (!valid) {return this.$message.error('用戶名密碼不正確')}
      Login(this.loginForm).then( res => {
        console.log(res);
        if (res.code !== 0)
         {return this.$message.error('登錄失敗')}

        this.$message.success('登陸成功')
        window.sessionStorage.setItem('token', res.token)
        this.$router.push('/home')


      }).catch( error => {
        console.log(error);
      })

        // const { data: res } = await this..post('login', this.loginForm)
        // if (res.meta.status !== 200) return this.$message.error('登錄失敗')
        // this.$message.success('登陸成功')
        // // console.log(res)
        // window.sessionStorage.setItem('token', res.data.token)
        // this.$router.push('/home')
        // validate回調(diào)函數(shù)，完成登錄表單前的預(yù)校驗(yàn)
        // 將登陸成功以后的token,保存到客戶端的sessionstorage中
        // 項(xiàng)目中除了登陸之外的其他api接口，必須將token保存到客戶端
        // this.$router.push('/home)是通過(guò)編程式導(dǎo)航跳轉(zhuǎn)到后臺(tái)，路由地址為/home
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
    background-color: #2b4b6b;
    background-image: url(../assets/logo.png);
    height: 100%;
}
.login-box {
    width: 360px;
    height: 240px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%; //距離左側(cè)50%
    top: 50%; // 距離頂部505
    transform: translate(-50%, -50%); //橫軸上移動(dòng)50%，縱移動(dòng)50%
}
 .avatar_box {
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #eee;
        position: absolute;
        left: 50%;
        top:-40%;
        transform: translate(-50%);
        background-color: rgb(32, 181, 201);
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }

.login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
    .btns {
        display: flex;
        justify-content: flex-end;
    }
    .text {
      text-align: center;
      margin-top: 10px;
      font-size: 20px;
      font-family: 宋體;
    }
</style>

?紀(jì)念冊(cè)（代碼）

這個(gè)最關(guān)鍵的部分就是年月日時(shí)間的對(duì)齊編寫，所以，我們這里只羅列出這個(gè)關(guān)鍵部分的代碼：

<script type="text/javascript">
    function genNewDate() {
        //創(chuàng)建日期
        const date = new Date();//取當(dāng)前的系統(tǒng)日期時(shí)間
        const dateStr = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + "星期" + day() + date.getHours() + "時(shí)" + date.getMinutes() + "分" + date.getSeconds() + "秒";
        //拿到span對(duì)象，把日期字符串放到span中
        const dateTip = document.getElementById("dateTip");
        dateTip.innerHTML=dateStr;
    }
    //設(shè)置定時(shí)器
    window.setInterval("genNewDate()",1000);
    function day() {
        const date = new Date();
        switch (date.getDay()) {
            case 0: return "日";
            case 1: return "一";
            case 2: return "二";
            case 3: return "三";
            case 4: return "四";
            case 5: return "五";
            case 6: return "六";
        }
    }
</script>

相冊(cè)（代碼）

這個(gè)部分主要參考了另一個(gè)博主的作品，他寫的很好，謝謝你為我節(jié)省了很多的路，這里推薦給大家，我已經(jīng)關(guān)注了！雖然已經(jīng)深入研究嵌入式，但是覺(jué)得前端的太有趣了，只是自己已經(jīng)沒(méi)有經(jīng)歷多精修Java語(yǔ)言了。博主：王同學(xué)要努力? 地址鏈接：https://wcaicai.blog.csdn.net/?type=blog

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作人物介紹</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 開(kāi)始 -->
    <div class="card">
        <div class="photo">
            <img src="C:\Users\Administrator\Desktop\李寶\wangzhe.jpg">
        </div>
        <h1>情侶關(guān)系</h1>
        <h2>第一次組到王者CP</h2>
        <p>能和你一起在峽谷打打鬧鬧很開(kāi)心，我的莉?qū)殻∶刻旎厝プ钕矚g的就是這個(gè)休閑時(shí)間，能聽(tīng)到你聲音，就是我一天疲勞也沒(méi)有了！</p>
    </div>
    <div class="card">
        <div class="photo">
            <img src="C:\Users\Administrator\Desktop\李寶\12.jpg">
        </div>
        <h1>第一封情書</h1>
        <h2>2022年4月19日</h2>
        <p>4月19日，第一次給女孩子寫了一封情書，還是我喜歡的女孩子，所以寫得十分得認(rèn)真！</p>
    </div>
    <div class="card">
        <div class="photo">
            <img src="C:\Users\Administrator\Desktop\李寶\音樂(lè).jpg">
        </div>
        <h1>網(wǎng)易聽(tīng)歌</h1>
        <h2>目前已經(jīng)聽(tīng)歌294小時(shí)</h2>
        <p>每晚上最喜歡的就是和你一起聽(tīng)歌，我的耳機(jī)分你一半，我就是你的另一半！目前已經(jīng)330小時(shí)...</p>
    </div>
</body>

</html>

<style>
    :root {
    --background-color: #227dd8;
    --border-color: #7cabda;
    --text-color: #34495e;
    --color1: #EC3E27;
    --color2: #fd79a8;
    --color3: #0984e3;
    --color4: #00b894;
    --color5: #fdcb6e;
    --color6: #e056fd;
    --color7: #F97F51;
    --color8: #BDC581;
    --a_border_color: #86a3b3;
    --h2_border_color: #8ea2b8;
    --a_hover_background_color: #86a3b3;
    --font_color: #a82180;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}

.card {
    /* flex布局下元素不按比例縮放 */
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    width: 300px;
    height: 450px;
    overflow: hidden;
    margin: 20px;
    background-color: var(--border-color);
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* flex 子元素 縱向排列 */
    flex-direction: column;
    /* 增加個(gè)陰影 */
    box-shadow: 0 0 30px #2c2c2c;
    /* 同意給字體價(jià)格顏色 */
    color: var(--font_color)
}

.photo {
    position: absolute;
    /* 默認(rèn)為放大 */
    width: 100%;
    height: 100%;
    top: 0px;
    border-radius: 0%;
    overflow: hidden;
    transition: 0.5s;
}

.photo::before {
    /* 通過(guò)before增加漸變背景實(shí)現(xiàn)遮罩，讓文字默認(rèn)看起來(lái)清晰一些 */
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #333, transparent);
}
.card:hover .photo::before{
    /* 縮小時(shí)隱藏 */
    display: none;
}

.photo img {
    /* 圖片高寬均為100% */
    /* 然后按照cover縮放，裁切長(zhǎng)邊 */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card:hover .photo {
    /* 鼠標(biāo)移上變小 */
    width: 120px;
    height: 120px;
    top: 30px;
    border-radius: 50%;
    box-shadow: 0 0 20px #111;
}

h1 {
    position: absolute;
    top: 380px;
    transition: 0.5s;
}

.card:hover h1 {
    position: absolute;
    top: 170px;
}

h2 {
    margin-top: 220px;
    width: 80%;
    font-weight: normal;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--h2_border_color);
}

p {
    width: 90%;
    /* 段落縮進(jìn)2個(gè)字符大小 */
    text-indent: 2em;
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 30px;
}

a {
    color: var(--font_color);
    text-decoration: none;
    padding: 12px 36px;
    border: 1px solid var(--a_border_color);
    border-radius: 8px;
}

a:hover {
    color: #Fff;
    background-color: var(--a_hover_background_color);
}

</style>

最后，祝能看到這里的每一個(gè)人今天節(jié)日快樂(lè)，有情人終成眷屬，希望大家能長(zhǎng)長(zhǎng)久久！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-789743.html

到了這里，關(guān)于【七夕節(jié)】html+css+JavaScript+服務(wù)器 給女朋友的七夕過(guò)節(jié)網(wǎng)站的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！