仿MSN风格右下角消息通知

5星 · 超过95%的资源需积分: 3 82 浏览量更新于2024-09-11 收藏 3KB TXT 举报

"本资源提供了一个简易的JavaScript代码示例，用于创建一个仿照MSN风格的右下角弹窗。这个教程特别适合JavaScript初学者，它展示了如何利用HTML、CSS和基本的脚本语言来设计一个具有特定样式（如阴影边框、背景颜色和logo图像）的动态元素。以下是关键知识点的详细说明： 1. **HTML结构**： - 代码首先定义了一个`<div>`元素，ID为"msn"，设置了固定的宽度（180px）、高度（116px），以及绝对定位属性，使其显示在页面右下角。 - `<table>`元素嵌套在`<div>`内，设置了百分比宽度，以便适应屏幕大小，并且设置了上、左、右边框，以及底部边框和背景色。 2. **CSS样式**： - 表格内的`<td>`元素有自定义的样式，如字体大小、颜色、背景图像和对齐方式，这些都与MSN风格的设计相匹配。 - 文本区域使用`<td>`中的`<img>`标签显示logo，通过`hspace`和`align`属性调整图像的位置。 3. **JavaScript动态内容**： - 缺失了实际的JavaScript代码，但可以推测这部分可能包括事件监听器，如鼠标悬停或点击事件，当触发时会显示或隐藏弹窗内容，或者执行其他与用户交互的功能。 4. **学习价值**： - 这个教程有助于理解如何结合HTML、CSS和JavaScript来创建可定制的UI组件，对于希望模仿知名应用界面或制作个性化提示窗口的开发者来说，这是一个实用的基础案例。 5. **适用人群**： - 对JavaScript和前端开发感兴趣的学生或初学者，可以通过这个项目实践基础布局和交互技巧。 6. **扩展和改进**： - 开发者可以进一步优化这个弹窗，比如添加动画效果、响应式设计以适应不同屏幕尺寸，或者集成更复杂的用户交互功能。总结，这个资源提供了一个简洁的框架，可以帮助读者理解和实现一个基础的仿MSN右下角弹窗，是前端开发者提升实战技能的良好起点。"

<HTML>
<HEAD>
<title>仿MSN右下角弹窗</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=Javascript>
document.writeln("<div id=\"msn\" style=\"BORDER-RIGHT:#455690 1px solid; BORDER-TOP:#a6b4cf 1px solid; Z-INDEX:99999; LEFT:0px; BORDER-LEFT:#a6b4cf 1px solid; WIDTH:180px; BORDER-BOTTOM:#455690 1px solid; POSITION:absolute; TOP:0px; HEIGHT:116px; BACKGROUND-COLOR:#c9d3f3\">");
document.writeln("<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"BORDER-TOP:#ffffff 1px solid; BORDER-LEFT:#ffffff 1px solid\" bgcolor=\"#cfdef4\">");
document.writeln("<tr><td height=\"24\" width=\"26\" style=\"FONT-SIZE:12px;BACKGROUND-IMAGE:url(images/msgTopBg.gif);COLOR:#0f2c8c\" valign=\"middle\"><img src=\"images/msgLogo.gif\" hspace=\"5\" align=\"absMiddle\" vspace=\"1\"\/><\/td>");
document.writeln("<td style=\"FONT-WEIGHT:normal;FONT-SIZE:9pt;BACKGROUND-IMAGE:url(images/msgTopBg.gif);COLOR:#1f336b;PADDING-TOP:4px\" valign=\"middle\" width=\"100%\">提示：<\/td>");
document.writeln("<td style=\"BACKGROUND-IMAGE:url(images/msgTopBg.gif);PADDING-TOP:2px\" valign=\"middle\" width=\"19\" align=\"right\"><img src=\"images/msgClose.gif\" hspace=\"3\" style=\"CURSOR:pointer\" onclick=\"closeDiv()\" title=\"关闭\"\/><\/td>");
document.writeln("<\/tr><tr><td colspan=\"3\" height=\"90\" style=\"PADDING-RIGHT:1px;BACKGROUND-IMAGE:url(images/msgBottomBg.jpg);PADDING-BOTTOM:1px\">");
document.writeln("<div style=\"BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 9pt; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%\"><a href=\"/jscss/\" target=\"_blank\" style=\"FONT-WEIGHT:bold;COLOR:red\">>>游客：欢迎回来！<\/a><br><br><a href=\"http:/\" target=\"_blank\" style=\"FONT-WEIGHT:bold;COLOR:blue\">>>您有（0）条短信息。<\/a><\/div><\/div><\/tr><\/table><\/div>");
msn.style.top=document.body.clientHeight-174;
msn.style.left=document.body.clientWidth-225;
moveR();
function moveR() {
msn.style.top=document.body.scrollTop+document.body.clientHeight-116;
msn.style.left=document.body.scrollLeft+document.body.clientWidth-180;
setTimeout("moveR();",80)
}
function closeDiv(){
msn.style.visibility='hidden';
}
</SCRIPT>
</HEAD>
<BODY style="MARGIN: 0px; TEXT-ALIGN: center">
<table width="776" border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
<tr>
<td height="1060" align="center" valign="top"><p><br>
</p>

下载后可阅读完整内容，剩余1页未读，立即下载

qq_31972673

粉丝: 0
资源: 1

仿MSN风格右下角消息通知

仿MSN右下角弹窗控件ASP.NET版

JavaScript仿MSN右下角窗口简洁版代码

js实现仿MSN带关闭功能的右下角弹窗代码

msn通讯类库-dotmsn

MSN和BP神经网络对比

msn提示音噔噔噔无损

在linux中设置系统防火墙，禁止内网主机登录MSN和QQ，并设置默认策略ACCEPT

AttributeError: module 'msn' has no attribute 'matrix'

语句printf("%d\n",strlen("msn\t\01\\\t"));的输出结果是().

mellanox/迈络思 msn2700-cs2f 以太网交换机 配置

最新资源

mellanox/迈络思 msn2700-cs2f 以太网交换机配置