css3技术

position:relativeabsolute无法冲破_div+css布局教程(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-28 11:40 我要评论( )

ul lispan第一块/span/li lispan第二块/span/li lispan第三块/span/li lispan第四块/span/li lispan第五块/span/li /ul CSS可以改成这样: Example Source Code [] *{margin:0; padding:0; list-style:none;} li {h

<ul>
<li><span>第一块</span></li>
<li><span>第二块</span></li>
<li><span>第三块</span></li>
<li><span>第四块</span></li>
<li><span>第五块</span></li>
</ul>


CSS可以改成这样:

div css xhtml xml Example Source Code

Example Source Code []

*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}
li:hover {position:relative; z-index:1;}
li span {width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; display:none;}
li:hover span {display:block;}


div css xhtml xml Source Code to Run

Source Code to Run []


[ 可先修改部分代码 再运行查看效果 ]



原始阅读:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评