html+css实现感恩节祝福
浏览数：28 /
时间：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 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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
