devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML 网页表白，520

作者：不正经 | 2024-02-20 18:52:48

赞

踩

网页表白

共有三款表白，闲yu 更优惠，搜索neo表白，另外还可以提供部署服务，生成您的专属链接。

效果1 ：

效果2：

效果3：

 

  1. <!DOCTYPE html>
  2. <html  xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en"  lang="en">
  3. <head>
  4. <title>唯美 </title>		
  5. <meta name="keywords" content=" ">
  6. <meta name="description" content="   ">
  7. <meta name="author" content="www.">	
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9.   <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  10.   <link rel="shortcut icon" href="index/images/favicon.ico">
  11.   <link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
  12.   <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  13.   <link href="css/prettyPhoto.css" rel="stylesheet" />
  14.   <script type="text/javascript" src="js/jquery.min.js" ></script>
  15.   <script type="text/javascript" src="js/content_switch.js"></script>
  16.   <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  17.   <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
  18.   <script type="text/javascript" src="js/jquery-ui.js"></script>
  19.   <script type="text/javascript" src="js/cScroll.js"></script>
  20.   <script src="js/jquery.cycle.all.latest.js" type="text/javascript"></script>
  21.   <script src="js/jquery.color.js" type="text/javascript"></script>
  22.   <script type="text/javascript" src="js/script.js"></script>
  23.   <script type="text/javascript" src="js/functions.js"></script>
  24.   <script src="js/prettyPhoto.js"></script>
  25.   <!--[if lt IE 9]>
  26.   	<script type="text/javascript" src="./js/html5.js"></script>
  27.     <link rel="stylesheet" href="./css/ie.css" type="text/css" media="all">
  28.   <![endif]-->
  29. 	<!--[if lt IE 8]>
  30. 		<div style=' clear: both; text-align:center; position: relative;'>
  31. 			<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a>
  32. 		</div>
  33. 	<![endif]-->
  34. 	<body onpaste="return false" ondragstart="return false" onmouseover="window.status='';return true" oncopy="return false;">
  35. 	<frameset> <frame src="index.html"> </frameset>
  36. <script> 
  37. function stop(){ 
  38. alert('宝贝，我爱你！');
  39. return false; 
  40. } 
  41. document.oncontextmenu=stop; 
  42. </script>
  43. <body onselectstart="return false" onpaste="return false" oncopy="return false;" 
  44. oncut="return false;" >
  45. </a>
  46.     <script>
  47. 	
  48.         function checkhtml5()
  49.         {
  50.             if ($.browser.msie  && parseInt($.browser.version, 10) < 9) {
  51.                 document.body.innerHTML="<div style=' clear: both; text-align:center; position: relative; height: 50px; margin-top: 30px; padding: 20px; background-color: red; color: white; font-size:20px;'>你的浏览器非常落后，不支持 HTML5!<br/>请使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+ 其中任意一款浏览器访问此页面。</a></div>";
  52.  
  53.             }
  54.         }
  55.     </script>
  56.     <style>
  57.         a.wb_sina {
  58.             float:left;
  59.             margin-top:20px;
  60.             margin-left:15px;
  61.             display:inline-block;
  62.             padding:4px 10px;
  63.             border-radius:3px;
  64.             background-color:#e55345;
  65.             background-image:-moz-linear-gradient(top,#e96249,#e03c40);
  66.             background-image:-ms-linear-gradient(top,#e96249,#e03c40);
  67.             background-image:-webkit-gradient(linear,0 0,0 100%,from(#e96249),to(#e03c40));
  68.             background-image:-webkit-linear-gradient(top,#e96249,#e03c40);
  69.             background-image:-o-linear-gradient(top,#e96249,#e03c40);
  70.             background-image:linear-gradient(top,#e96249,#e03c40);
  71.             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e96249',endColorstr='#e03c40',GradientType=0);
  72.             background-repeat:repeat-x;
  73.             text-shadow:0 -1px 0 rgba(0,0,0,.5);
  74.             border:1px solid #cf2b28;
  75.             color:#fff!important;
  76.             box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2);
  77.         }
  78.         a.wb_sina:hover {
  79.             background-image:-moz-linear-gradient(top,#e03c40,#e96249);
  80.             background-image:-ms-linear-gradient(top,#e03c40,#e96249);
  81.             background-image:-webkit-gradient(linear,0 0,0 100%,from(#e03c40),to(#e96249));
  82.             background-image:-webkit-linear-gradient(top,#e03c40,#e96249);
  83.             background-image:-o-linear-gradient(top,#e03c40,#e96249);
  84.             background-image:linear-gradient(top,#e03c40,#e96249);
  85.             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e03c40',endColorstr='#e96249',GradientType=0);
  86.         }
  87.         a.wb_sina span {
  88.             display:inline-block;
  89.             vertical-align:-5px;
  90.             margin-right:7px;
  91.             height:20px;
  92.             width:24px;
  93.             background:url(./images/weibo.png) no-repeat;
  94.         }
  95.         a.wb_tencent {
  96.             float:left;
  97.             margin-top:20px;
  98.             margin-left:15px;
  99.             display:inline-block;
  100.             padding:4px 10px;
  101.             border-radius:3px;
  102.             background-color:#0e7fcc;
  103.             background-image:-moz-linear-gradient(top,#1288d4,#0771c1);
  104.             background-image:-ms-linear-gradient(top,#1288d4,#0771c1);
  105.             background-image:-webkit-gradient(linear,0 0,0 100%,from(#1288d4),to(#0771c1));
  106.             background-image:-webkit-linear-gradient(top,#1288d4,#0771c1);
  107.             background-image:-o-linear-gradient(top,#1288d4,#0771c1);
  108.             background-image:linear-gradient(top,#1288d4,#0771c1);
  109.             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1288d4',endColorstr='#0771c1',GradientType=0);
  110.             background-repeat:repeat-x;
  111.             text-shadow:0 -1px 0 rgba(0,0,0,.5);
  112.             border:1px solid #0D6EB8;
  113.             color:#fff!important;
  114.             box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2);
  115.         }
  116.         a.wb_tencent:hover {
  117.             background-color:#0e7fcc;
  118.             background-image:-moz-linear-gradient(top,#0771c1,#1288d4);
  119.             background-image:-ms-linear-gradient(top,#0771c1,#1288d4);
  120.             background-image:-webkit-gradient(linear,0 0,0 100%,from(#0771c1),to(#1288d4));
  121.             background-image:-webkit-linear-gradient(top,#0771c1,#1288d4);
  122.             background-image:-o-linear-gradient(top,#0771c1,#1288d4);
  123.             background-image:linear-gradient(top,#0771c1,#1288d4);
  124.             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0771c1',endColorstr='#1288d4',GradientType=0);
  125.         }
  126.         a.wb_tencent span {
  127.             display:inline-block;
  128.             vertical-align:-5px;
  129.             margin-right:7px;
  130.             height:20px;
  131.             width:24px;
  132.             background:url(./images/weibo.png) no-repeat 0 -20px;
  133.         }
  134.         #abox
  135.         {
  136.             position: fixed;
  137.             _position: absolute;
  138.             right: 15px;
  139.             z-index: 99999999;
  140.         }
  141.     </style>
  142. </head>
  143.  
  144. <body onLoad="checkhtml5()">
  145. <div id="abox">
  146. </div>
  147. <div class="page_spinner">
  148.     <div></div>
  149. </div>
  150. <div class="over">
  151. 	<div class="centre">
  152. 		<div class="main">
  153. 			<!--header -->
  154. 	  <header>
  155. 				<h1><span id="logo"><img src="images/logo1.png" alt="" usemap="#logo"></span></h1>
  156. 				<nav class="menu">
  157. 					<ul id="menu">
  158. 						<li id="nav1"><img src="images/nav1.png" alt=""><span>爱的宣誓</span></li>
  159. 						<li id="nav2"><img src="images/nav2.png" alt=""><span>恋爱历程</span>						</li>
  160. 						<li id="nav3"><img src="images/nav3.png" alt=""><span>絮叨絮叨</span></li>
  161. 						<li id="nav4"><img src="images/nav4.png" alt=""><span>祝福我们</span></li>
  162. 						<li id="nav5"><img src="images/nav5.png" alt=""><span>爱的映像</span></li>
  163. 						<li id="nav6"><img src="images/nav6.png" alt=""><span>时光沙漏</span></li>
  164. 					</ul>
  165. 				</nav>
  166. 				<img src="images/spacer.gif" alt="" id="navigation" usemap="#navigation">
  167. 				<map name="navigation" class="navigation">
  168. 	    </map>
  169. 				<map name="logo" class="map_logo"></map>
  170. 			</header>
  171. 			<!--header end-->
  172. 			<!--content -->
  173. 			<map name="back" class="map_back"></map>
  174. 			<article id="content">
  175. 				<ul>
  176. 					<li id="page_Home">
  177. 						<img src="images/bg_content.png" alt="" class="bg_cont">
  178. 						<span class="back"><img src="images/nav1.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
  179. 						<div class="pad">
  180. 							<h2>爱的宣誓</h2>
  181.                             人物：浟佳 &amp; 宝贝<br />
  182.                             不在乎曾经拥有，只在乎天长地久。<br />
  183.                             爱，就要说出来！<br />
  184.                             再美好的回忆，也只是回忆；<br />
  185.                             再美丽的诺言，不到实现的那一刻，也只是一句空话。<br/>
  186.                               -- 						</div>
  187. 					</li>
  188. 					<li id="page_About">
  189. 						<img src="images/bg_content.png" alt="" class="bg_cont">
  190. 						<span class="back"><img src="images/nav2.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
  191. 						<div class="pad">
  192. 							<h2>恋爱历程</h2>
  193. 							<div class="relative">
  194. 								<div class="scroll">
  195.                                     <span>人物：浟佳 &amp; 宝贝</span>
  196.                                     <p>&nbsp;&nbsp;&nbsp;&nbsp;宝贝你还记得么？</p>
  197.                                     <p>&nbsp;&nbsp;&nbsp;&nbsp;XX年X月X日。</p>
  198.                                     <p>&nbsp;&nbsp;&nbsp;&nbsp;我们在xx相遇。</p>
  199.                                     <p>&nbsp;&nbsp;&nbsp;&nbsp;然后.........</p>
  200.                                     <p>&nbsp;&nbsp;&nbsp;&nbsp;过程.........</p>
  201.                                     <p>&nbsp;&nbsp;&nbsp;&nbsp;我爱你，我会一直陪在你身边</p>
  202.                                     <p>&nbsp;&nbsp;&nbsp;&nbsp;不离不弃</p>
  203.                                     <p>&nbsp;&nbsp;&nbsp;&nbsp; -  </p>
  204. 								</div>
  205. 							</div>
  206. 						</div>
  207. 					</li>
  208. 					<li id="page_Talk">
  209. 						<img src="images/bg_content.png" alt="" class="bg_cont">
  210. 						<span class="back"><img src="images/nav3.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
  211. 						<div class="pad">
  212. 							<h2>絮叨絮叨</h2>
  213.                             <div class="relative">
  214.                                 <div class="scroll">
  215.                                     <div style="width:100%;float: left; border-bottom: 1px solid #CCCCCC;">浟佳<br/><span style="float: right"> --by </span></div>
  216.  
  217.  
  218.  
  219.                                     <div style="width:100%;float: left">分享我所知道的<br/><span style="float: right"> --by </span></div>
  220.                                 </div>
  221.                             </div>
  222. 						</div>
  223. 					</li>
  224. 					<li id="page_Message">
  225. 						<img src="images/bg_content.png" alt="" class="bg_cont">
  226. 						<span class="back"><img src="images/nav4.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
  227. 						<div class="pad">
  228. 							<h2>祝福我们</h2>
  229.                             <div class="relative">
  230.                                 <div class="scroll">
  231.  
  232.                                     <div style="min-height: 300px; padding-bottom: 50px;">
  233. <!-- 多说评论框 start -->
  234. 	<div class="ds-thread" data-thread-key="yyu" data-title="bb" data-url="http://"></div>
  235. <!-- 多说评论框 end -->
  236. <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
  237. <script type="text/javascript"> var duoshuoQuery = {short_name:"love90"}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '/static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script>
  238. <!-- 多说公共JS代码 end -->
  239.                                     </div>
  240.                                 </div>
  241.                             </div>
  242. 						</div>
  243. 					</li>
  244. 					<li id="page_Blog">
  245. 						<img src="images/bg_content.png" alt="" class="bg_cont">
  246. 						<span class="back"><img src="images/nav5.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
  247. 						<div class="pad">
  248. 							<h2>爱的映像</h2>
  249. 							<div class="relative">
  250. 								<div class="scroll">
  251. 									<ul class="gallery fancybox">
  252.                                         <li style="line-height:120px"><a href="images/uploadimage/imglsh001.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh001small.jpg" alt=""></a></li>
  253.                                         <li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt=""></a></li>
  254.                                         <li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt=""></a></li>
  255.                                         <li style="line-height:120px"><a href="images/uploadimage/imglsh001.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh001small.jpg" alt=""></a></li>
  256.                                         <li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt=""></a></li>
  257.                                         <li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt=""></a></li>
  258.                                         <li style="line-height:120px"><a href="images/uploadimage/img004.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img004small.jpg" alt=""></a></li>
  259.                                         <li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt=""></a></li>
  260.                                         <li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt=""></a></li>
  261.                                         <li style="line-height:120px"><a href="images/uploadimage/img004.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img004small.jpg" alt=""></a></li>
  262. 									</ul>
  263. 								</div>
  264. 							</div>
  265. 						</div>
  266. 					</li>
  267. 					<li id="page_Time">
  268. 						<img src="images/bg_content.png" alt="" class="bg_cont">
  269. 						<span class="back"><img src="images/nav6.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
  270. 						<div class="pad">
  271. <h2>时光沙漏</h2>
  272.                             <div id="loveHeart" style="margin-top: 30px;font-size: 25px;">
  273.                                         <span style="">宝贝你知道我爱你爱了多久了吗？</span>
  274.                                         <div id="elapseClock" style="margin: 10px 0px 10px 0px;"></div>
  275.                                 <img src="images/1.gif" />　　　　<img src="images/2.gif" /><br/><br/>
  276.                                     <div id="loveu">
  277.                                         爱：从2014-2-6开始！<br/>
  278.                                         <div class="signature" style="float: right; margin-right: 50px;">by 浟佳 </div>
  279.                                     </div>
  280.                           </div>
  281.                       </div>
  282. 				  </div>
  283. 					</li>
  284. 					
  285. 					
  286. 				</ul>
  287. 			</article>
  288. 			<!--content end-->
  289.   </div>
  290. </div>
  291. 	<div class="bg1">	
  292. 		<div class="main">
  293. 			<!--footer -->
  294. 			<footer style="line-height:20px">
  295.                 <div id="copyright">
  296.                      <a href="" target=_blank></a>  <a 
  297. href="" target=_blank></a> <script 
  298.  language="JavaScript"></script>
  299.  
  300.  
  301.  
  302.                 </object>
  303.                 </div>
  304. 				<!-- {%FOOTER_LINK} -->
  305. 			</footer>
  306. 			<!--footer end-->
  307. 		</div>
  308. 	</div>
  309. </div>
  310. <script>
  311. $(window).load(function() {	
  312. 	$('.page_spinner').fadeOut();
  313. 	$('body').css({overflow:'visible'});
  314. 	
  315. })
  316. </script>
  317.  
  318. <script type="text/javascript">//修改时光沙漏时间
  319.     var offsetX = $("#loveHeart").width() / 2;
  320.     var offsetY = $("#loveHeart").height() / 2 - 55;
  321.     var together = new Date();
  322.     together.setFullYear(2014, 02, 06);
  323.     together.setHours(17);
  324.     together.setMinutes(0);
  325.     together.setSeconds(0);
  326.     together.setMilliseconds(0);
  327.  
  328.         setTimeout(function () {
  329.             adjustWordsPosition();
  330.             startHeartAnimation();
  331.         }, 3000);
  332.  
  333.         timeElapse(together);
  334.         setInterval(function () {
  335.             timeElapse(together);
  336.         }, 500);
  337.  
  338.         adjustCodePosition();
  339.         $("#code").typewriter();
  340. </script>
  341.     <audio id="bgmMusic" src="http://www.51mp3ring.com/51mp3ring_com2/at200611121582079026.mp3" preload="auto" type="audio/mp3" autoplay loop></audio>
  342.  
  343. <!--coded by koma-->
  344.  
  345. <!--LIVEDEMO_00 -->
  346. </div>
  347.  
  348. </body>
  349. </html>

  1.  
  2. /* Left & Right alignment */
  3.  
  4. .left { float:left;}
  5. .right { float:right;}
  6. .wrapper {width:100%; overflow:hidden;}
  7. .relative{ position:relative;}
  8.  
  9. /* Global properties ======================================================== */
  10.  
  11. body{ background: url(../images/bg.jpg) no-repeat top center; border:0; font:12px 'Droid Sans', sans-serif; color:#939090; line-height:21px; min-width:946px; overflow:hidden}
  12.  
  13. .css3{border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: 0 0 4px rgba(0, 0, 0, .4); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .4); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .4); position: relative;}
  14.  
  15. .page_spinner{ position:absolute;background: url(../images/bg.gif) ; z-index:99; width:100%; height:100%; top:0; left:0}
  16. .page_spinner div{ position:absolute;background: url(../images/loader.gif) 50% 50% no-repeat;width:100%; height:100%; top:0; left:0}
  17.  
  18. .left_block{ float:left; width:220px; background:#fff;}
  19.  
  20. /* Global Structure ============================================================= */
  21.  
  22. .main {	margin: 0 auto;	width: 946px; position:relative; }
  23.  
  24. .centre{margin-top:0; position:relative;}
  25.  
  26. body, html{ height:100%;}
  27. .over{ position:relative; width:100%; overflow:hidden;min-height:100%; height:auto !important;}
  28.  
  29. .bg1{ position:absolute; left:0; width:100%; height:64px; background:url(../images/bg_footer.png) 0 0 repeat-x; bottom:0}
  30.  
  31. /* ============================= main layout ====================== */
  32.  
  33. a{ color:#939090; text-decoration: none; outline:none}
  34. a:hover{}
  35. h1{ position:absolute; top:184px; left:329px; z-index:10}
  36. h2{ font:30px 'Amatic SC', cursive; line-height:1.2em; padding:0 0 24px 0; color:#3e3434; text-align:center; letter-spacing:-3px; font-weight:bold; text-shadow:0 0 #3e3434; font-family:"微软雅黑"}
  37. h2 span{ display:block; font-size:24px; color:#766f6f; line-height:1.2em; letter-spacing:-1px; text-shadow:0 0 #766f6f; padding-bottom:4px;}
  38. p{ padding-bottom:18px;}
  39.  
  40. /* ============================= header ====================== */
  41. header{}
  42.  
  43. #logo{ display:block;}
  44. #logo img{ position:relative; top:25px; left:25px}
  45.  
  46.  
  47. .menu{}
  48. #menu {}
  49. #menu > li { position:absolute;}
  50. #menu > li > img{ position:relative; z-index:6; top:15px; left:15px;}
  51. #menu > li > span{ position: absolute; width:145px; top:82px; color:#fff; text-align:center;  left:15px; text-shadow:1px 1px rgba(0,0,0,.2); z-index:9}
  52.  
  53. #nav1{ top:105px; left:304px;}
  54. #nav2{ top:239px; left:230px;}
  55. #nav3{ top:372px; left:304px;}
  56. #nav4{ top:372px; left:458px;}
  57. #nav5{ top:239px; left:536px;}
  58. #nav6{ top:105px; left:458px;}
  59.  
  60. #navigation{ position:absolute; z-index:12; top:120px; left:245px; height:424px; width:451px;}
  61.  
  62. .submenu{ position:absolute; top:113px; left:-98px; z-index:13;}
  63. .submenu ul{ background:url(../images/bg_submenu.gif) repeat; padding:16px 5px; width:122px; position:relative; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;}
  64. .submenu li{ line-height:40px; position:relative;}
  65. .submenu a{ position:relative; color:#fff; display:block; padding:0 23px;}
  66. .submenu img{ position:absolute; width:100%; height:0; top:20px; left:0}
  67.  
  68. /* ============================= content ====================== */
  69.  
  70. #content{ height:636px; padding-bottom:64px;}
  71. #content > ul > li{ position:relative; left:225px; top:27px; width:100%;}
  72.  
  73. .bg_cont{ position:absolute; top:0; left:0; z-index:1}
  74.  
  75. .pad{ position:relative; z-index:2; left:94px; top:110px; width:388px; height:430px; font-size: 16px; line-height: 32px;}
  76.  
  77. .link1{ position:relative;}
  78. .link1 span{ position: absolute; bottom:0; left:0; width:0; height:1px;}
  79.  
  80. .back{ position:absolute; top:212px; left:163px; z-index:6}
  81. .back img{ position: relative; top:15px; left:15px;}
  82. .back a{ position:absolute; top:85px; left:15px; color:#fff; text-align:center; width:145px; text-shadow:1px 1px rgba(0,0,0,.4)}
  83.  
  84.  
  85. .color1{ color:#3e3434}
  86.  
  87. .pad_bot1{ padding-bottom:12px;}
  88. .pad_left1{ padding-left:35px;}
  89. .marg_right1{ margin-right:20px;}
  90.  
  91. #icons{ padding-top:28px; text-align:center}
  92. #icons li{ display:inline-block; margin-top:-12px; margin-right:5px;}
  93. #icons a{ display:block; position:relative;}
  94. #icons .img_act{ position:absolute; top:0; left:0}
  95.  
  96. .scroll{height:308px; width:362px; overflow:hidden;}
  97. .track{ width:22px; height:287px; padding:24px 0; top:28px !important; left:366px !important; background: url(../images/scroll_track.jpg) 0 0 no-repeat}
  98. .shuttle{ width:16px; height:16px; background: url(../images/scroll_drag.png) 0 0 no-repeat; margin-left:3px;}
  99. ._up-butt, ._down-butt{ height:0px !important;}
  100.  
  101. .gallery{}
  102. .gallery li{ float:left; margin-bottom:13px; margin-right:14px;}
  103. .gallery a{ display:block; position:relative;}
  104. .gallery .last{ margin-bottom:0;}
  105. .gallery span{ position:absolute; top:0; left:0; background:url(../images/border1.png) 0 0 no-repeat; width:100%; height:100%;}
  106.  
  107. .comments{ float:right; margin-left:20px; line-height:26px; margin-top:7px;}
  108. .comments strong{ float:left; margin-right:2px; background:url(../images/bg_comments.png) 0 0 no-repeat; color:#fff; width:40px; text-align:center; font-weight:normal}
  109.  
  110. .date{ float:left; width:41px; height:34px; background:#ececec; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; line-height:16px; color:#3e3434; padding:3px 0; text-transform:uppercase; text-align:center; margin-right:14px;}
  111.  
  112. .blog{ width:100%; height:260px; overflow:hidden; margin-bottom:15px}
  113.  
  114. .next, .prev{ float:left; color:#3e3435; line-height:24px; padding:0 7px; margin-right:9px; margin-left:10px; background-color:#ececec; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; position:relative;}
  115. .prev{ margin-left:15px;}
  116.  
  117. .pagin{ float:left;}
  118. .pagin a{ float: left; font-size:11px; width:24px; line-height:24px; color:#1b1b1b; text-align:center; margin-left:1px; margin-right:1px;background-color:#ececec; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; position:relative;}
  119.  
  120. .google_map{width:384px; height:303px;  position:relative; z-index:1; background:#fff;  margin-bottom:21px;border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; overflow:hidden;}
  121.  
  122. .col1{ width: 164px; float:left;}
  123.  
  124. /* ============================= footer ====================== */
  125.  
  126. footer { color:#000000; padding-top:21px;}
  127. footer a{ color:#000000}
  128. footer a:hover{}
  129.  
  130. .social{ float:right;}
  131. .social li{ float:left; margin-right:9px; padding-right:10px; background:url(../images/footer_line.gif) right 6px no-repeat}
  132. .social .last{ background:none; margin-right:0; padding-right:0}
  133. .social a{ position:relative;}
  134. .social span{ position: absolute; bottom:0; left:0; width:0; height:1px;}
  135.  
  136.  
  137.  
  138. /* ============================= forms ============================= */
  139.  
  140. #ContactForm{}
  141. #ContactForm .wrapper{ overflow:inherit; min-height:40px;}
  142. #ContactForm .success{ padding-bottom:15px; display:none}
  143. #ContactForm label{ position:relative;min-height:22px; display: inline-block;}
  144. #ContactForm .message{ height:222px;}
  145. #ContactForm  span{ display:block}
  146. #ContactForm .error, #ContactForm .empty{ font-size:10px; color:#4d820a; line-height:14px; display:none; width:100%}
  147. #ContactForm a{ margin-left:20px; float:right;}
  148. #ContactForm .input { margin:0;width:181px; height:15px; background: none; padding:3px 10px;color:#474747; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;}
  149. #ContactForm textarea { overflow: auto; margin:0;resize:none}
  150.  
  151.  
  152. #ContactForm  .bg{ background:#fff; border-top:1px solid #c2c2c2; border-left:1px solid #c2c2c2; position:relative;border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; display:inline-block;}
  153.  
  154. /* ============================= forms ============================= */
  155.  
  156. #ContactForm{ position:relative;}
  157. #ContactForm .wrapper{ overflow:inherit; min-height:50px;}
  158. #ContactForm .success{ display:none; position:absolute; bottom:0; left:0; color:#fff}
  159. #ContactForm label{ position:relative;min-height:34px; display: inline-block;}
  160. #ContactForm .message{ height:97px;}
  161. #ContactForm  span{ display:block}
  162. #ContactForm .error, #ContactForm .empty{ font-size:10px; color:#fff; line-height:14px; display:none; width:100%}
  163. #ContactForm a{ margin-left:20px; float:right;}
  164. #ContactForm .input { margin:0;width:282px; height:16px; padding:8px;color:#727272; font:13px Arial, Helvetica, sans-serif;}
  165. #ContactForm textarea { overflow: auto; margin:0;resize:none;width:594px; height:58px; padding:8px;color:#727272; font:13px Arial, Helvetica, sans-serif;}
  166.  
  167.  
  168. #ContactForm  .bg{ display:inline-block;}
  169. #ContactForm .pad_left1{ padding-left:12px;}
  170. #ContactForm .col1{ width:300px;}
  171.  
  172. #ContactForm {
  173.     padding:0;
  174. }
  175. #ContactForm .bg{
  176.     padding:0;
  177.     display: inline-block;
  178.     float: left;
  179.     position: relative;
  180. }
  181. #ContactForm .wrapper {
  182.     overflow:inherit;
  183.     min-height:40px;
  184. }
  185. #ContactForm .success {
  186.     padding-bottom: 0px;
  187.     text-transform:uppercase;
  188.     font-size:10px;
  189.     position:relative;
  190.     float:left;
  191.     color: #000;
  192.     width: 100%;
  193.     line-height: 11px;
  194. }
  195. #ContactForm label {
  196.     position:relative;
  197.     display:inline-block;
  198.     float: left;
  199.     width: 100%;
  200.     padding-bottom: 6px;
  201. }
  202. #ContactForm span {
  203.     display:block
  204. }
  205. #ContactForm .error,#ContactForm .empty {
  206.     font-size:9px;
  207.     color: #796D71;
  208.     line-height:9px;
  209.     display:none;
  210.     width: 100%;
  211.     top:0px;
  212.     position:relative;
  213.     text-transform:uppercase;
  214.     float: left;
  215. }
  216. #ContactForm a {
  217.     position:relative;
  218.     z-index:1;
  219. }
  220. #ContactForm a:hover {text-decoration:none;}
  221. #ContactForm .input {
  222.     width: 235px;
  223.     padding: 8px 10px;
  224.     color: #796D71;
  225.     outline:none;
  226.     font-size: 12px;
  227.     font-family: Arial;
  228.  
  229. }
  230. #ContactForm textarea {
  231.     overflow:auto;
  232.     margin:0;
  233.     width: 330px;
  234.     height: 125px;
  235.     padding: 10px 10px;
  236.     color: #796d71;
  237.     resize:none;
  238.     outline:none;
  239.     font-size: 12px;
  240.     font-family: Arial;
  241. }
  242. #ContactForm .block {
  243.     display:inline-block;
  244.     position:relative;
  245.     width: 100%;
  246.     float: left;
  247. }
  248. #ContactForm .magRight1{margin-right:16px;}
  249. .formButtons{position:relative; float: right;  display: inline-block;margin-top: 58px; margin-right:20px; font-weight:bold;}
  250. .formBtn{display:inline-block;  position:relative;  margin-right: 6px;}
  251.  
  252.  
  253. .signature{margin-top:10px;font-size:20px;font-style:italic}
  254. #copyright{text-align:center;width:100%;color:#666}
  255.  
  256. .fancybox img{width:167px;height:130px}
  257. /* ============================= end forms ============================= */

  1. $(document).ready(function() {
  2.  
  3.     $('.navigation').append('<area shape="poly" coords="224,82, 339,149, 339,279, 224,346, 109,279, 109,149" href="#close" alt="Jammy�s Folio ui designer &amp; developer" class="logo">')
  4.     $('.navigation').append('<area shape="poly" coords="147,-5, 219,40, 219,120, 147,160, 74,120, 74,40" href="#!/page_Home" alt="" class="nav1">')
  5.     $('.navigation').append('<area shape="poly" coords="73,129, 145,174, 145,254, 73,294, 0,254, 0,174" href="#!/page_About" alt="" class="nav2">')
  6.     $('.navigation').append('<area shape="poly" coords="147,261, 219,307, 219,387, 147,427, 74,387, 74,307" href="#!/page_Talk" alt="" class="nav3">')
  7.     $('.navigation').append('<area shape="poly" coords="300,261, 372,307, 372,387, 300,427, 228,387, 228,307" href="#!/page_Message" alt="" class="nav4">')
  8.     $('.navigation').append('<area shape="poly" coords="379,129, 451,174, 451,254, 379,294, 306,254, 306,174" href="#!/page_Blog" alt="" class="nav5">')
  9.     $('.navigation').append('<area shape="poly" coords="300,-5, 372,40, 372,120, 300,160, 228,120, 228,40" href="#!/page_Time" alt="" class="nav6">');
  10.  
  11.     $('.map_back').append('<area shape="poly" coords="73,-5, 145,40, 145,120, 73,160, 0,120, 0,40" href="#close" alt="" id="back">')
  12.  
  13.     $('.map_logo').append('<area shape="poly" coords="115,-7, 230,60, 230,190, 115,257, 0,190, 0,60" href="#close" alt="Jammy�s Folio ui designer &amp; developer" class="logo">')
  14.  
  15.     // hover
  16.     var n;
  17.  
  18.     $('.navigation area').hover(function(){
  19.         n=$(this).attr('class');
  20.         fl2=false;
  21.         if (n=='logo') {
  22.             $('#logo img').stop().animate({width:270, height:294, left:5, top:5}, 600, 'easeOutBack')
  23.         } else {
  24.             n=parseInt(n.slice(-1))
  25.             $('#nav'+n+'> img').css({zIndex:8}).stop().animate({width:165, height:177, left:5, top:5}, 600, 'easeOutBack', function(){$(this).css({zIndex:7})})
  26.             $('#nav'+n+'> div').stop(true, true).animate({height:'show'}, function(){})
  27.         }
  28.     }, function(){
  29.         var n=$(this).attr('class');
  30.         if (n=='logo') {
  31.             $('#logo img').stop().animate({width:230, height:254, left:25, top:25}, 600, 'easeOutBack')
  32.         } else {
  33.             n=parseInt(n.slice(-1));
  34.             $('#nav'+n+'> img').stop().animate({width:145, height:157, left:15, top:15}, 600, 'easeOutBack', function(){$(this).css({zIndex:6})})
  35.             $('#nav'+n+'> div').stop(true, true).delay(200).animate({height:'hide'}, function(){})
  36.         }
  37.     })
  38.  
  39.     $('.logo').hover(function(){
  40.         $('#logo img').stop().animate({width:270, height:294, left:5, top:5}, 600, 'easeOutBack')
  41.     }, function(){
  42.         $('#logo img').stop().animate({width:230, height:254, left:25, top:25}, 600, 'easeOutBack')
  43.     })
  44.  
  45.     $('#back, .back a').hover(function(){
  46.         $('.back img').stop().animate({width:165, height:177, left:5, top:5}, 600, 'easeOutBack')
  47.     }, function(){
  48.         $('.back img').stop().animate({width:145, height:157, left:15, top:15}, 600, 'easeOutBack')
  49.     })
  50.  
  51.     $('.submenu li').hover(function(){
  52.         $(this).find('img').stop().animate({height:40, top:0},600,'easeOutCirc')
  53.     }, function(){
  54.         $(this).find('img').stop().animate({height:0, top:20},600,'easeOutCirc');
  55.     })
  56.  
  57.     $('.submenu').stop().animate({height:'hide'},0)
  58.  
  59.     $('.submenu').hover(function(){
  60.         $('#nav'+n+'> img').css({zIndex:8}).stop().animate({width:165, height:177, left:5, top:5}, 600, 'easeOutBack', function(){$(this).css({zIndex:7})})
  61.         $('#nav'+n+'> div').stop(true, true).animate({height:'show'}, function(){})
  62.     }, function(){
  63.         fl=false;
  64.         $('.navigation area').mouseleave()
  65.     })
  66.  
  67.  
  68.     $('.link1, .social a').each(function(){
  69.         var color=$(this).css('color')
  70.         $(this).prepend('<span></span>')
  71.         $(this).find('span').css({background:color})
  72.     })
  73.  
  74.     $('.link1, .social a').hover(function(){
  75.         $(this).find('span').css({width:0, opacity:1}).stop().animate({width:'100%'})
  76.     }, function(){
  77.         $(this).find('span').stop().animate({opacity:0})
  78.     })
  79.  
  80.     $('#icons .img_act').css({opacity:0})
  81.  
  82.     $('#icons a').hover(function(){
  83.         $(this).find('.img_act').stop().animate({opacity:1})
  84.     }, function(){
  85.         $(this).find('.img_act').stop().animate({opacity:0})
  86.     })
  87.     /*
  88.      $('.gallery span').css({opacity:0})
  89.  
  90.      $('.gallery a').hover(function(){
  91.      $(this).find('span').stop().animate({opacity:1}, function(){$(this).css({opacity:'none'})})
  92.      }, function(){
  93.      $(this).find('span').stop().animate({opacity:0})
  94.      })
  95.      */
  96.     // fancybox
  97.     /*
  98.      $("a[rel=Appendix]").fancybox({
  99.      'transitionIn'  : 'fade',
  100.      'transitionOut'  : 'fade',
  101.      'titlePosition'  : 'over',
  102.      'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) {
  103.      return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
  104.      }
  105.      });
  106.      */
  108.     // blog
  109.     $('.blog').cycle({
  110.         fx:    'scrollVert',
  111.         pager:'.pagin',  // selector for element to use as pager container
  112.         activePagerClass: 'active', // class name used for the active pager link
  113.         timeout: false, // milliseconds between slide transitions (0 to disable auto advance)
  114.         speed: 800, // speed of the transition (any valid fx speed value)
  115.         prev: '.prev',  // selector for element to use as event trigger for previous slide
  116.         next: '.next'  // selector for element to use as event trigger for next slide
  117.     });
  118.  
  119.     if ($.browser.msie && $.browser.version == 8) {
  120.         var num=0;
  121.  
  122.         $('.pagin a').each(function(num){$(this).data({num:num})})
  123.  
  124.         $('.pagin a').eq(num).addClass('active')
  125.  
  126.         $('.pagin a').click(function(){
  127.             num=$(this).data('num')
  128.             $(this).addClass('active').siblings().removeClass('active')
  129.         })
  130.  
  131.         $('.prev').click(function(){
  132.             if (num!=0) {num=num-1} else {num=$('.pagin a').length-1}
  133.             $('.pagin a').eq(num).addClass('active').siblings().removeClass('active')
  134.         })
  135.  
  136.         $('.next').click(function(){
  137.             if (num!=$('.pagin a').length-1) {num=num+1} else {num=0}
  138.             $('.pagin a').eq(num).addClass('active').siblings().removeClass('active')
  139.         })
  140.  
  141.     } else {
  142.         $('.prev, .next').hover(function(){
  143.             $(this).stop().animate({color:'#fff', backgroundColor:'#3e3435'})
  144.         }, function(){
  145.             $(this).stop().animate({color:'#3e3435', backgroundColor:'#ececec'})
  146.         })
  147.  
  148.         $('.pagin .active').css({background:'none', fontWeight:'bold'})
  149.  
  150.         $('.pagin a').click(function(){
  151.             $(this).stop().css({background:'none', fontWeight:'bold', color:'#1b1b1b'}).siblings().css({ fontWeight:'normal'}).stop().animate({color:'#1b1b1b', backgroundColor:'#ececec'})
  152.         })
  153.  
  154.         $('.pagin a').hover(function(){
  155.             if (!$(this).hasClass('active')) {
  156.                 $(this).stop().animate({color:'#fff', backgroundColor:'#3e3435'})
  157.             }
  158.         }, function(){
  159.             if (!$(this).hasClass('active')) {
  160.                 $(this).stop().animate({color:'#1b1b1b', backgroundColor:'#ececec'})
  161.             }
  162.         })
  163.  
  164.         $('.prev, .next').click(function(){
  165.             $('.pagin .active').stop().css({background:'none', fontWeight:'bold', color:'#1b1b1b'}).siblings().css({ fontWeight:'normal'}).stop().animate({color:'#1b1b1b', backgroundColor:'#ececec'})
  166.         })
  167.     }
  168. });
  169. $(window).load(function() {
  170.     var fl_cont=true;
  171.  
  172.     $('a, area').click(function(){
  173.         if (!fl_cont) {
  174.             return false
  175.         }
  176.     })
  177.  
  178.     // scroll
  179.     $('.scroll').cScroll({
  180.         duration:700,
  181.         step:63,
  182.         trackCl:'track',
  183.         shuttleCl:'shuttle'
  184.     })
  185.  
  186.  
  187.  
  188.     $('#menu > li').each(function(num){
  189.         $(this).data({left:$(this).css('left'), top:$(this).css('top')})
  190.     })
  191.  
  192.  
  193.     //content switch
  194.     var content=$('#content'),
  195.         nav=$('.menu');
  196.     nav.navs({
  197.         useHash:true
  198.     })
  199.     content.tabs({
  200.         actFu:function(_){
  201.             if (_.prev && _.curr) {
  202.                 fl_cont=false;
  203.                 _.prev.find('.pad').stop().animate({opacity:0}, function(){
  204.                     $(this).css({display:'none'});
  205.                     _.prev.find('.back').stop().animate({opacity:0}, function(){$(this).css({top:212, left:163, opacity:1, display:'none'}); $(this).css({opacity:'none'})})
  206.                     _.prev.find('.bg_cont').stop().animate({top:303, left:281, width:0, height:0}, 600, 'easeInBack', function(){
  207.                         _.curr.find('.back').css({top:384, left:477, opacity:0, display:'block'}).stop().animate({opacity:1}, function(){$(this).css({opacity:'none'})})
  208.                         _.curr.find('.bg_cont').stop().animate({top:0, left:0, width:562, height:606}, 600, 'easeOutBack', function(){
  209.                             _.curr.find('.pad').css({display:'block'}).stop().animate({opacity:1}, function(){
  210.                                 $(this).css({opacity:'none'});
  211.                                 fl_cont=true;
  212.                             })
  213.                         })
  214.                     })
  215.                 })
  216.             } else {
  217.                 if (_.curr) {
  218.                     fl_cont=false;
  219.                     $('#navigation').css({display:'none'})
  220.                     $('#menu > li').stop().animate({top:239, left:385},1000,'easeInBack', function(){
  221.                         $(this).find(' > img').stop().animate({top:92, left:88, width:0, height:0},1000,'easeInBack', function(){})
  222.                         $('#menu > li').css({display:'none'});
  223.                         $('h1').stop().animate({top:-16, left:44}, 600, 'easeInBack')
  224.                         _.curr.find('.back').css({display:'block'});
  225.                         _.curr.find('.back').stop().animate({top:384, left:477}, 600, 'easeOutBack', function(){
  226.                             _.curr.find('.bg_cont').stop().animate({top:0, left:0, width:562, height:606}, 600, 'easeOutBack', function(){
  227.                                 _.curr.find('.pad').css({display:'block'}).stop().animate({opacity:1}, function(){
  228.                                     $(this).css({opacity:'none'});
  229.                                     fl_cont=true;
  230.                                 })
  231.                             })
  232.                         })
  233.                     })
  234.                     fl=false;
  235.                     $('.navigation area').mouseleave()
  236.                 }
  237.                 if (_.prev) {
  238.                     fl_cont=false;
  239.                     _.prev.find('.pad').stop().animate({opacity:0}, function(){
  240.                         $(this).css({display:'none'});
  241.                         _.prev.find('.bg_cont').stop().animate({top:303, left:281, width:0, height:0}, 600, 'easeInBack', function(){
  242.                             $('h1').stop().animate({top:184, left:329}, 600, 'easeInBack')
  243.                             _.prev.find('.back').mouseleave();
  244.                             _.prev.find('.back').stop().animate({top:212, left:163}, 600, 'easeOutBack', function(){
  245.                                 _.prev.find('.back').css({display:'none'});
  246.                                 $('#menu > li').css({display:'block'});
  247.                                 $('#navigation').css({display:'block'})
  248.                                 var num=$('#menu > li').length;
  249.                                 for (i=0;i<num;i++) {
  250.                                     var th=$('#menu > li').eq(i);
  251.                                     th.stop().delay(220*i).animate({top:th.data('top'), left:th.data('left')}, 600, 'easeOutBack')
  252.                                     th.find(' > img').stop().delay(220*i).animate({top:15, left:15, width:145, height:157},600,'easeOutBack', function(){})
  253.                                 }
  254.                                 fl_cont=true;
  255.                             })
  256.                         })
  257.                     })
  258.                 }
  259.             }
  260.         },
  261.         preFu:function(_){
  262.             $('#content > ul > li').css({position:'absolute'})
  263.             $('.bg_cont').css({top:303, left:281, width:0, height:0})
  264.             $('.pad').css({opacity:0, display:'none'})
  265.             $('.back').css({display:'none'})
  266.         }
  267.     })
  268.     nav.navs(function(n, _){
  269.         content.tabs(n)
  270.         if(n=="#!/page_Time")
  271.             googleMap()
  272.     })
  273.  
  274.     function googleMap(){
  275.         /*
  276.          if(googleMap.ready)
  277.          return false
  278.          googleMap.ready=true
  279.          ;(function afterAnimation(){
  280.          var tmp=$('*:animated')
  281.          if(tmp.length)
  282.          $.when(tmp)
  283.          .then(afterAnimation)
  284.          else{
  285.          var cssPath='.google_map'
  286.          ,holder=$(cssPath)
  287.          ,src='http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Brooklyn,+New+York,+NY,+United+States&amp;aq=0&amp;sll=37.0625,-95.677068&amp;sspn=61.282355,146.513672&amp;ie=UTF8&amp;hq=&amp;hnear=Brooklyn,+Kings,+New+York&amp;ll=40.649974,-73.950005&amp;spn=0.01628,0.025663&amp;z=14&amp;iwloc=A&amp;output=embed'
  288.          ,str='<iframe class="blo" width="'+holder.width()+'" height="'+holder.height()+'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+src+'"></iframe>'
  289.          holder.html(str)
  290.          }
  291.          })()
  292.          */
  293.     }
  294.  
  295.     var m_top=0, h_cont=730;
  296.     function centre() {
  297.         var h=$(window).height();
  298.         if (h>h_cont) {
  299.             m_top=(h-h_cont)/2+30;
  300.         } else {
  301.             m_top=30
  302.         }
  303.         $('.centre').stop().animate({paddingTop:m_top})
  304.  
  305.     }
  306.     centre();
  307.     $(window).resize(centre);
  308.  
  309. })

下载地址： 大学生情人节，520表白html源代码-Javascript文档类资源-CSDN下载采用HTML+CSS+JavaScript实现，内置有3款表白代码，造型独特。更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qgy92320/85404291

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/120619
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号