登录界面html源代码加css样式,用html和css设计一个登录界面

　　！DOCTYPE html html lang= en head meta charset= utf-8 title/title！-引入字体图标库-link rel=样式表 type= text/CSS href= font-awesome-4。7 .0/CSS/font-牛逼。量滴CSS link rel=样式表 href= CSS/reset。CSS link rel=样式表 href= CSS/log in。CSS /head body div class= wrap h1易购商城后台管理系统/h1 form action= div class= input-group //输入框左边的类似图标的东西是一种字体//可在网上下载文件字体-牛逼-4.7.0后直接粘贴在项目目录下使用I class= icon-user fa fa-user /I input type= text name= form-control placeholder=请输入用户名/div div class= input-group I class= icon-user fa fa-lock /I input type= password name= form-control placeholder=请输入密码/div div class=" input-group BTN-group "按钮登录/button/div/form pcopy；xx集团不间断空格版权所有/p /div /body/htmlreset.css部分（重置部分)

　　*{边距：0;填充：0;} a { font-size:12px；文本装饰：0;颜色：# 222;}a、输入、按钮{大纲：无；}ul，ol，li{列表式：无；}h1、h2、h3、h4、h5、h6 { font-weight:100；}img{显示器：阻止边框：0;}关于重置样式文件：

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

　　y{背景：rgba(0，0，0，0.8)；}body{ //为网页设置背景图片背景-图像：url(./img/xx。jpg)；}.换行{ //使界面主体在浏览器居中位置：绝对；//绝对定位左：50%;top:50%；边距：-175 px 0 0-250 px；填充：20px宽度：500像素高度：350像素背景：# 333333;盒影：0 0 10px rgba(255，255，255，0.5)；框大小：边框-框；//填充和边界被包含在定义的宽度和高度之内}h1{高度：50px字号：1.6毫米文本对齐：居中；border-bottom: 1px solid rgba(255，255，255，0.5)；}.输入组{ margin:20px auto；高度：40px宽度：300像素边框：1px实心rgba(0，0，0，0.2)；} I { float:left；//左浮宽度：40px高度：40px文本对齐：居中；行高：40px！重要；背景：rgb(22，160，93)；颜色：# fff字体大小：22px！重要；}.表单控件{ float:左；填充：0 10px高度：40px边框：0;宽度：260像素字体大小：18px框大小：边框-框；}.BTN组{ border:0；边距-顶部：40px}按钮{显示：块；宽度：100%;高度：40px字号：1.2em字母间距：10px边框：1px纯色rgb(22，160，93)；颜色：rgb(22，160，93)；背景：# fff光标：指针；}按钮：悬停{ //为按钮元素设置鼠标悬浮的动态效果颜色：# fff背景：rgb(22，160，93)；} p { font-size:12px；文本对齐：居中；颜色：# 888;}设计结果在浏览器上的效果：

　　到此这篇关于使用钢性铸铁样式设计一个简单的超文本标记语言登陆界面的实现的文章就介绍到这了，更多相关css html登陆界面内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读