首先来张完工的效果图。

一、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. .net中ckeditor的应用

    ①js文件的引入 <script src="/public/ckeditor_4.4.7/ckeditor.js"></script> <script ...

  2. hdu 2034 - 集合操作

    题意:集合A,B,计算集合差A-B(求只在集合A内的数) 解法: 选用STL内的集合set 1.建立set 1: #include<set> 2:   3: set<int> ...

  3. 和redis谈一场恋爱（第一天邂逅）

    前几天玩了下Memcache,发现挺好用.知道redis是Memcache的妹妹.我本着大公无私和博大的胸怀,看着redis孤零零的躺在角落里,委实觉得可怜.心里总有个声音在说,你既然已经爱上了Mem ...

  4. python运维开发坎坷之路-01

    前言 2014年9月,新疆乌鲁木齐,在51CTO学院看着alex老师的python教学视频,不得不说这是我第一次接触python这门高级语言,从最开始的一无所知到现在能够用python写脚本,再到未来 ...

  5. PHPCMS后台统计点击量时出现点击数不改变可能丢失了JS代码。

    <script language="JavaScript" src="{APP_PATH}api.php?op=count&id={$id}&mod ...

  6. JavaWeb学习笔记——JavaBean的保存范围和删除

  7. JavaScript学习笔记——DOM_document对象

    javascript-document对象详解 DOM document(html xml) object modledocument对象(DOM核心对象) 作用: 1.内容 innerHTML 2. ...

  8. CodeForces 716A Crazy Computer

    题目链接:http://codeforces.com/problemset/problem/716/A 题目大意: 输入 n c, 第二行 n 个整数,c表示时间间隔 秒. 每个整数代表是第几秒.如果 ...

  9. flask安装及第一个程序

    1.flask是一个轻量级的python web框架 ·1.Flask 依赖两个外部库: Jinja2 模板引擎和 Werkzeug WSGI 套件 ·2.安装: # easy_install fla ...

  10. Helixoft VSdocman 是一个集成于Visual Studio并提供了命令行版本的帮助文档编译工具

    http://www.helixoft.com/vsdocman/overview.html https://blog.fishlee.net/2016/01/14/helixoft-vsdocman ...