首先来张完工的效果图。

一、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. python 内置函数和函数装饰器

    python内置函数 1.数学相关 abs(x) 取x绝对值 divmode(x,y) 取x除以y的商和余数,常用做分页,返回商和余数组成一个元组 pow(x,y[,z]) 取x的y次方 ,等同于x ...

  2. gzip、bzip2、tar压缩命令使用

    1. gzip gzip test.txt //压缩 gzip -d test.txt.gz //解压缩 gzip -9 test.txt //设置压缩等级(9最好,1最差,默认6) 相关:zcat ...

  3. 【Alpha版本】测试文档

    App测试点 UI测试 测试各界面控件布局.总体色调.风格是否能够给用户良好的使用感. 文字是否正确,图文符合,文字与图片的组合是否够美观. 操作是否友好,是否易于操作,是否繁琐,存在无用操作. 配图 ...

  4. iOS - CALayer相关(CATransform3D)

    一.图层的几何 图层的几何简单通俗,图层的所有几何属性(包括矩阵变换),都可以有隐式和显式动画. 图层几何的属性: 1.position是CGPoint值,她指定图层相对于她图层的位置,该值基于父图层 ...

  5. 安装Virtual Box增强功能 - Ubuntu

    一.开发环境 操作系统:Windows 7Virtual Box 版本: 5.0.10 虚拟机系统: Ubuntu 12.04 LTS 二.问题 进入Ubuntu图形界面后,选择“设备” --> ...

  6. Json对象与Json字符串互转(转载)

    一.jQuery插件支持的转换方式 1 $.paseJSON(jsonstr);//将json字符串转换为json对象 二.浏览器支持的转换方式(Firefox,Chrome,Opera,Safair ...

  7. 结合Hadoop，简单理解SSH

    在启动dfs和yarn时,需要多次输入密码,不但启动本机进程还有辅服务器启动那些节点也需要相应密码,主与辅服务器之间是通过SSH连接的,并发送操作指令 一.ssh密码远程登录 1.使用ssh连接另一台 ...

  8. C++ 函数返回数组指针的问题

    提醒一下:int *func(){int a[10] = {5};return a;}是非法的,因为 a 是局部变量,被申请在系统栈中,局部变量在函数返回后会被销毁,于是你返回的指针指向的是一段已经被 ...

  9. Thread 与 Runnable

    在Java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口:Thread类是在java.lang包中定义的.一个类只要继承了Thread类同时覆写了本类中的run() ...

  10. springmvc的form标签

    1.要使用Spring MVC提供的表单标签,首先需要在视图页面添加: <%@ taglib prefix="form" uri="http://www.sprin ...