CSS教程之css摹拟title和alt的提醒效果

显示全部楼层 · 发表于 2015-1-16 00:26:52

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。
这段工夫写了良多页面代码，除一些常识反复之外，也学到css的一些新器材，也许是旧器材，可是仍是但愿能对人人有效。
实在在css内里有良多对a的款式使用，由于a标签是唯一的默许能够触动员作的标签，因而在良多时分能够用css来把持a到达js才干到达的效果，好比明天要先容的css仿title和alt的提醒效果：
先来剖析一下这类效果的特性，不过就是在鼠标悬停的时分呈现一个包括先容笔墨的提醒层，假如用传统的javascript来完成，就要设置工具的onmou搜索引擎优化ver和onmou搜索引擎优化ut属性，而假如把工具看做是a属性中的link和hover的话，这个成绩就更明晰了，由于只需把工具的link属性设置为埋没提醒层、hover属性设置为出现提醒层便可，那末这个提醒层的地位事实在那里呢？固然是在a标签两头了，今朝经常使用的举措是把提醒内容放在span标签两头进而包括在a标签外部，然后设置a：link和a：hover下分歧的span款式便可。
上面分离代码给人人说一下这个复杂的道理：
<style>
.info{position:relative;background:#fff;color:#666;text-decoration:none;font-size:12px;width:150px;text-align:center;border:1pxsolid#ccc;height:25px;line-height:25px;}/*设置链接的属性,必定要设置为relative才干使提醒层随着链接走*/
.info:hover{background:#eee;color:#333;}
.infospan{display:none}/*设置一般下的span为埋没形态*/
.info:hoverspan/*设置hover下的span属性为出现形态,并设置提醒层的地位*/{display:block;position:absolute;top:30px;left:60px;width:130px;
border:1pxsolid#ff0000;background:#fff;color:#000;padding:5px;text-align:left;}
</style>
<body>
<aclass="info"href="http://www.achome.cn">www.achome.cn这是我的团体blog，内里有一些网站计划和制造的东东</a>
<aclass="info"href="http://www.achome.cn">www.achome.cn这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</a>
<aclass="info"href="http://www.achome.cn">www.achome.cn这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</a>
<aclass="info"href="http://www.achome.cn">www.achome.cn这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</a>
<aclass="info"href="http://www.achome.cn">www.achome.cn这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</a>
</body>
效果演示：
运转代码框

符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之css摹拟title和alt的提醒效果

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

浏览过的版块