尝试从0开始写一个网页（个人主页篇）
先从《尝试从0开始写一个网页》中把首页的部分代码复制粘贴过来
然后配上ps编写一个用户登录界面：
<div id="login">
<div id="login_input">
用户:<input type="text" name="name" size="25px"><br>
密码:<input type="password" name="password" size="25px"><br>
<div id="login_submit">
<img src="bgbox/login_button.png" id="login_button" @click="submit()">
</div>
<div id="register">
<img src="bgbox/register.png" id="register_button">
</div>
</div>
</div>
展示： 由于是将图片当作提交按键，因此要用网址导入Vue模块加一个Vue.js赋予图片一个点击模块：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var login = new Vue({
el:"#login",
methods:{
submit(){
alert("欢迎来到“我”的主页")
}
}
})
</script>
点击登录：
大致界面做成后给登录和注册按键加点样式：
#login_button{
cursor:pointer;
}
#register_button{
cursor:pointer;
}
<div id="login_submit">
<img src="bgbox/login_button.png" id="login_button" @click="submit()" onmousedown="this.style.backgroundImage=url(bgbox/login_button_down.png)" onmouseup="this.style.backgroundImage=url(bgbox/login_button.png)">
</div>
<div id="register">
<img src="bgbox/register.png" id="register_button" onmousedown="this.style.backgroundImage=url(bgbox/register_button_down.png)" onmouseup="this.style.backgroundImage=url(bgbox/register.png)">
</div>
让按键在按下去和弹上来之间有比较大的变化，更像是一个按键组件
试做一个表单认证的登陆组件：
表单呈现：
用户:<input type="text" name="name" size="25px" v-model="username" placeholder="请输入用户名"><br>
密码:<input type="password" name="password" size="25px" v-model="userword" placeholder="请输入不小于6位的密码"><br>
方法：
methods:{
submit(){
if(this.username == ){
alert("请输入用户名")
}else{
if(this.userword.length < 6){
alert("密码过短")
}else{
alert("登陆成功")
}
}
},
}
展示： 不输入用户名，输入密码：
输入用户名不输入密码或输入不到6位密码：
输入用户名并输入6位以上密码
再设置一个跳转页面：
submit(){
if(this.username == ){
alert("请输入用户名")
}else{
if(this.userword.length < 6){
alert("密码过短")
}else{
alert("登陆成功")
window.location.href=user.html
}
}
},
新的user页面：
<body background="bgbox/bgphoto.png">
<div id="title">
<div id="home" class="home">
<li><a href="welcome.html">Home</a></li>
</div>
<div id="myself" class="myself">
<li><a href="main.html">个人主页</a></li>
</div>
<div id="feedback" class="feedback">
<li><a href="feedback.html">网页反馈</a></li>
</div>
<div id="wait" class="wait">
<li><a href="wait.html">暂时待定</a></li>
</div>
</div>
<div id="identity">
<h1>Welcome back</h1>
</div>
展示：