html+css实现感恩节祝福

<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>

时间： 2024-11-05 15:49:58

html+css实现感恩节祝福的相关文章

原来今天是感恩节-Linux基础继续&MySQL和PHP

hi 原来今天是感恩节.虽然一直没有过这个节日的习惯,但仅仅是听到感恩的消息,都能想到一幅幅画面.愿大家安好! 下午开题会议还是有所收获,悄悄的,就变向那个不喜欢自己的人了. 一.Linux基础(二) -----Linux常用命令(二)----- 3.文件搜索命令 3.1 文件搜索命令locate --优点: 搜索速度快(在学习中,要把眼光放远.放大一点,设想数据量很大的情况或是规模很大的问题的情况) locate 文件名 --工作原理: 在后台数据库按文件名搜索所以,新创建的文件往往搜索不到

[岁月随想]感恩节前夕

上周末去教堂,牧师问来聚会的孩子们,接下来的一个礼拜,你们要感谢上帝什么? 有一个孩子回答,“感谢他给我们氧气”.是的,虽然免费,但是没了它,我们就都完了.真的要感谢上帝给我们氧气. 另一个孩子回答,“感谢家人和他们给我的爱”.是的,饶恕也许不是一件容易的事情,但让自己尝试饶恕吧,感谢身边爱你的人和你爱的人. 生活中是否还有很多你想不起来的.忘记了的该感谢的人或事物呢? 永存一颗感恩的心吧! 今天早上无意间看到了李娜告别网坛的信,长长的感恩清单,让人唏嘘! 提前祝各位感恩节快乐! http://

感恩节快乐

感恩节哈,得说两句感谢的话,感谢慢热的我们俩最终越来越近,感谢我们可以做一对越来越有爱的小姐妹,感谢越接触越发现你是我喜欢的妹纸,Thank you~ —— 正能量小烨儿

“感恩节现象”正在蔓延，我们该如何抉择？

编者导读:"感恩节现象"字面上是指在美国传统节日-感恩节当天,部分行业要求员工加班不休息的情况.之后逐渐蔓延到很多行业与领域,泛指休息日或者节庆日等非上班期间加班的现象. 原作者标题:过度的沉溺于工作当中会让我们变得愚蠢.抑郁.损害健康甚至影响我们职业生涯--我们又该如何选择呢? 当Kmart宣布感恩节当天早上六点营业的时候,消息一发出,就震惊了整个国家.尽管这让寻求便宜货的人异常兴奋,但是许多人却对此持质疑态度.近年来,类似"感恩节蔓延"的现象引起了愈来愈多员工的

2014年感恩节,国外主机超低价购买教程,新手相关问题

2014年感恩节,11月27日!主机测评提醒各位关注国外域名.国外虚拟主机.国外VPS.国外服务器的朋友,2014年感恩节这天是你在2014年以及2015年的感恩节之前这段时间内最佳的购买时间,商家们一般会将原价大打折扣,多数可能降价到只有原价的1-5折.心动不如行动,准备行动起来吧! 2014年感恩节,购买国外的东西,需要注意些什么? 第一,支付工具,多数情况下商家会同时支持信用卡和paypal,其他诸如比特币等非主流这里不介绍了浪费时间.我这里说说这两种支付方式需要注意的事项: 信用卡:一般

感恩节QAD带你“吃鸡”

如果用一种颜色来形容11月,会是什么颜色?我会说是金色!因为落叶是金色的,在寒冬中那一缕微弱的阳光是金色的,还有今天的感恩节也是金色的. 说到感恩节,小编最先想到的就是火鸡.吃火鸡的习俗从二十世纪50年代就开始盛行,起初是为了盛情款待印第安人而设定的美食,但随着时代的迁徙,吃火鸡已经成为了感恩节必不可少的习俗之一. 看到这里你可能以为这是个美食推文,你想多了!今天我们要讲的是大数据"吃鸡"的话题! 玩过绝地求生的朋友们肯定不言而喻能理解"吃鸡"就是争夺第一的意思.在

获知某一年的母亲节，父亲节和感恩节日期

完成这个要求之前,可以先参考另外一个函数<获取当月的天数列表>https://www.cnblogs.com/insus/p/10837900.html: 然后要知道标题三个节日的常识,母亲节在每年5月份的第二个星期天,父亲节在每年6月份的第三个星期天,而感恩节是在每年的11月份第四个星期的星期四. 知道这些常识就好办了. 写一个SQL的自定义函数: SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ====================

2014年度辛星解读css第四节

接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了css之后再完好它. **************超链接************* 1.我们讲伪类的时候已经讲到了,一个超链接能够有link(正常状态).visited(已经訪问过).hover(获得鼠标焦点)active(被鼠标点击中)这样四个状态,我们前面也分别设置过不同的颜色了,使用选择器:伪类的形式. 2.我们还能够使用background

巧用CSS文件愚人节恶搞(转)

明天就是4月1日愚人节了,也就是那个可适度开玩笑.整蛊的日子了.如果你想和那些要上网的朋友或同事开个极客式玩笑,那就来试试这个国外网友Wes Bos分享的 CSS 文件吧. 一.打开浏览器的 Custom.css 文件本文以 Chrome 为例(CSS 修改后立即生效),进入同事或朋友的电脑,按下面方式打开 Custom.css 文件 Mac:~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.