热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

漂亮的弹出提示框

昨天在浏览一个网页时看到一个有趣的弹出提示框。在浏览网页时浏览器弹出提示框,这实际上是个很讨厌的事情,它会干扰我们的正常浏览,但我看到这个提示框却笑了,因为这个提示框的样子风格是模仿的Windo

昨天在浏览一个网页时看到一个有趣的弹出提示框。在浏览网页时浏览器弹出提示框,这实际上是个很讨厌的事情,它会干扰我们的正常浏览,但我看到这个提示框却笑了,因为这个提示框的样子风格是模仿的Windows的窗口风格。就是下面这个样子:

c

这个提示框其实很容易实现,只要将自己的Windows窗口截图,然后稍微处理一下。我觉得这个弹出框样式还是很有特点的,于是将它的背景图保留了下来。

背景图分为三部分,首先是头:

top
(点击可下载)

这个图片在弹出框中可以按背景方式显示,也可以直接用元素显示。

第二个是尾部:

bottom
(点击可下载)

这个图片的处理方法是头图片的处理方式一样。

最后一个是中间部分:

main
(点击可下载)

因为中间部分要显示文字,所以它只能按背景图方式显示。而且需要显示的文字有可能很多,也有可能很少,它的高度不固定,所以,背景图的铺排样式应该是:

.body{ background-repeat: repeat-x; }

弹出框的HTML代码是这样的:





  •   通知:xxxxxx,由此带来的不便敬请见谅!



经常搜集整理一下网上发行的好代码,能不断扩充自己的知识库,这些知识在不用的时候就放着,需要用到的时候,从知识库里拿出来,会省掉很多的麻烦。


推荐阅读
  • Scrapy:强大的Python爬虫框架
    Scrapy是一个基于Python的高效网页爬取框架,利用Twisted异步网络库实现高效的网络通信。其架构设计精巧,包括核心组件如引擎、调度器、下载器等,旨在简化大规模数据抓取过程。 ... [详细]
  • 全能终端工具推荐:高效、免费、易用
    介绍一款备受好评的全能型终端工具——MobaXterm,它不仅功能强大,而且完全免费,适合各类用户使用。 ... [详细]
  • 探索Squid反向代理中的远程代码执行漏洞
    本文深入探讨了在网站渗透测试过程中发现的Squid反向代理系统中存在的远程代码执行漏洞,旨在帮助网站管理者和开发者了解此类漏洞的危害及防范措施。 ... [详细]
  • 在使用Maven进行项目构建时,由于依赖库的下载速度慢常常让人感到沮丧,这直接影响了开发效率和学习热情。幸运的是,阿里云提供了一个快速的国内镜像服务,能够显著提升Maven项目的构建速度。 ... [详细]
  • 本文探讨了为何需要进行详尽的需求分析,以及在软件开发过程中常见的需求类型。同时,介绍了几种有效的方法来确保能够准确地捕捉到用户的实际需求。 ... [详细]
  • JavaWeb技术架构解析
    本文探讨了JavaWeb开发中客户端与服务器端的交互模式,重点分析了B/S(浏览器/服务器)和C/S(客户端/服务器)两种架构的特点及应用场景。 ... [详细]
  • 本文将介绍如何利用Python爬虫技术抓取国内主流在线学习平台的数据,并以51CTO学院为例,进行详细的技术解析和实践操作。 ... [详细]
  • 深入理解Python编程
    本文探讨了作者在学习Python过程中遇到的挑战和转折点,以及如何通过找到合适的资源和方法来提升编程技能。对于初学者来说,这不仅是一个学习的过程,也是一个自我发现和调整学习策略的过程。 ... [详细]
  • 本文介绍了如何使用JavaScript和jQuery实现页面元素随着滚动条的移动而相应变化位置的功能,提供了一段简洁的代码示例。 ... [详细]
  • 深入分析十大PHP开发框架
    随着PHP技术的发展,各类开发框架层出不穷,成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架,旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细]
  • Android商城应用开发指南(第二部分):创建启动欢迎页
    大多数商城应用程序在启动时会显示一个欢迎页面,以提升用户体验。本文将指导您如何实现一个基本的欢迎页,该页面会在用户打开应用后短暂展示,随后自动跳转至主界面。 ... [详细]
  • 本章探讨了使用固定数组实现栈和队列的基本方法,以及如何通过这些基本结构来实现更复杂的操作,如获取栈中的最小值。此外,还介绍了如何利用栈来模拟队列的行为,反之亦然。 ... [详细]
  • 本文介绍了一种SQL查询方法,用于将表中的行数据转换为列显示,特别是当需要根据特定条件聚合不同字段的数据时。通过使用子查询和GROUP BY语句,可以有效地实现这一转换。 ... [详细]
  • 本文详细介绍了Linux操作系统中的cp和scp命令,包括它们的基本使用方法、常见选项以及如何通过scp命令安全地在不同主机之间传输文件。 ... [详细]
  • 从零开始学网页设计与Web前端开发——第二课
    2020年10月30日,西京学院3336教室迎来了第十八期研习活动的第二讲,本次课程由计算机科学18级学生梁鸿飞主讲,深入探讨了HTML与CSS的基础知识。 ... [详细]
author-avatar
觉悟
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有