css布局及鼠标悬浮下拉框展现
木四小哥 2013-05-14
<!DOCTYPE html>
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="../js/jquery.js"></script>
</header>
<style>
*{
margin:0;
padding:0;
text-align:center;
}
.contain-out{
margin:30px;
padding:5px;
width:600px;
height:160px;
border:1px solid yellow;
}
.img-contain{
float:left; /* 右侧向右浮动，需要该块级元素左浮动，否则将占整行，右侧被挤下去 */
width:18%;
height:100px;
background-color:#E8E8E8;
margin:10px;
padding:20px 0;
text-align:center;
border:1px solid black;
}
.info-contain{
float:right;
width:70%;
height:140px;
margin:10px;
border:1px solid green;
padding:5px 10px;
}
.content1{
float:left;
width:70%;
height:30px;
margin:5px 2px 2px;
border:1px solid yellow;
}
.content2{
float:left;
width:70%;
height:50px;
margin:5px 2px 2px;
border:1px solid yellow;
}
.content3{
float:left;
width:100%;
height:25px;
margin:5px 2px 2px;
border:1px solid yellow;
}
span{
height:20px;
line-height:20px;
display:inline-block;
font-size:12px;
}
.span-left{
float:left;
width:auto;
margin:0px 15px;
}
.span-right{
float:right;
margin-right:0;
}
.more{
float:right;
margin-right:15px;
width:28px;
height:30px;
position:relative;
}
.more-detail{
display:none;
position:absolute;
width:40px;
height:50px;
border:1px solid orange;
margin-top:-2px;
background-color:#E8E8E8;
z-index:0;
}
.more-tip {
background-color:white;
z-index:101;
position: relative;
}
.hover .more-tip {
border:1px solid orange;
border-bottom:0px;
background-color:#E8E8E8;
}
.hover .more-detail {
display:block;
}
</style>
<body>
<div class="contain-out">
<div class="img-contain">img</div>
<div class="info-contain">
<div class="content1">
<p>名称</p>
</div>
<div class="content2">
<p>微博列表</p>
</div>
<div class="content3">
<span class="span-left"> 信息。。。。。。。。。</span>
<div class="more" id="moreDiv">
<span class="more-tip">更多</span>
<div class="more-detail">
<p>1....</p>
<p>2....</p>
</div>
</div>
<span class="span-right"><span>评论|</span><span>转发|</span></span>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$("#moreDiv").hover(
function(){
$("#moreDiv").addClass("hover");
},
function(){
$("#moreDiv").removeClass("hover");
});
});
</script>
</html>
