首先来张完工的效果图。

一、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. 我所了解的JavaScript糟粕和鸡肋

    糟粕 全局变量 众所周知,全局变量在很小的程序中可能会带来方便,但随着程序变得越来大,全局变量将难以处理,全局变量将降低程序的可靠性. 在js中有3种方式定义全局变量 脱离任何函数安排一个var语句  ...

  2. HTML5学习总结-10 Android 控件WebView显示网页

    WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient 1)setWebClient: ...

  3. UVA10054The Necklace (打印欧拉路)

    题目链接 题意:一种由彩色珠子组成的项链.每个珠子的两半由不同的颜色组成.相邻的两个珠子在接触的地方颜色相同.现在有一些零碎的珠子,需要确定他们是否可以复原成完整的项链 分析:之前也没往欧拉路上面想, ...

  4. C#------如何取出exe运行文件给客户使用

    1.将解决方案配置里面的“Debug”转换成“Release” 2.右击“解决方案”,选着“重新生成解决方案”,以得到最新的版本 3.找到工程目录下的“bin”文件夹,里面有“Release”文件夹, ...

  5. select例子

    好长时间没有写了,其实一直在坚持学习. #include <sys/types.h> #include <sys/socket.h> #include <stdio.h& ...

  6. LDA（主题模型算法）

    LDA整体流程 先定义一些字母的含义: 文档集合D,topic集合T D中每个文档d看作一个单词序列< w1,w2,...,wn >,wi表示第i个单词,设d有n个单词.(LDA里面称之为 ...

  7. JAVA第三周课后作业

    JAVA课后作业 一.枚举类型 代码: enum Size{SMALL,MEDIUM,LARGE}; public cl ass EnumTest { public static void main( ...

  8. 20145212 《Java程序设计》第1周学习总结

    20145212 <Java程序设计>第1周学习总结 教材学习内容总结 看了毕向东老师的视频,我对Java有了进一步的了解.相比于其他的计算机编程语言(比如C语言),Java有一大特点就是 ...

  9. Java排序算法——选择排序

    import java.util.Arrays; //================================================= // File Name : Select_S ...

  10. JavaScript排序算法——堆排序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...