使用CSS3来制作消息提醒框

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3下拉框,css3搜索框,css3复选框,css3输入框,css3文本框等相关知识,佚名希望在学习及工作中可以帮助到您

现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的，因为默认的JavaScript警告框的样式往往（与你自己设计的漂亮样式）很不协调很囧。这使开发者步入找出哪种解决方案能更好地实现更友好的用户界面的道路。

2015712165822907.png (715×477)
实际演示 – 下载源代码

建立页面

　　首先, 我们需要创建两个文件命名为“index.html” 和 “style.css”. 我将从Google CDN上调用最新的jQuery 库. HTML是非常简单的,因为我们只需要在警告框里加入一些文本. 所有的JavaScript代码被加在了页面的底部,这样可以节省HTTP请求时间.

</div>

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>CSS3 Notification Boxes Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

</div> </div>

　　头部代码设置了外部调用文件和 HTML5文档规范 . 不是很复杂因为我们只是建立一个简单的示例. 对于提示窗口我定义两个不同的样式 – 成功的和错误的. 还有一些其它风格的例如警告框和信息框, 但是我没有创建更多的,因为我更关注的是效果.

</div>

<div id="content">
<div class="notify successbox">
<h1>Success!</h1>
<span class="alerticon"><img src="images/check.png" alt="checkmark" /></span>
<p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p>
</div>
<div class=

相关文章