前端html+css练习

浏览数：25 / 时间：2015年06月09日

改变背景：background-image:Url(Images/water.png);

Html+CSS实例效果(1):鼠标滑过改变文字

如图效果技术分享

代码如下

html部分:

<div >
    <ul id="Menu">
     <li><a href="#"><span>HOME</span>首页</a></li>

     <li><a href="#"><span>地址</span>Address</a></li>
    </ul>
</div>

css部分:

#Menu{
    width: 500px;margin: 50px auto; border: 1px solid #ccc;overflow: hidden;
}
#Menu ul{
    margin: 0;padding: 0;
}
#Menu li{
    width: 100px;height: 22px;line-height: 22px;float: left;overflow: hidden;text-align:center; list-style: none;}

#Menu span{display: block;margin-top: -22px;}
#Menu a:hover{padding-top: 22px;}
#Menu a{ width:100px;float:left;overflow:hidden;}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log com 代码 src http html it class style log com 代码 src http html it

相关文章

随机文章

您可能还喜欢

您可能还喜欢