首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5和CSS3登录页面制作实录

作者：dmcm0010 | 来源：互联网 | 2013-04-23 13:59
本文详细介绍使用HTML5和CSS3制作一个登录页面的完整过程。">

本文详细介绍使用HTML5 和CSS3 制作一个登录页面的完整过程。

\

View demo

login.html

 

1
2
3
4
5
6
7
8
9
10
11
    Log In
    
        
        
    
    
        
    

 

所用到的HTML 5的特性：

◆ placeholder – 输入框的简短提示，当该输入框获得输入焦点时，该提示信息自动消失

◆ required – 指定该输入元素是否必须提供

◆ autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点

◆ type=”password” – 指定密码输入(非HTML5专有)

CSS

在这里我们用到了 CSS3 的一些专有属性，包括：

Box-shadow 可以帮我们制作效果很好的边框阴影

\

 

1
2
3
4
5
6
7
8
9
10
#login 
{ 
    box-shadow: 
          0 0 2px rgba(0, 0, 0, 0.2), 
          0 1px 1px rgba(0, 0, 0, .2), 
          0 3px 0 #fff, 
          0 4px 0 rgba(0, 0, 0, .2), 
          0 6px 0 #fff, 
          0 7px 0 rgba(0, 0, 0, .2); 
}

Stitch effect (缝效果)

 

\

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#login 
{ 
    position: absolute; 
    z-index: 0; 
} 
 
#login:before 
{ 
    content: &＃39;&＃39;; 
    position: absolute; 
    z-index: -1; 
    border: 1px dashed #ccc; 
    top: 5px; 
    bottom: 5px; 
    left: 5px; 
    right: 5px; 
    -moz-box-shadow: 0 0 0 1px #fff; 
    -webkit-box-shadow: 0 0 0 1px #fff; 
    box-shadow: 0 0 0 1px #fff; 
}

Subtle gradient lines (微妙的渐变线)

 

\

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
h1
{ 
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5); 
    text-transform: uppercase; 
    text-align: center; 
    color: #666; 
    margin: 0 0 30px 0; 
    letter-spacing: 4px; 
    font: normal 26px/1 Verdana, Helvetica; 
    position: relative; 
} 
 
h1:after, h1:before 
{ 
    background-color: #777; 
    content: ""; 
    height: 1px; 
    position: absolute; 
    top: 15px; 
    width: 120px; 
} 
 
h1:after 
{ 
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff)); 
    background-image: -webkit-linear-gradient(left, #777, #fff); 
    background-image: -moz-linear-gradient(left, #777, #fff); 
    background-image: -ms-linear-gradient(left, #777, #fff); 
    background-image: -o-linear-gradient(left, #777, #fff); 
    background-image: linear-gradient(left, #777, #fff); 
    right: 0; 
} 
 
h1:before 
{ 
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff)); 
    background-image: -webkit-linear-gradient(right, #777, #fff); 
    background-image: -moz-linear-gradient(right, #777, #fff); 
    background-image: -ms-linear-gradient(right, #777, #fff); 
    background-image: -o-linear-gradient(right, #777, #fff); 
    background-image: linear-gradient(right, #777, #fff); 
    left: 0; 
}

最终结果

 

\

View demo

结论

在一些老的浏览器上也表现不错，下图是在IE8下的效果：

\


推荐阅读
  • range

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • jsp

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • settings

    爬虫05 /scrapy框架

    目录爬虫06scrapy框架1.scrapy概述安装2.基本使用3.全栈数据的爬取4.五大核心组件对象5.适当提升scrapy爬取数据的效率6.请求传参爬虫06scrapy框架1. ... [详细]
  • settings

    为什么borderimage在CSS中很少被使用，你可能不知道的小知识

    之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。看起来这是一个非常 ... [详细]
  • jsp

    asp.net微信公众平台开发目录汇总陆续更新的相关内容

    本文内容为asp.net微信公众平台开发的目录汇总，包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建（接入）、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面，适合综合运用。 ... [详细]
  • jsp

    微软头条实习生分享深度学习自学指南

    微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]
  • jsp

    Open judge C16H: Magical Balls 快速幂+逆元问题解析

    本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法，并给出了问题的解析和解决方法。详细介绍了问题的背景和规则，并给出了相应的算法解析和实现步骤。通过本文的解析，读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • jsp

    推荐系统遇上深度学习(十七）详解推荐系统中的常用评测指标

    推荐系统遇上深度学习(十七）详解推荐系统中的常用评测指标
    原创：石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人，希望在平日的工作学习中，挖掘数据的价值， ... [详细]
  • match

    《数据结构》学习笔记3——串匹配算法性能评估

    《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • jsp

    ABAP开发发送邮件程序的配置和代码整理

    本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细]
  • jsp

    动态规划算法的基本步骤及最长递增子序列问题详解

    动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]
  • jsp

    Java验证码——kaptcha的使用配置及样式

    Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • jsp

    高质量SQL书写的30条建议

    高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]
  • jsp

    指针的引用以及在什么情况下使用指针的引用

    本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址，通过指针可以修改指针所指的变量的值。然而，如果想要修改指针的指向，就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法，并思考了在修改指针的指向后，取指针的输出结果。 ... [详细]
  • jsp

    用border做一个移动端常见的返回按钮

    用border做一个移动端常见的返回按钮
    第一步.hs1{float:left;.mt(.25rem);.ml(.12rem);width:.3rem; ... [详细]
author-avatar
dmcm0010
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有