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支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
页:
[1]