顶部距离顶部的距离。
Step3 添加圆角边框
我们还可以为div添加边框,将main.css中input_f的选择器改为:
`#input_f {
text-align: center;
height: 40vh;
margin: 0 auto;
margin-top: 25vh;
width: 30vw;
border: 2px solid darkslategray;
border-radius: 30px;
}`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
其中,border为边框设置,请参考点我跳转。
Step4 添加标题
在index.html中id为um的input元素的上面添加:
`
Login`
* 1
其中,font-size是设置文字大小。
至此,我们可以拥有一个和图片一样的登录页面:
2.3.4 美化组件
BUTTON
默认的button按钮样式很不美观,笔者在此,引用mcya的博客的css样式,在main.css中添加:
`#bu {
margin-top: 5px;
width: 15vw;
}
/*以下来自https://blog.csdn/genius_yym/article/details/79670326 的博客,如有侵权,请联系删除*/
button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: 5px 2px 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #00adee, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#00678e');
}
button:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#00678e), to(#0095cc));
background: -moz-linear-gradient(top, #00678e, #0095cc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00678e', endColorstr='#0095cc');
}
/*结束*/`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
* 18
* 19
* 20
* 21
* 22
* 23
* 24
* 25
* 26
* 27
* 28
* 29
* 30
* 31
* 32
* 33
* 34
* 35
其中,如有属性名不熟悉,可参考点我跳转菜鸟教程,button:hover为鼠标悬浮在button的元素上时,button元素的样式,xxx{}为元素选择器,选择全部button元素。
INPUT
把main.css中除了button(刚刚上面给的代码)都替换成:
`#input_f {
text-align: center;
height: 40vh;
margin: 0 auto;
margin-top: 25vh;
width: 30vw;
border: 2px solid darkslategray;
border-radius: 30px;
background-color: rgb(170, 169, 169);
}
input {
outline-style: none;
border: 1px solid #ccc;
border-radius: 3px;
border: 0px;
width: 20vw;
height: 3vw;
margin-top: 5px;
}
#um {
margin-top: 10px;
}
input:focus {/*发光*/
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
* 18
* 19
* 20
* 21
* 22
* 23
* 24
* 25
* 26
* 27
* 28
* 29
* 30
* 31
2.4回顾
至此,我们页面的渲染部分结束,我们使用了html+css的方式渲染页面,我们可以获得和下图一样的效果:
2.5 JavaScript部分
2.5.1 创建主js文件
在/www/js文件夹下创建main.js
然后在index.html中里面添加:
``
* 1
2.5.2 提交表单(通过POST方法)
给在index.html的button添加onclick属性,绑定点击函数:
`提交`
* 1
有关POST问题看这里。
2.5.2.1 纯js方式
此处部分代码引用于另外一个博客
`/*此处代码为引用https://blog.csdn/Lianxingjie_1024/article/details/80238139的博客*/
function post(URL, PARAMS)
{
var temp = document.createElement("form");
temp.action = URL;
temp.method = "post";
temp.style.display = "none";
for (var x in PARAMS)
{
var opt = document.createElement("textarea");
opt.name = x;
opt.value = PARAMS[x];
// alert(opt.name)
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
return temp;
}
//代码引用结束
function submit(){
var um=document.getElementById("um").value;//根据 Id获得对象中的值
var pd=document.getElementById("pd").value;//根据 Id获得对象中的值
var rt=post('接收文件', {password:pd,username:um});
alert("提交成功,"+rt);
}`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
* 18
* 19
* 20
* 21
* 22
* 23
* 24
* 25
* 26
其中,有关post问题参考原博客,有关取值问题参考这里
2.5.2.2 JQ方法
先于index.html中的里面添加:
``
* 1
* 2
* 3
* 4
来引入jq,然后在main.js中添加
`function submit(){
var um=document.getElementById("um").value;
var pd=document.getElementById("pd").value;
$.post("接收文件",{
username:um,
password:pd
},
function(data,status){
alert("数据: n" + data + "n状态: " + status);
});
}`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
有关ajax post参考这里,其中,本次教程暂无接收php(教程已补点我跳转)
2.5.2.3 表单
或者,我们可以把整个作为一个表单提交,在index.html中修改input_f:
`
提交`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
这样也可以达到一样的效果。
更多推荐
用html css js制作登录页面,#3使用html+css+js制作网页 制作登录网页
发布评论