使用css样式设计一个简单的html登陆界面

利用DIV+CSS布局来制作一个登录页面

login.html部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title></title><!--引入字体图标库--><link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/login.css"></head><body><div class="wrap"><h1>易购商城后台管理系统</h1><form action=""><div class="input-group">//输入框左边的类似图标的东西是一种字体//可在网上下载文件font-awesome-4.7.0后直接粘贴在项目目录下使用<i class="icon-user fa fa-user"></i><input type="text" name="" class="form-control" placeholder="请输入用户名"></div><div class="input-group"><i class="icon-user fa fa-lock"></i><input type="password" name="" class="form-control" placeholder="请输入密码"></div><div class="input-group btn-group"><button>登录</button></div></form><p>&copy;xx集团&nbsp;版权所有</p></div></body>
</html>

reset.css部分（重置部分）

*{margin:0;padding:0;
}
a{font-size: 12px;text-decoration: 0;color:#222;
}
a,
input,
button{outline: none;
}
ul,ol,li{list-style: none;
}
h1,h2,h3,h4,h5,h6{font-weight: 100;
}
img{display: block;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{//使界面主体在浏览器居中position: absolute;//绝对定位left: 50%;top: 50%;margin: -175px 0 0 -250px;padding: 20px;width: 500px;height: 350px;background: #333333;box-shadow:0 0 10px rgba(255,255,255,0.5);box-sizing: border-box;//padding和border被包含在定义的width和height之内
}
h1{height: 50px;font-size: 1.6em;text-align: center;border-bottom: 1px solid rgba(255,255,255,0.5);
}
.input-group{margin: 20px auto;height: 40px;width: 300px;border: 1px solid rgba(0,0,0,0.2);
}
i{float: left;//左浮width: 40px;height: 40px;text-align: center;line-height: 40px !important;background: rgb(22,160,93);color: #fff;font-size: 22px !important;}
.form-control{float: left;padding: 0 10px;height: 40px;border: 0;width: 260px;font-size: 18px;box-sizing: border-box;
}
.btn-group{border: 0;margin-top: 40px;
}
button{display: block;width: 100%;height: 40px;font-size: 1.2em;letter-spacing: 10px;border: 1px solid rgb(22,160,93);color: rgb(22,160,93);background: #fff;cursor: pointer;
}
button:hover{//为按钮元素设置鼠标悬浮的动态效果color: #fff;background: rgb(22,160,93);
}
p{font-size: 12px;text-align: center;color: #888;
}

设计结果在浏览器上的效果：

使用css样式设计一个简单的html登陆界面相关推荐

初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap
自己也刚刚开始接触框架,在学习了bootstrap框架过后,练习写了一个简单的主界面,主界面的图如下: 这个页面主要用的bootstrap的栅格系统进行整体布局,网页效果简约大方,最重要的是比较简单吧 ...
用Android Studio设计一个简单个性的登录界面
一.用到的组件: LinearLaout.TableLayout.FrameLayout.RelativeLout 二.效果图展示: 三.步骤及过程: 1.首先新建一个Project,并在app -& ...
一个简单的密码登陆界面。C语言
老样子,直接上代码: #include<stdio.h> #include<string.h> int main() {int land();if (land() == 0){ ...
一个简单的用户登录界面
今天我们学习了如何实现一个简单的用户登陆界面,具体要用到两个jsp和一个servlet,具体操作如下: 首先创建一个用户登录界面,inputview.jsp,其源代码如下所示: <!DOCTYP ...
设计一个简单的购物页面（html+css+php）
水平有限,精力有限,很多东西写得可能不那么详细,有不懂可以留言提问,懂的尽量解答首先讲一下,购物页面肯定会涉及到数据库部分的,我这篇文章数据库方面不会详细讲,就简单给个思路.购物需要用到cookie ...
bootstrap思想总结_bootstrap学习心得总结-css样式设计分享
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建 ...
设计网页字体css,CSS样式设计网页字体与用户体验
CSS样式设计网页字体与用户体验互联网发布时间:2009-04-02 19:36:06 作者:佚名我要评论网页制作Webjx文章简介:在设计网页时,没有比页面的外观更重要的了.所以 ...
HTML：给自己设计一个简单的专属网页音乐播放器
Hello,大家好,我是wangzirui32,今天我们来学习如何给自己设计一个简单的网页音乐播放器. 开始学习吧! 学习目录 1. 项目架构 2. player.html 编写 3. style.c ...
HTML5 混合APP开发学习笔记（三）——CSS样式设计
CSS样式设计 CSS高级特性继承性书写CSS样式时,子标签会自动继承父标签的某些样式,恰当地使用继承这个特性可以简化代码,降低CSS样式的复杂性以下CSS样式不能被继承: 边框属性边距和填充 ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...