仓酷云

标题: CSS教程之css摹拟title和alt的提醒效果 [打印本页]

作者: 愤怒的大鸟 时间: 2015-1-16 00:26
标题: CSS教程之css摹拟title和alt的提醒效果
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<span>这是我的团体blog，内里有一些网站计划和制造的东东</span></a>
<aclass="info"href="http://www.achome.cn">www.achome.cn<span>这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</span></a>
<aclass="info"href="http://www.achome.cn">www.achome.cn<span>这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</span></a>
<aclass="info"href="http://www.achome.cn">www.achome.cn<span>这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</span></a>
<aclass="info"href="http://www.achome.cn">www.achome.cn<span>这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</span></a>
</body>
效果演示：
运转代码框

<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;}.info:hover{background:#eee;color:#333;}.infospan{display:none}.info:hoverspan{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<span>这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</span></a><aclass="info"href="http://www.achome.cn">www.achome.cn<span>这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</span></a><aclass="info"href="http://www.achome.cn">www.achome.cn<span>这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</span></a><aclass="info"href="http://www.achome.cn">www.achome.cn<span>这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</span></a><aclass="info"href="http://www.achome.cn">www.achome.cn<span>这是我的团体blog，内里有一些网站计划和制造的东东，但愿人人常来交换</span></a></body>

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

作者: 莫相离 时间: 2015-1-18 06:41
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 再现理想 时间: 2015-1-25 23:10
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 金色的骷髅 时间: 2015-2-4 13:37
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 海妖 时间: 2015-2-10 00:21
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 再见西城 时间: 2015-2-28 11:16
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 山那边是海 时间: 2015-3-9 23:20
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 只想知道 时间: 2015-3-17 03:10
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 小妖女 时间: 2015-3-23 18:14
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

欢迎光临仓酷云 (http://ckuyun.com/)

Powered by Discuz! X3.2