首先来张完工的效果图。

一、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. AngularJs ngInclude、ngTransclude

    这两个都是HTML DOM嵌入指令 ngInclude 读取,编译和插入外部的HTML片段. 格式:ng-include=“value”<ng-include src=”value” onloa ...

  2. Mac系统搭建Go语言Sublime Text 2环境配置

    Go语言是谷歌自家的编译型语言,旨在不损失性能的前提下降低代码复杂率.其优势是让软件充分发挥多核心处理器同步多工的优点,并可解决面向对象程序设计的麻烦. 一.安装Golang的SDK 在官网http: ...

  3. 屠蛟之路_重伤的屠蛟俊_ThirdDay

    在屠蛟少年们重登数据库大山的途中,少年屠蛟俊(511)实力扛把子,一直坚持在队伍前头开路引领.披荆斩棘,却也因为一路与险水恶林.狂禽猛兽做战斗而精力受损,最终一不小心坠进beta怪蛟设置的陷阱深洞里, ...

  4. Mysql学习笔记（八）由触发器回顾外键约束中的级联选项

    近些天都没有写博客.在学习mysql的知识,通过学习和练习,也熟悉了mysql的函数.触发器.视图和存储过程.并且在实际的开发过程中也应用了一小部分.效果还是十分理想的. 今天晚上在学习触发器模仿in ...

  5. 收集的一些jQuery （我平常用的少的，但确实挺有效果的）

    禁用Jquery(动画)效果 jQuery.fx.off = true; 使用自己的 Bullets(这个有一丁点儿的小技巧) //这里是js代码 也就是给每个ul添加一个类名 然后给ul的子li前面 ...

  6. redis理解

    1. Redis是什么 redis是nosql的一种. 这个问题的结果影响了我们怎么用Redis.如果你认为Redis是一个key value store, 那可能会用它来代替MySQL:如果认为它是 ...

  7. 利用mybatis的分页插件实现商品列表的显示

    分析思路: 当我们点击查询商品的时候,会出现商品的列表,并按上下页可以实现分页的查询的功能. 首先首先我们先找到商品查询商品的按钮在jsp的那个页面,即首页index.jsp 这里有个url即显示商品 ...

  8. JS字符串转换成json对象。。。。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Python获取文件名

    本文实例讲述了python实现从URL地址提取文件名的方法.分享给大家供大家参考.具体分析如下: 如:地址为 http://www.jb51.net/images/logo.gif 要想从该地址提取l ...

  10. Runner站立会议06

    开会时间:21.10~21.30 地点:基教负一 今天做了什么:日历布局,晚善日历 明天准备做什么:完善日历界面 遇到的困难:暂无 燃尽图: 会议图: