div+css实现效果和
浏览数：15 /
时间：2015年06月09日
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{margin:0px;padding:0px}
#header{width:1300px;height:37px;border:1px solid #F00;margin:0px auto;
box-shadow:3px 2px 15px #000000;border-radius:3px;overflow:hidden;
color:#330066;font-size:20px;font-family:"微软雅黑";line-height:37px;text-align:center;}
#header a{color:#330066;text-decoration:none;display:block;}
#header a:hover{background:#FF9999;border-radius:3px;}
#header .logo{width:150px;height:37px;background:#f6f;float:left;margin:0px 5px;
box-shadow:3px 2px 15px #000000;border-radius:3px;}
#header .ad{width:200px;height:37px;background:#66f;float:left;margin-left:194px;
box-shadow:3px 2px 15px #000000;border-radius:3px;}
#header .search{width:200px;height:37px;background:#36f;float:right;margin:0px 5px;
box-shadow:3px 2px 15px #000000;border-radius:3px;}
#nav{width:1300px;height:37px;background:#9f6;margin:4px auto;
box-shadow:2px 2px 10px #000000 ;border-radius:7px;
color:#000066;font-size:12px;line-height:37px;text-align:center;
position:relative;}
#nav ul{margin:0px 48px;}
#nav ul li{list-style:none;width:94px;height:40px;background:#ff6;float:left;
box-shadow:2px 2px 15px #000000;margin:3px 3px;border:2.5px solid #453;overflow:hidden;
border-radius:10px;
opacity:0.8;
filter:alpha(opacity=3);
-moz-opacity:0.8;
position:relative;}
#nav ul li p{width:100%;height:0px;overflow:hidden;background:rgba(253,52,17,0.5);
position:absolute;left:0px;bottom:0px;
text-align:center;line-height:24px;font-size:14px;}
#nav ul li p a{font-size:16px;color:#330000;text-decoration:none;}
#center{width:1300px;margin:20px auto;border:1.5px solid #66CC33;position:relative;}
#center .Left{width:190px;height:850px;margin:20px 3px;float:left;position:absolute;
background:#FFCCCC;border:2px solid #FF0033;box-shadow:2px 2px 15px #FF0033;
border-radius:10px; overflow:hidden;}
#center .Left .title{width:190px ;height:50px ;background:#FFCCCC url("img/nav_bg.png")no-repeat 13px 18px;
font-size:16px;color:#660033;font-family:"微软雅黑";line-height:50px;text-indent:45px;overflow:none;
/*border:2px solid #330066 ;*/}
#center .Left ul{margin:0px 0px;border-top:2px solid #330066}
#center .Left ul li{width:190px;height:70px ;border-bottom:2px solid #330066 ;
list-style-type:none;position:relative;paddding-left:0px}
#center .Left ul li h3{height:40px;width:180px;color:#0000;
/*font-weight:100;*/line-height:40px;text-indext:15px;text-align:center;}
#center .Left ul li p{font-size:16px;color:#97D2F7;font-family:"微软雅黑";text-indent:15px}
#center .Left ul li p a{font-size:15px;color:#000033;text-decoration:none;text-align:center;
margin:0px 6px;}
#center .list {width:980px;margin:20px 200px;background:#FFCC66;position:absolute;float:left;
border:2px solid #99CC33;box-shadow:2px 2px 15px #99CC33;border-radius:10px;}
#center .list .box{
width:210px;height:270px;overflow:hidden;
border:2px solid #e93d68;
border-radius:20px; box-shadow:2px 2px 15px #000000;
display:inline-block/*行类会计元素*/;
left:27px;
margin:5px 5px;
overfolw:hidden;
position:relative;}
#center .list .box img{width:210px;height:270px;}/*透明*/
#center .list .box:hover img{transform:scale(1.3);
transition:transform 800ms ease-out}/*放大缩小*/
#center .list .box .scale{width:210px ; height:270px ;
background:rgba(0,0,0,0.5);position:absolute;top:0px;
color:#FFF;transform:translate(-210px);}
#center .list .box .scale h3{text-align:center;line-height:60px;}
#center .list .box .scale p{font-size:15px;margin:3px 15px ;line-height:24px ;text-indent:2em;/*首行缩进*/}
#center .list .box:hover .scale{transform:translateX(0px);
transition:transform 800ms ease-out;}
#center .right{width:110px;height:850px;margin:20px 1187px;float:left;position:absolute;
background:#99FF66;border:2px solid #FF0033;
box-shadow:2px 2px 15px #FF0033;;border-radius:10px}
</style>
</head>
<body>
<div id="header">
<div class="logo"><a href="#">心愿</a></div>
<div class="ad"><a href="#">坚持</a></div>
<div class="search"><a href="#">梦想</a></div>
</div>
<div id="nav">
<ul>
<li>王琪是个坏孩子<p><a href="#">加油</a></p></li>
<li>不爱学习<p><a href="#">加油</a></p></li>
<li>非常的懒<p><a href="#">加油</a></p></li>
<li>我很肉肉<p><a href="#">加油</a></p></li>
<li>办事拖拉<p><a href="#">加油</a></p></li>
<li>学习不努力<p><a href="#">加油</a></p></li>
<li>爱发小脾气<p><a href="#">加油</a></p></li>
<li>没有目标<p><a href="#">加油</a></p></li>
<li>游行侠<p><a href="#">加油</a></p></li>
<li>该打屁股<p><a href="#">加油</a></p></li>
<li>王琪是个小笨蛋<p><a href="#">加油</a></p></li>
</ul>
</div>
<div id="center">
<div class="list">
<div class="box">
<img src="img/01.jpg"/>
<div class="scale">
<h3>wo--倔强--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/005.jpg"/>
<div class="scale">
<h3>wo--倔强--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/09.jpg"/>
<div class="scale">
<h3>wo--倔强--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/06.jpg"/>
<div class="scale">
<h3>wo--倔强--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/08.jpg"/>
<div class="scale">
<h3>wo--倔强--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/0003.jpg"/>
<div class="scale">
<h3>wo--倔强--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/07.jpg"/>
<div class="scale">
<h3>wo--倔强--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/03.jpg"/>
<div class="scale">
<h3>wo--萌哒哒--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/005.jpg"/>
<div class="scale">
<h3>wo--萌哒哒--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/002.jpg"/>
<div class="scale">
<h3>wo--萌哒哒--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/001.jpg"/>
<div class="scale">
<h3>wo--萌哒哒--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
<div class="box">
<img src="img/4.jpg"/>
<div class="scale">
<h3>wo--萌哒哒--王琪!!</h3>
<p>我会努力的，也许我现在什么都不行，但是我会告诉你，你可以
骂我，瞧不起我，打倒我，但我不会屈服，我会让你看到什么是魔鬼，
我会默默的努力，一定会成功的！</p>
</div>
</div>
</div>
<div class="Left">
<div class="title">All me</div>
<ul>
<li>
<h3>In my Life</h3>
<p>
<a href="#">遥望</a>
<a href="#">如果</a>
<a href="#">眼神</a>
</p>
</li>
<li>
<h3>All Dream</h3>
<p>
<a href="#">冒雨天</a>
<a href="#">昨天</a>
<a href="#">从前</a>
</p>
</li>
<li>
<h3>Hands Up</h3>
<p>
<a href="#">飞花</a>
<a href="#">寂寞</a>
<a href="#">落月</a>
</li>
<li>
<h3>Tack Ti</h3>
<p>
<a href="#">几朵</a>
<a href="#">诉说</a>
<a href="#">折磨</a>
</p>
</li>
<li>
<h3>Slow</h3>
<p>
<a href="#">交错</a>
<a href="#">宝贝</a>
<a href="#">蓝天</a>
</p>
</li>
<li>
<h3>Make up</h3>
<p>
<a href="#">说吧</a>
<a href="#">琥珀</a>
<a href="#">骄傲</a>
</p>
</li>
<li>
<h3>Man Ban</h3>
<p>
<a href="#">云朵</a>
<a href="#">蝴蝶</a>
<a href="#">小何</a>
</p>
</li>
</ul>
</div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#nav ul li").hover(
function(){
$(this).find("p").stop().animate(
{height:"24px",paddingTop:"6px"},300
);
},
function(){
$(this).find("p").stop().animate(
{height:"0px",paddingTop:"0px"},300
);
}
);
</script>
</body>
</html>
</span></strong>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
