使用Html制作简单登录页面的方法

这篇文章主要为大家详细介绍了html制作简单而漂亮的登录页面具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

先来看看样子。

使用Html制作简单登录页面的方法

html源码:

nbsp;html>                Login                

          

Login

          

登录后复制          

css代码:

立即学习“前端免费学习笔记(深入)”;

html{       width: 100%;       height: 100%;       overflow: hidden;       font-style: sans-serif;   }   body{       width: 100%;       height: 100%;       font-family: 'Open Sans',sans-serif;       margin: 0;       background-color: #4A374A;   }   #login{       position: absolute;       top: 50%;       left:50%;       margin: -150px 0 0 -150px;       width: 300px;       height: 300px;   }   #login h1{       color: #fff;       text-shadow:0 0 10px;       letter-spacing: 1px;       text-align: center;   }   h1{       font-size: 2em;       margin: 0.67em 0;   }   input{       width: 278px;       height: 18px;       margin-bottom: 10px;       outline: none;       padding: 10px;       font-size: 13px;       color: #fff;       text-shadow:1px 1px 1px;       border-top: 1px solid #312E3D;       border-left: 1px solid #312E3D;       border-right: 1px solid #312E3D;       border-bottom: 1px solid #56536A;       border-radius: 4px;       background-color: #2D2D3F;   }   .but{       width: 300px;       min-height: 20px;       display: block;       background-color: #4a77d4;       border: 1px solid #3762bc;       color: #fff;       padding: 9px 14px;       font-size: 15px;       line-height: normal;       border-radius: 5px;       margin: 0;   }

登录后复制

总结

代码如下:

 

登录后复制

placeholder=”用户名”的作用:占位符

使用Html制作简单登录页面的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

Html的a标签中href和onclick用法区别以及优先级别

HTML的表格布局

以上就是使用Html制作简单登录页面的方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2833440.html

(0)
上一篇 2025年3月9日 04:22:40
下一篇 2025年2月21日 12:34:37

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何使用HTML编写邮件模版

    这篇文章主要介绍了使用html编写简单的邮件模版,作者主张极简至上主义…可以先看文章结尾处链接中介绍的模版成品,需要的朋友可以参考下 今天,我想写一个”低技术”问题。   话说我订阅了不少了新闻邮件(Ne…

    2025年3月9日
    200
  • 如何使用HTML在两个div标签中间画一条竖线

    这篇文章主要介绍了关于如何使用html在两个div标签中间画一条竖线,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 最近项目经理给了一个活儿,需要在界面当中画一条竖线,且这条竖线在高度上需要自动占满整个父p。在网上查了相关资…

    2025年3月9日
    200
  • 关于HTML 文本格式化的代码

    下面为大家带来一篇html 文本格式化的简单实例。内容挺不错的,现在就分享给大家,也给大家做个参考。 一,文本格式化:此例演示如何在一个 HTML 文件中对文本进行格式化。 This text is boldThis text is str…

    2025年3月9日 编程技术
    200
  • 关于Html和CSS绘制三角形图标的方法

    这篇文章主要为大家详细介绍了html+css绘制三角形图标的相关代码,很多网页都有三角形的图标,通常是切的图片,这里可以用css3+html写出三角形,感兴趣的小伙伴们可以参考一下 先看看效果图: nbsp;html>        …

    2025年3月9日
    200
  • 关于HTML中rel属性的分析

    这篇文章主要介绍了html中rel属性分析,需要的朋友可以参考下 由于发现有同学在微博转播和收藏这篇文章,所以回头来再审视下这篇随性翻译的文章,后来发现w3cschools.com.cn已经有了对照的中文译文,所以这里我就继续完善下这篇文章…

    2025年3月9日 编程技术
    200
  • 使用html和css实现康奈尔笔记的模板

    这篇文章主要介绍了使用html和css实现康奈尔笔记(5r笔记)模板的相关资料,需要的朋友可以参考下 缘起 人家都说 康奈尔笔记 法,很好用呢,能抵抗遗忘曲线,让你的笔记事半功倍,有兴趣的同学自行百度哈。 网上有很多现成的模板,下载下来之后…

    编程技术 2025年3月9日
    200
  • HTML+CSS和DIV如何实现排版布局

    这篇文章主要介绍了关于html+css和div如何实现排版布局,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 HTML CSS + div实现排版布局 1.网页可以看成是由一个一个“盒子”组成,如图: 由上图可以看出,页面分…

    2025年3月9日 编程技术
    200
  • html学习中的几个重点总结

    关于html的重点总结块元素、行内元素、行内块状元素html可以将元素分类方式分为行内元素、块状元素和行内块状元素三种 使用display属性能够将三者任意转换 块状元素自动换行 转换方法    (1)display:inline;转换为行…

    编程技术 2025年3月9日
    200
  • 对响应式web设计的方法实现

    这篇文章分享给大家的内容是关于响应式web设计的方法实现,内容很有参考价值,希望可以帮到有需要的小伙伴。 媒体查询的用法 media 媒体查询包含一个可选的媒体类型和,满足CSS3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征…

    2025年3月9日 编程技术
    200
  • HTML中列表、表格和媒体元素的介绍

    这篇文章给大家介绍的文章内容是关于html中列表、表格和媒体元素的介绍,有很好的参考价值,希望可以帮助到有需要的朋友。 列表:有三种,有序列表,无序列表,定义列表1.有序列表:列表项: 要显示的内容写在li里面,不要写在li的外面有序列表在…

    编程技术 2025年3月9日
    200

发表回复

登录后才能评论