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

html+css实现感恩节祝福

时间:2015-02-26 10:06:45      阅读:321      评论:0      收藏:0      [点我收藏+]

标签:js   html5   html   css   jquery   

<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 0px;pasdding:0px 0px;}
		body{background:#FFCB7D}
		#Mbackground{width:1300px;height:650px;margin:6px auto;
			border:1px solid #000;border-radius:4px;box-shadow:1px 1px 5px #FFF ;position:relative;}
		#Mbackground img{width:1300px;}
		
		#Mbackground .title{width: 400px;
				height: 70px;
				border: 1px solid rgba(21, 84, 236, 0.68);
				position: absolute;
				left: 480px;
				top: 10px;
				border-radius: 15px;
				box-shadow: 1px 1px 5px rgba(234, 68, 13, 0.8);}
		#Mbackground .title h2{color: rgba(8, 11, 68, 0.8);
				border-radius: 15px;
				text-align: center;
				line-height: 70px;
				box-shadow: 1px 1px 5px rgba(210, 53, 11, 0.5);}
		
		#Mbackground .fit{width:450px;height:430px;position: absolute;left:86px;top:170px;
			border-radius:10px;overflow:hidden;}
		#Mbackground .fit img{width:450px;height:440px;
			opacity:0.96;
			filter:alpha(opacity=3);
			-moz-opacity:0.96;position:absolute;}
			
		#Mbackground .put{width: 450px;border: 1px solid #F00;overflow:hidden;
				position: absolute;left: 86px;top: 108px;box-shadow:1px 1px 5px #FFCC33;border-radius:10px;}
		#Mbackground .put .tit{width:450px;height:59px;/*border:1px solid #F00;*/
			position:absolute;overflow:hidden;border-bottom:1px solid #000;}
		#Mbackground .put .tit img{width:459px;height:59px;margin:0px -5px;}
		#Mbackground .put ul{width: 450px;list-style:none;padding:58px 0px;border-radius:10px;
			position:relative;}
		#Mbackground .put ul li{width:450px;height:70px;border-radius:10px;margin:0px 3px;
			border-bottom: 1px solid rgba(11, 13, 147, 1);overflow:hidden;
			box-shadow: 1px 1px 3px #5C1795;position:relative;}
		#Mbackground .put ul li h4{display:block;line-height:27px;padding:6px 0px;
			text-align:center;
			font-family:"微软雅黑";margin:2px 3px;
			text-indent:1em;color:rgba(128, 10, 55, 1);}
		#Mbackground .put ul li img{display:block;width:440px;height:280px;padding:0px 3px;
			border-radius:5px;
			box-shadow:0px 0px 10px #rgba(0,0,0,1)}
		/*#Mbackground .put ul li:nth-child(1){height:70px;border-radius:5px;
			box-shadow:0px 0px 10px #rgba(0,0,0,1);}*/
		#Mbackground .put ul:hover li{height:70px;}
		#Mbackground .put ul li:hover{background:#F4668A;width:440px;height:auto}
		#Mbackground .put ul li .scale{width:440px ; height:200px ;border-radius:10px;
			background:rgba(0,0,0,0.5);position:absolute;top:100px;text-align:center;
			transform:translate(-210px);}
		#Mbackground .put ul li .scale h3{text-align:center;line-height:60px;color:#FFF;}
		#Mbackground .put ul li .scale p{font-size:15px;font-family:"微软雅黑";margin:3px 15px ;
			color:#FFF;
			line-height:24px ;text-indent:2em;/*首行缩进*/}
		#Mbackground .put ul li:hover .scale{transform:translateX(0px);
			transition:transform 800ms ease-out;}
		#Mbackground .puty ul li :hover{transform:scale(1.5);}
		
		#Mbackground .ply{width: 200px;
				height: 500px;
				border: 1px solid rgba(224, 221, 21, 1);
				position: absolute;
				overflow: hidden;
				left: 1039px;
				top: 48px;
				box-shadow: 1px 1px 5px rgba(224, 54, 18, 1);
				border-radius: 10px;}
		#Mbackground .ply ul{display:block;list-style:none;margin:0px 0px;
			padding: 0px 0px;overflow:hidden;position:relative;
					animation:mylist 25s linear infinite;}
		#Mbackground .ply ul:hover{animation-play-state:paused;cursor:pointer;}
		#Mbackground .ply ul li{width:200px;height:100px;border-bottom:1px solid #FFF;border-radius: 10px;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, .7);margin:0px 0px;overflow:hidden;position:relative;}
		#Mbackground .ply ul li img{width:197px;height:97px;overflow:hidden;margin:2px 02px;position:absolute;}
	    #Mbackground .ply  ul li p{width:100%;height:0px;
	    	background: none repeat scroll 0% 0% rgba(239, 28, 206, 0.5);
			position: absolute;
			border-top: 2px solid #ED9301;
	    	border-radius:5px;line-height:10px;
	    	left:0px;bottom:0px;text-align:center;color:#FDE9CC;
	    	font-family:"微软雅黑";font-size:16px;}
		 @keyframes mylist{
	      from{top:0px;}
	      to{top:-1210px;}
	     }
	</style>
  </head>
  
  <body>
   <!-- div盒子模型 -->
   	<div id="Mbackground">
			<img src="img/a2.jpg"/>
			
		<div class="title">
			<h2> 感恩节,希望身边的你和朋友快乐!</h2>
		</div>
		<div class="fit">
			<img src="img/pic2.jpg"/>
		</div>
		<div class="put">
				<div class="tit"><img src="img/img/hover.jpg"/></div>
			<ul>
				<li>
					<h4>和大家认识了这些日子里,不少惹你、身边的朋友生气,和你说声对不起谢谢你对我的帮助,和支持我为你做的太少</h4>
					<img src="img/a3.jpg"/>
					 <div class="scale">
						<h3>LOVE--y.y--晓宇!!</h3>
						<p>我会努力不惹你生气的,也许我现在什么都做不好,但是我会努力,
						希望你开心,快乐,好好照顾自己,我是讨厌鬼,对不起老惹你生气。
						我不是故意的,开心啊,节日快乐!</p>
					</div>
				</li>
				<li>
					<h4>你们帮我渡过了,离开实验室还有的那些退费的日子,谢谢你和我的好朋友</h4>
					<img src="img/a4.jpg"/>
					 <div class="scale">
						<h3>LOVE--y.y--晓宇!!</h3>
						<p>我会努力不惹你生气的,也许我现在什么都做不好,但是我会努力,
						希望你开心,快乐,好好照顾自己,我是讨厌鬼,对不起老惹你生气。
						我不是故意的,开心啊,节日快乐!</p>
					</div>
				</li>
				<li>
					<h4>在这里感谢身边的你,和身边的老师同学谢谢你们对我的鼓励和支持</h4>
					<img src="img/a1.jpg"/>
					 <div class="scale">
						<h3>LOVE--y.y--晓宇!!</h3>
						<p>我会努力不惹你生气的,也许我现在什么都做不好,但是我会努力,
						希望你开心,快乐,好好照顾自己,我是讨厌鬼,对不起老惹你生气。
						我不是故意的,开心啊,节日快乐!</p>
					</div>
				</li>
				<li>
					<h4>在这里希望父母,老师,兄弟,朋友,同学,身体健康天天开心</h4>
					<img src="img/a5.jpg"/>
					 <div class="scale">
						<h3>LOVE--y.y--晓宇!!</h3>
						<p>我会努力不惹你生气的,也许我现在什么都做不好,但是我会努力,
						希望你开心,快乐,好好照顾自己,我是讨厌鬼,对不起老惹你生气。
						我不是故意的,开心啊,节日快乐!</p>
					</div>
				</li>
				<li>
					<h4>天气变凉了,希望大家多穿点衣服,注意身体,好好的照顾自己,嘻嘻,美好每天</h4>
					<img src="img/w2.jpg"/>
					 <div class="scale">
						<h3>LOVE--y.y--晓宇!!</h3>
						<p>我会努力不惹你生气的,也许我现在什么都做不好,但是我会努力,
						希望你开心,快乐,好好照顾自己,我是讨厌鬼,对不起老惹你生气。
						我不是故意的,开心啊,节日快乐!</p>
					</div>
				</li>
				<li>	
					<h4>希望大家快乐, 幸福家里的老人幸福,希望大家一切都好,天天开心<br></br></h4>
					<img src="img/w3.jpg"/>
					 <div class="scale">
						<h3>LOVE--y.y--晓宇!!</h3>
						<p>我会努力不惹你生气的,也许我现在什么都做不好,但是我会努力,
						希望你开心,快乐,好好照顾自己,我是讨厌鬼,对不起老惹你生气。
						我不是故意的,开心啊,节日快乐!</p>
					</div>
				</li>
				
			</ul>
		</div>
		<div class="ply">
			<ul>
				<li>
					<img src="img/img/img/2.jpg"/>
					<p>cxv</p>
				</li>
				<li><img src="img/img/img/3.jpg"/>	<p>感恩节快乐</p></li>
				<li><img src="img/img/img/4.jpg"/>	<p>Happy</p></li>
				<li><img src="img/img/img/s3.png"/>	<p>感恩节快乐</p></li>
				<li><img src="img/img/img/s4.png"/>	<p>Happy</p></li>
				<li><img src="img/img/img/s5.png"/>	<p>感恩节快乐</p></li>
				<li><img src="img/img/img/s6.jpg"/>	<p>Happy</p></li>
				<li><img src="img/img/img/a1.jpg"/>	<p>感恩节快乐</p></li>
				<li><img src="img/img/img/a3.jpg"/>	<p>Happy</p></li>
				<li><img src="img/img/img/a4.jpg"/>	<p>感恩节快乐</p></li>
				<li><img src="img/img/img/pic4.jpg"/>	<p>Happy</p></li>
				<li><img src="img/img/img/pic5.jpg"/>	<p>感恩节快乐</p></li>
				<li><img src="img/img/img/pic6.jpg"/>	<p>Happy</p></li>
				<li><img src="img/img/img/pic8.jpg"/>	<p>感恩节快乐</p></li>
				<li><img src="img/img/img/pic9.jpg"/>	<p>Happy</p></li>
				<li><img src="img/img/img/w1.jpg"/>	<p>感恩节快乐</p></li>
				<li><img src="img/img/img/w2.jpg"/>	<p>Happy</p></li>
				<li><img src="img/img/img/w3.jpg"/>	<p>感恩节快乐</p></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.js"></script>
  	<script type="text/javascript">
  		$("#Mbackground .ply ul li").hover(
  			function(){
  				$(this).find("p").stop().animate(
  					{height:"18px",paddingTop:"6px"},300
  				);
  			},
  			function(){
  				$(this).find("p").stop().animate(
  					{height:"0px",paddingTop:"0px"},300
  				);
  			}
  		);</script>
  </body>
</html>
</span></strong>
技术分享技术分享技术分享

html+css实现感恩节祝福

标签:js   html5   html   css   jquery   

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

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