**第一步：**找一个图片加载为背景：

 <style type="text/css">body {background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);background-repeat: no-repeat;background-size: 100% 1000px;}

我设置的是一个渐变色的背景然后设置的不平铺，占据屏幕的百分之百大小，设置了行高,不设置行高的话渐变色显示不出来。
**第二步：**设置一个div框架在页面中间用于转登录中的账号和密码

#login-box{width: 30%;height: auto;border: 1px solid #000;margin:0 auto; margin-top: 8%;text-align: center;background: #00000090;padding: 20px 50px;color: #fff;}

设置高度自适应，用margin：0 auto；设置了居中，前间距为8%，text-align：center设置了内容居中
设置了一个div背景 background: #00000090;透明度为百分之九十；内容内间距为上下20px，左右50px;
字体颜色接近灰色;
第三步添加H标签，显示标题

#login-box .form .item{margin-top: 15px;
}
#login-box .form .item .icon{display: inline-block;width: 20px;height: 15px;background: url(./user.jpg);background-repeat: no-repeat;
}
#login-box .form .item input{width: 180px;font-size: 18px;border: 0;border-bottom: 2px solid #000;padding: 5px 10px;background:#ffffff00;color: #fff;
}
#login-box button{margin-top:15px;width:220px;height:30px;font-size: 20px;font-weight: 700;color: #fff;background-image: linear-gradient(to right,#db3125 0%,#578bc3 100%);border:0;border-radius: 15px;font-family:"微软雅黑";
}

给按钮也设置一个样式可以更好看最后看成品:

附上源码:

注册界面

}
#login-box{
width: 30%;
height: auto;
border: 1px solid #000;
margin:0 auto;
margin-top: 8%;
text-align: center;
background: #00000090;
padding: 20px 50px;
color: #fff;

}
#login-box .form .item{
margin-top: 15px;
}
#login-box .form .item .icon{
display: inline-block;
width: 20px;
height: 15px;
background: url(./user.jpg);
background-repeat: no-repeat;
}
#login-box .form .item input{
width: 180px;
font-size: 18px;
border: 0;
border-bottom: 2px solid #000;
padding: 5px 10px;
background:#ffffff00;
color: #fff;
}
#login-box button{
margin-top:15px;
width:220px;
height:30px;
font-size: 20px;
font-weight: 700;
color: #fff;
background-image: linear-gradient(to right,#db3125 0%,#578bc3 100%);
border:0;
border-radius: 15px;
font-family:“微软雅黑”;
}

培养前端小姐姐的八个小技巧
写在开头在工作中,当你担任前端专业线负责人,或者小技术leader时,就要承担培养人的责任,这也是为身边的小伙伴负责本文并不只针对前端小姐姐,也针对前端小哥哥由于本人精力有限,平时微信上问我:x ...
html前端小知识：制作简单的纯文字图标按钮
今天分享下"html前端小知识:制作简单的纯文字图标按钮"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark ...
每天10个前端小知识（1day）
一.var和let的区别 1.var是函数作用域,let是块级作用域. 在函数中声明了var,整个函数内都是有效的,比如说在for循环内定义的一个var变量,实际上其在for循环以外也是可以访问的. ...
两个月入门深度学习，全靠动手实践！一位前端小哥的经验分享
两个月入门深度学习,全靠动手实践!一位前端小哥的经验分享在当前社会,技术日新月异,一个全栈工程师不及时学习新知识,掌握AI技能,再过两年就算不上"全栈"了. 产品发烧友.前端 ...
付费社群聊天小程序V1.4.5+前端
简介: 付费社群聊天小程序V1.4.5+前端备注:不用重新上传小程序1,修复购买会员分享分佣BUG社群小程序,通过微信群裂变,社群营销,知识付费以及社群电商可实现粉丝营销闭环,玩转社群运营.一.自 ...
web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:小程序界面与逻辑项目实训",喜欢Web前端的小伙伴,一起看看吧! 主要内容数据绑定渲染界面层数据渲染事件处 ...
微信小程序开发语言和“前端三件套”的异同点
HTML与WXML:两者差异比较大,如果之前没有接触过Android开发,可能会觉得有些头疼.事实上,WXML更像是Android开发中的界面XML描述文件,适合于程序界面的构建:而HTML则倾向于文 ...
零基础的小明要如何成为前端工程师？
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 前言前端的历史,有点意思,由@胡立分享. 正文从这开始-- 如果你是个毫无基础又想要转岗成前端工 ...
前端小demo_day02_聚光灯(CSS)实现
前端小demo_day02_聚光灯(CSS)实现写在前面前端练习的第三天,今天实现了一个聚光灯的效果,看到这个效果的第一眼的时候,就感觉会用到我们第一天学习到的一个新属性clip-path ,一起 ...

小白牛必定掌握的前端小知识

登录

登录

小白牛必定掌握的前端小知识相关推荐

最新文章

热门文章

小白牛必定掌握的前端小知识

登 录

登 录

小白牛必定掌握的前端小知识相关推荐

最新文章

热门文章

登录

登录