首先来张完工的效果图。

一、html文件如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>登录界面</title>

        <link rel="stylesheet" type="text/css" href="css/login.css"/>

    </head>

    <body>

        <div class="content">

            <div class="panel">

                <div class="group">

                    <ul>

                        <li><label>账号</label></li>

                        <li><input type="text" placeholder=" 请输入账号" /></li>

                    </ul>

                    <ul>

                        <li><label>密码</label></li>

                        <li><input type="password" placeholder=" 请输入密码" /></li>

                    </ul>

                </div>

                <div class="login">

                    <button type="button">登录</button>

                </div>

            </div>

            <div class="register">

                <button type="button">注册</button>

                <button type="button">找回密码</button>

            </div>

        </div>

    </body>

</html>

二、对应的login.css文件如下，需要将CSS文件放到对应的CSS文件夹中:

*{

    margin:0 auto;

    padding:;

}

/*添加一个浅灰色背景*/

body{

    background-color:#eee;

}

.content{

    /*border:1px solid red;*/

    width:300px;

    margin-top:50px;

}

.content .panel{

    border:1px solid #ccc;

    border-radius:5px;

    height:220px;

    background-color:#fff;

}

.content .panel .group{

    margin:30px 10px 10px 20px;

}

.content .panel .group ul{

    list-style: none;

    margin-top:15px;

}

.content .panel .group ul li{

    margin-top:2px;

}

.content .panel .group ul li input{

    line-height:22px;

    width:250px;

    font-size: 14px;

    font-family: "微软雅黑","宋体";

}

.content .panel .group ul li label{

    font-size: 14px;

    font-family: "黑体","微软雅黑","宋体";

    font-weight: bold;

}

.content .panel .login{

    text-align: center;

    /*border:1px solid red;*/

    margin-top:20px;

}

.content button{

    width:255px;

    height:30px;

    background-color:#008000;

    border:none;

    color:#fff;

    font-size:16px;

    font-weight: bold;

    cursor:pointer;

}

.content .register{

    margin-top:15px;

    text-align: center;

}

.content .register button{

    width:80px;

    height:30px;

    border:none;

    font-size:14px;

    background-color:#4c6bb2;

    color:#fff;

    font-family: "微软雅黑";

    text-align: center;

    margin-left:30px;

}

CSS样式案例(2)-制作一个简单的登录界面的更多相关文章

  1. IOS制作一个漂亮的登录界面

    上图是Facebook的登录界面,看起来很漂亮,eamil框和passwod框合在一起,那么这种效果是怎么做出来的呢?我们都知道输入框用layer属性是可以做成圆角的形式,那么怎么样才能够仅仅只让上边 ...

  2. 使用CSS3 制作一个material-design 风格登录界面

    心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css ...

  3. android --一个简单的登录界面

    MainActivity.java package com.example.empty_project; import androidx.appcompat.app.AppCompatActivity ...

  4. PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例

    前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...

  5. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  6. 实例学习SSIS（一）--制作一个简单的ETL包

    原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...

  7. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  8. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  9. 制作一个简单的WPF图片浏览器

    原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片 ...

随机推荐

  1. spring jdbc分离数据库代码和java代码

    读取配置文件类 package com.eshore.ismp.contract.sql; import java.io.FileInputStream; import java.io.FileNot ...

  2. EF-CodeFirst-1 玩起来

    注本文是学习旺杰兄的CodeFirst系列所写 CodeFirst CodeFirst是一种全新的玩法,代码先行使得我们更了解实体之间的关系.而且更加符合了DDD领域驱动设计的思想 .所以CodeFi ...

  3. MVC 路由

    1.ASP.NET MVC框架中提供的URL路由机制能够使URL不必映射到应用程序的特定物理文件. 2.当用户访问基于MVC模式创建的网站时,只需要在浏览器地址栏里输入类似于下面的URL: http: ...

  4. Android MMS 之APN

    APN的英文全称是Access Point Name,中文全称叫接入点,是您在通过手机上网时必须配置的一个参数,它决定了您的手机通过哪种接入方式来访问网络.用来标识GPRS的业务种类,目前分为两大类: ...

  5. Apache配置HTTPS功能

    apache配置https 一.yum 安装openssl和openssl-devel,httpd-devel 二.生成证书(也可以从公司的证书颁发机构获取): #建立服务器密钥 openssl ge ...

  6. javascript中对象字面量的理解

    javascript中对象字面量与数组字面量 第一部分 我们知道JavaScript中的数据类型有基本数据类型和引用类型,其中Object类型就是非常常用的类型.那么如果创建一个Object类型的实例 ...

  7. SSH和SSM项目的打通各个页面的方式

    SSH项目: 这里采用的action的形式: 即在表现层为页面在action中配置一个返回值,然后在Struts.xml的配置文件中进行配置. SSM项目中,SpringMVC中利用注解来配置每个页面 ...

  8. 【原】js获取height为auto的高度问题

    今天用react写一个页面,需要获取一个img高度设置为auto的高度,可是一直获取到的要么是0,要么是null,因为页面加载完了图片不一定加载完. 当我把高度由 auto 设置为固定值之后,又可以获 ...

  9. FBX

    http://docs.autodesk.com/FBX/2014/ENU/FBX-SDK-Documentation/index.html http://forums.autodesk.com/t5 ...

  10. MYSQL 免安装版（windows 7/64）

    本文介绍在本地安装MYSQL数据库,免安装版相关配置 一.下载 mysql下载地址1:http://dev.mysql.com/downloads/mysql/ 二.解压MySQL压缩包 将已下载的M ...