返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何使用CSS3制作登录框
  • 835
分享到

如何使用CSS3制作登录框

2024-04-02 19:04:59 835人浏览 安东尼
摘要

这篇文章主要为大家展示了“如何使用css3制作登录框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用CSS3制作登录框”这篇文章吧。   html代码如

这篇文章主要为大家展示了“如何使用css3制作登录框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用CSS3制作登录框”这篇文章吧。

  html代码如下:

  <body>

  <divclass="wrapper">

  <divclass="header">Loginto<span>love.ly</span></div>

  <forMaction=""method="post">

  <ul>

  <li>

  <divclass="text">

  <spanclass="yonghu"></span><inputtype="text"placeholder="IconDeposit">

  </div>

  </li>

  <li>

  <divclass="passWord">

  <spanclass="mima"></span><inputtype="password"placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;">

  </div>

  </li>

  <liclass="remember">

  <inputtype="checkbox">RememberMe</li>

  <li>

  <ahref="">ForGotusernameorpassword?</a>

  </li>

  <li>

  <inputtype="button"value="Login">

  </li>

  </ul>

  </fORM>

  <divclass="footer">

  <p>Love.lyPersonalBlog.PSDTemplate<ahref="">Copyright&copy;2012MattGentile</a></p>

  <p><ahref="">Love.lyHome</a>|<ahref="">Bolg</a>|<ahref="">Work</a>|<ahref="">TermsofUse</a>|<ahref="">ContactMe</a></p>

  </div>

  </div></body>

  form{background:#cccccc;width:260px;height:260px;margin:35pxauto;padding:30px;box-shadow:0px1px2px1px#aaaaaa,

  inset0px1px1pxrgba(255,255,255,0.7);border-radius:3px;

  }

  box-shadow语法:

  E{box-shadow:<length><length><length>?<length>?||<color>}

  也就是:E{box-shadow:insetx-offsety-offsetblur-radiusspread-radiuscolor}

  换句说:

  对象选择器{box-shadow:投影方式X轴偏移量Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

如何使用CSS3制作登录框

以上是“如何使用CSS3制作登录框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: 如何使用CSS3制作登录框

本文链接: https://lsjlt.com/news/89502.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何使用CSS3制作登录框
    这篇文章主要为大家展示了“如何使用CSS3制作登录框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用CSS3制作登录框”这篇文章吧。   HTML代码如...
    99+
    2024-04-02
  • 如何使用CSS3制作一个material-design 风格登录界面
    这篇文章将为大家详细讲解有关如何使用CSS3制作一个material-design 风格登录界面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。心血来潮,想学学 material design 的设计风格,...
    99+
    2023-06-08
  • 如何使用CSS3来制作消息提醒框
    本篇内容主要讲解“如何使用CSS3来制作消息提醒框 ”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用CSS3来制作消息提醒框 ”吧!现代Web设计技术允许...
    99+
    2024-04-02
  • 如何使用HTML5和CSS3制作一个模态框
    小编给大家分享一下如何使用HTML5和CSS3制作一个模态框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!源码示例可能你并不想看我下面的一堆冗长的说明,想直接查看...
    99+
    2023-06-09
  • 怎么用css3制作登录表单功能
    这篇文章主要介绍“怎么用css3制作登录表单功能”,在日常操作中,相信很多人在怎么用css3制作登录表单功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用css3制作登...
    99+
    2024-04-02
  • Html如何制作登录页面
    这篇文章给大家分享的是有关Html如何制作登录页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。先来看看样子。html源码:XML/HTML Code复制内容到剪贴板<!D...
    99+
    2024-04-02
  • 如何使用css3制作动感导航条
    这篇文章主要介绍“如何使用css3制作动感导航条”,在日常操作中,相信很多人在如何使用css3制作动感导航条问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用css3制作...
    99+
    2024-04-02
  • CSS3如何使用新增边框属性制作关门开门效果
    这篇文章主要介绍了CSS3如何使用新增边框属性制作关门开门效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。border: 宽度 类型 颜色...
    99+
    2024-04-02
  • 如何使用HTML5和CSS3制作日历图标
    这篇文章主要讲解了“如何使用HTML5和CSS3制作日历图标”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用HTML5和CSS3制作日历图标”吧! ...
    99+
    2024-04-02
  • CSS3如何使用border-radius属性制作圆角
    这篇文章主要为大家展示了“CSS3如何使用border-radius属性制作圆角”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS3如何使用border-ra...
    99+
    2024-04-02
  • struts2框架的登录制作图文教程
    首先:我们要建一个web项目接着: 我们先来导入struts的xml文件第一步:右击你的项目名,鼠标到MyEclipse会看到一个add struts开头的文件,点开以后看到: 这里我们选择struts2.版本,并且路径我们选择 ...
    99+
    2023-05-30
    struts2 框架 登录
  • 如何使用Spring与MongoDB制作一个登录注册功能
    这期内容当中小编将会给大家带来有关如何使用Spring与MongoDB制作一个登录注册功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。工程目录: Spring配置文件: <be...
    99+
    2023-05-31
    spring mongodb
  • SpringMVC如何使用拦截器控制登录
    SpringMVC如何使用拦截器控制登录?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。SpringMVC读取Cookie判断用户是否登录,对每一个action都要进行判断。...
    99+
    2023-05-31
    springmvc 拦截器
  • 如何使用CSS3制作响应式导航菜单
    这篇文章主要介绍“如何使用CSS3制作响应式导航菜单”,在日常操作中,相信很多人在如何使用CSS3制作响应式导航菜单问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用CS...
    99+
    2024-04-02
  • 如何使用纯CSS3制作音乐舞台特效
    这篇文章给大家分享的是有关如何使用纯CSS3制作音乐舞台特效的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   前端代码   <div id="effect-...
    99+
    2024-04-02
  • CSS3如何制作缩略图
    本篇内容主要讲解“CSS3如何制作缩略图”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3如何制作缩略图”吧!我们使用 border 属性来创建缩略图,具体...
    99+
    2024-04-02
  • 如何使用Photoshop制作网页线框图
    这篇文章主要介绍“如何使用Photoshop制作网页线框图”,在日常操作中,相信很多人在如何使用Photoshop制作网页线框图问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用Photoshop制作网页...
    99+
    2023-06-08
  • vps如何限制用户登录
    要限制VPS的用户登录,您可以采取以下几种方法:1. 更改SSH配置:您可以编辑SSH配置文件(通常是/etc/ssh/sshd_c...
    99+
    2023-09-15
    vps
  • 纯CSS3如何制作的鼠标悬停时边框旋转
    这篇文章主要介绍纯CSS3如何制作的鼠标悬停时边框旋转,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!纯CSS3实现的鼠标悬停时边框旋转的效果:实现代码如下,代码中注释已经比较详细,就...
    99+
    2024-04-02
  • CSS3中box-shadow属性如何制作边框阴影效果
    小编给大家分享一下CSS3中box-shadow属性如何制作边框阴影效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!效果演示:...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作