码迷,mamicode.com
首页 > Web开发 > 详细

div+css实现效果和

时间:2015-02-26 10:05:27      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:css   html   html5   jquery   javascript   

<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>
技术分享技术分享

div+css实现效果和

标签:css   html   html5   jquery   javascript   

原文地址:http://blog.csdn.net/u012651389/article/details/43939489

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!