首页天道酬勤html用表单做登录页面,html写一个登录页面

html用表单做登录页面,html写一个登录页面

张世龙 05-03 20:56 107次浏览

使用DIV CSS布局创建登录页面的login.html部分。 doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title/title! -引入字体库--link rel=' style sheet ' type=' text/CSS ' href=' font-awesome-4.7.0/CSS/font-awesome headbodydivclass='wrap'H1购物中心后台管理系统/H1formaction='输入框左侧的图标类似于字体//在网上下载文件font-awesome-4.7.0并直接粘贴到项目目录中I class=' icon-user fa fa-user '/iinputtype=' text ' name 请输入divdivclass=' input-group ' iclass=' inputtype=' password ' name=' ' class=' form-control ' placeholderd 所有版权/p /div /body/html reset.css部分*{margin:0; padding:0; }a{font-size: 12px; 文本修饰: 0; color:#222; }a,input,button{outline: none; }ul,ol,li{list-style: none; (H1、h2、h3、h4、h5、H6 )字体权重3360100; } img { display :块; border: 0; } 关于重置样式文件:

因为不同的浏览器对html标签的渲染有各自不同,即使开发者不对html页面写一行css代码,打开的页面也总会存在样式,但不同的浏览器的默认样式略有不同,这在一定程度上给开发者创造了麻烦,所以一般在开始写css代码的之前总是会先重置样式表,使得所有浏览器中html元素的样式统一,前端工程师通过自定义样式文件进行样式的统一,从而提高了前端界面的兼容性。

login.css第y节{ background : rgba (0,0,0,0.8 ); } body//网页背景图像background-image : URL (/img/xx.jpg ); }.wrap{ //将界面主体置于浏览器中央的位置: absolute; //绝对位置left: 50%; top: 50%; margin: -175px 0 0 -250px; padding: 20px; width: 500px; height: 350px; 后台: # 333333; box-shadow:0010pxrgba(255、255、255和0.5 ); 盒尺寸: border-box; //padding和border包含在定义的width和height中(h1 ) height:50px; font-size: 1.6em; 文本对齐3360中心; 边框边框33601 pxsolidrgba (255、255、255、0.5 ); }.input-group { margin :20 px auto; 高: 40px; width: 300px; border:1pxsolidrgba(0、0、0、0.2 ); }i{float: left; //左浮动width: 40px; 高: 40px; 文本对齐3360中心; line-height: 40px! 导入; 后台: RGB (22,160,93 ); color: #fff; font-size: 22px! 导入; }.form-control{float: left; padding: 0 10px; 高: 40px; border: 0; width: 260px; font-size: 18px; 盒尺寸: border-box; }.btn-group{border: 0; margin-top: 40px; }button{display: block; width: 100%; 高: 40px; font-size: 1.2em; letter-spacing: 10px; border :1 pxsolidrgb (22,160,93 ); color : RGB (22,160,93; 后台: # FFf; cursor: pointer; }为}button:hover{ //按钮元素设置鼠标悬停动态效果color: #fff; 后台: RGB (22,160,93 ); }p{font-size: 12px; 文本对齐3360中心; color: #888; } 设计结果在浏览器上的效果

html精美登录界面源码,小程序源代码