Web前端之登录表单

最新推荐文章于 2023-04-05 21:25:41 发布

程序员班长

最新推荐文章于 2023-04-05 21:25:41 发布

阅读量894

点赞数 2

分类专栏： Web前端文章标签： form

本文链接：https://blog.csdn.net/KK_2018/article/details/103391599

版权

Web前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

仿照书上的例子写的

一、HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆表单</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<form>
    <div class="border-radius"></div>
    <input type="text" name="name" placeholder="用户名"><br>
    <input type="password" name="password" placeholder="密码"><br>
    <input type="submit"  name="submit" value="登陆" class="btn">
</form>
</body>
</html>

二、CSS

body{
    /*设置背景图片 不平铺 水平居中 垂直居中 固定不动*/
    background: url("../images/1.png") no-repeat center center fixed;
    /*保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。*/
    background-size: cover;
    padding-top: 20px;
}

form{
    width: 343px;
    height: 500px;
    margin: 0 auto;
    padding: 30px;
    /*边框宽度为1 直线 黑色透明度为20%*/
    border: 1px solid rgba(0,0,0,.2);
    /*盒阴影：水平和垂直偏移量都为0 阴影模糊半径13px 阴影扩展半径3px 黑色透明度50%*/
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    /*添加圆角边框*/
    border-radius: 5px;
    overflow: hidden;
}
.border-radius{
    width: 200px;
    height: 200px;
    margin: 40px auto;
    border: 5px solid rgba(255,255,255,.4);
    border-radius: 200px;
    background: url("../images/2.jpg") no-repeat  center center scroll;/*如果将scroll改为fixed，图片不可见*/
}
input{
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 18px;
    width: 276px;
    height: 48px;
    /*box-sizing: border-box;*/
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 4px;
    display: block;/*使得输入框之间有间隙*/
    color: #FFF;
    padding-left: 45px;
    padding-right: 20px;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.4) no-repeat 16px 16px;
}
/*设置 当光标放到type=submit上时 为一只小手*/
input[type=submit]{
    cursor: pointer;
}
::-webkit-input-placeholder{
    color: #FFFFFF;
}
/*当该input元素获得焦点时，设置背景颜色及盒阴影*/
input:focus{
    background-color: rgba(0,0,0,.2);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden;
}
.btn{
    width: 138px;
    height: 44px;
    background: #00B0DC;
    margin: 0 auto;
    padding: 10.5px 21px;
    border-radius: 6px;
    color: #e1e1e1;
    /*text-align: center;*/
}
*当鼠标悬浮在该元素时，设置边框、文字阴影*/
.btn:hover{
    border: 1px solid #253737;
    /*水平大小(必) 垂直大小(必) 模糊的距离 颜色，只有这四种属性值 */
    text-shadow: 0 1px 0 #333333;
}
/*当该元素激活(在鼠标点击与释放之间发生的事件)时，设置外边距、文字阴影、边框、背景颜色
及文字颜色*/
.btn:active{
    margin-top: 1px;
    text-shadow: 0 -1px 0 #333333;
    border: 1px solid #253737;
    background: #00B0DC;
    color: #FFFFFF;
}

结果图

程序员班长

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端之登录表单

仿照书上的例子写的一、HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登陆表单</title> <link rel="stylesheet" href="css/style.css" ty...
复制链接

扫一扫