很早以前就看到网上有这样的效果了 ，左上角来个横条
在网站 http://demo.doyoe.com/ 上又看到了 ，把效果单独扣下来了 ，和大家一起分享
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=zh-cn>
<HEAD>
<TITLE> Examples</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#top_right {
POSITION: fixed; TEXT-ALIGN: /** 注释*/
center; FILTER:
progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=.7,M12=0.6,M21=-.7,M22=0.6);
BACKGROUND-COLOR: #333;
WIDTH: 200px;
DISPLAY: block;
FONT: bold 14px/28px georgia, sans-serif;
HEIGHT: 28px;
COLOR: #fff;
TOP: -20px;
RIGHT: -20px;
box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 2px #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
_position: absolute;
-webkit-transform: translate(40px, 45px) rotate(45deg);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 2px #fff;
}
#top_left {
POSITION: fixed; TEXT-ALIGN: /** 注释*/
center; FILTER:
progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=.7,M12=0.6,M21=-.7,M22=0.6);
BACKGROUND-COLOR: #333;
WIDTH: 200px;
DISPLAY: block;
FONT: bold 14px/28px georgia, sans-serif;
HEIGHT: 28px;
COLOR: #fff;
TOP: -20px;
LEFT: -20px;
box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 2px #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
_position: absolute;
-moz-transform: translate(-40px, 45px) rotate(-45deg);
-webkit-transform: translate(-40px, 45px) rotate(-45deg);
-o-transform: translate(-40px, 45px) rotate(-45deg);
transform: translate(-40px, 45px) rotate(-45deg);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 2px #fff;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 2px #fff;
}
#top_left:hover{
BACKGROUND-COLOR: #900;
TEXT-DECORATION: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)
}
#top_right:hover {
BACKGROUND-COLOR: #900;
TEXT-DECORATION: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)
}
a:link {
text-decoration: none;
}
</style>
</HEAD>
<BODY>
<HEADER >
</HEADER>
<A id=top_left title="AAA" href="###">我在左上角</A>
<A id=top_right title="AAA" href="###">我在右上角</A>
<br>
<div style="text-align:center "> MyTitle</div>
</BODY></HTML>
- 大小: 17.1 KB
分享到：
相关推荐
本文将深入探讨如何使用JavaScript实现模仿MSN左上角的Flash伸缩广告效果，这是一种常见的动态广告展示方式，它能吸引用户的注意力并提高广告的可见性。 首先，让我们了解JavaScript的基本结构。JavaScript代码通常...
4. 布局设计：遵循“F”形阅读习惯，将重要信息放在左上角。 5. 交互元素：按钮设计要有明确的反馈，提高点击率。 四、网页Banner的优化策略 1. A/B测试：对比不同设计的Banner，找出用户更喜欢的版本。 2. 数据...
3. **布局结构**：Banner的布局需要考虑用户的浏览习惯，如F型布局，将重要信息放在左上角。此外，黄金比例、对称性或非对称性等设计原则也可以用来增强视觉效果。 4. **交互性**：现代网页设计中，动态效果和交互...
主要介绍了jquery实现滑屏大图定时收缩为小banner图片的广告代码,可实现大幅广告图的渐显效果及定时收缩功能,点击左上角关闭按钮还可隐藏广告图片,非常具有实用价值,需要的朋友可以参考下
今天再次给大家推荐一款非常具有创意...特点：支持左右全屏，当鼠标移动到左右两侧箭头时，会弹出下一个图片的缩略图，或者点击焦点图左上角的半透明图标符号，也可以实现图片的切换，总之非常之完美，懒人之家推荐下载
Banner设计应遵循“F”形阅读模式，将重要信息置于左上角，随着视线的移动，逐渐展示其他内容。 4. **图形元素**：简洁而富有象征性的图形能有效吸引注意力。例如，可以使用线条、图标或者与企业业务相关的图形来...
在微信开发者工具左上角有一个导入，找到源码导入，appid填上去，打开就可以了，基本上就完成了差不多。 下面是流量主广告代码修改位置 1.首页最上边的头部广告是一个往其他小程序引流的，（如果自己没有其他小...
为了在产品主图左上角添加公司logo，建议采用PNG格式的透明背景图片，以提升Logo的美观度和专业感。 七、制作Banner： 1. 全屏Banner，根据产品或营销活动特点设计，适应不同平台的展示。 2. 滚动Banner，可用于...
在本例中，左上角的Logo、上方的Banner、导航栏下方的文字和图片，以及各种类型的链接，共同构成了一个清晰的导航结构。背景音乐和滚动的字幕、图片，进一步增强了用户体验，使得个人主页既具有功能性，又充满艺术感...
LOGO是网站的视觉标识，通常位于页面左上角，但也可以根据设计创意进行创新布局。LOGO应保持适度的动态效果，但不宜过分，以确保与网站的整体风格协调。同时，考虑到与其他网站LOGO交换的需求，建议设计多种版本以...
这意味着浏览器窗口的左上角和文档的左上角并不相同。如果试图放置一个新元素，例如，屏幕顶部的一个动态Banner；而如果只是试图将元素的left和top位置设置为0，将会遇到麻烦，你实际上只是将其放到了文档的顶部，...
LOGO作为网站的标识，通常位于页面的左上角，但也可以根据设计需求进行创新布局。LOGO设计应与网站的整体风格相协调，动态LOGO应适度，避免过于夸张。同时，考虑与其他网站LOGO交换时的适应性，制作不同版本以满足...
- 首页和内页的不同位置如右上角、顶部通栏、中部通栏、左上角、下载页面、底部通栏、左漂浮和右漂浮广告等，都有特定的尺寸需求，如120*60、468*60、760*60、580*60等。 8. **颜色和格式**： - 因为Web只支持256...
在Android中，我们可以使用`android.graphics.Rect`类来定义裁剪区域，它包含了左上角和右下角的坐标。裁剪过程通常涉及以下步骤： 1. **加载图片**：使用`BitmapFactory`类解析图片资源或从文件系统加载图片。 2. ...
在这个例子中，`#ad-banner`是广告图片的ID选择器，通过`position: fixed`将其固定在屏幕的一个位置，`top: 0`和`left: 0`使其始终出现在屏幕的左上角。然后，我们根据实际需求设置图片的宽度和高度。 为了让广告...
3. 入场后，考生应按准考证上的座位号就座，并将身份证件和准考证置于桌面左上角供监考人员检查。 4. 考试开始30分钟后不得入场，考试过程中必须遵守考场纪律，不得作弊。 5. 考试结束后，考生应立即停止答题，按照...
LOGO是网站的标志，它位于页面的显著位置，如左上角，用于快速识别和建立品牌形象。Banner作为吸引用户注意力的重要广告形式，通常采用GIF或JPG格式，以动态或静态的图像展现。导航栏的存在，使用户能够方便地在网站...
切片后，每个切片的左上角会有编号以区分。然后，切换到切片选择工具，可以移动、选择或调整切片大小。若需要进一步编辑，可以右键单击切片进行删除或划分。 完成切片后，选择“文件”>“存储为Web所用格式”，在...
- Logo：位于网页左上角，代表网站或企业的品牌形象，常见的尺寸有88×31像素、120×60像素和120×9像素。 - Banner：用于宣传网站特定栏目或活动的广告条，常见尺寸为480×60像素或233×30像素。 - 导航栏：由...