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>

相关推荐

ganyouxianjava / 0评论 2012-05-31