程序猿也有春天：将所有思念化为代码
不想伤害她，不想打扰她的生活，所以将所有思念化为这一串串代码吧！也许我们真的只有擦肩之缘，没有携手之份吧，在这青春年华里终于明白了什么叫做放弃！自己真的不敢给她太多的承诺，因为我一直以来是个行动派，但是当某个人不给你行动的机会，我能做的只有祝福了吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>“萍”-“水”终相逢</title> <link rel="shortcut icon" href="./images/logo.ico"> <link rel="stylesheet" href="./CSS/index.css"> </head> <body> <!-- 用来装载顶部图片的盒子 --> <div class="nav"> <!-- 用来设置顶部标签链接的盒子 --> <div class = "top"> <ul> <li class = "frist"><a href="http://www.xzw.com/astro/aries/?appid=bds"><img src="./images/35.jpg" alt="我是白羊座" title="我是白羊座" width="80" height="40" align="right">我是白羊座<audio src="./audio/王童语 - 丫头.mp3" controls="controls" autoplay="auto" loop="loop"></audio></a></li> <li><a href="">了解开发者</a></li> <li><a href="">我眼中的你</a></li> <li><a href="">余生请指教</a></li> <li><a href="https://www.lagou.com/jobs/list_%E4%BA%AC%E4%B8%9C%E6%B7%98%E5%AE%9D%E5%94%AF%E5%93%81%E4%BC%9A?labelWords=&fromSearch=true&suginput=">您要的招聘</a></li> <li><a href="">开发者故事</a></li> <li class ="last"><a href="">秋萍小姐，您已登陆</a></li> </ul> </div> </div> <table border= "1" rules="all" width="100%" > <tr> <td rowspan="12" width="700" height="500" bgcolor="#272822"><img src="./images/1.jpg" alt="" width="700" height="500" align="left"></td> <td> 今日暴走事件:</td> </tr> <tr> <td> <a href="#" target="_black">1、华农华山区有个小伙子暗恋一个女生</a></td> </tr> <tr> <td> <a href="#" target="_black">2、他不知道这份爱究竟能不能经受沉默的考验</a></td> </tr> <td> <a href="http://www.gdzsxx.com/news/dx/201611/90874.html" target="_black">3、华农学子再登“烽火”舞台</a></td> </tr> <tr> <td> <a href="http://www.gx211.com/news/2016415/n3052354297.html" target="_black">4、华南农业大学新闻作品获奖</a></td> </tr> <tr> <td> <a href="http://www.gdcyl.org/Article/ShowArticle.asp?ArticleID=204384" target="_black">5、 “华农之星”答辩会上展风采</a></td> </tr> <tr> <td> <a href="http://www.gx211.com/news/2016429/n4937358674.html" target="_black">6、华南农业大学开展首次国家安全教育日活动 </a></td> </tr> <tr> <td> <a href="http://www.huhome.net/education/2017/0823/76940.html" target="_black">7、谁是华农读书最多的人</a></td> </tr> <tr> <td> <a href="http://www.shuichan.cc/news_view-265325.html" target="_black">8、华南农业大学举行畜牧水产行业专场招聘</a></td> </tr> <tr> <td> <a href="http://www.gx211.com/news/2015108/n0886301138.html" target="_black">9、新赛车E16首亮相</a></td> </tr> <tr> <td> <a href="http://www.gx211.com/news/2015108/n0886301138.html" target="_black">10、新赛车E16首亮相</a></td> </tr> <tr> <td align="right"><a href="http://www.cnblogs.com/jiangliang520/">MORE>></a> </td> </tr> </table> <div id = "box3d"> <div id = "innerbox"> <img src="./images/5.jpg" alt="" width="133" height="200"> <img src="./images/6.jpg" alt="" width="133" height="200"> <img src="./images/7.jpg" alt="" width="133" height="200"> <img src="./images/8.jpg" alt="" width="133" height="200"> <img src="./images/9.jpg" alt="" width="133" height="200"> <img src="./images/10.jpg" alt="" width="133" height="200"> <img src="./images/11.jpg" alt="" width="133" height="200"> <img src="./images/12.jpg" alt="" width="133" height="200"> <img src="./images/13.jpg" alt="" width="133" height="200"> <img src="./images/14.jpg" alt="" width="133" height="200"> </div> </div> <footer><img src="./images/logo2.png" alt="" height="90"></footer> <hr/> <div class=" bottom"> <div class = "outbottom"> <span>第一次这么喜欢一个女孩，半年完善的网站，不管以后怎样，你若安好，便是晴天！</span> </div> <div class = "innerbottom"> <ul > <li><a href="">收藏本站</a></li> <li><a href="">网站地图</a></li> <li><a href="">招贤纳士</a></li> <li><a href="">管理员系统</a></li> <li>©CopyRight 2017/10/1 —— 当你说不喜欢我的那一天</li> </ul> </div> </div> <script src="./js/comm.js"></script> </body> </html>
做的还只是初级的模板，因为我想花六个月去完善这个WEB，当完成的那一日，也是我给自己的最后一次机会吧！
/* 消除所有HTML的样式 */ /* 定义全局样式 */ *{ margin:0px; padding:0px; font-weight: bold; font-family: 楷体; font-size: 16px; } body{ background-color:#e6e6e6; } a{ text-decoration: none; } li{ list-style-type: none; } a:hover{ text-decoration: underline; color: #216ce7; } a:active{ color:#a82b17; } .floatL{ float: left; } .floatR{ float: right; } /* 顶部栏开始 */ .nav{ width:100%; height: 40px; background-image: url(../images/bgcolor.jpg); } .top{ width: 1200px; height: 40px; line-height: 40px; margin:0px auto; } .top a{ color: #84896b; } .top li{ float: left; width: 150px; height: 40px; line-height: 40px; text-align: center; border-right: 1px solid #b63f97; } .top .frist{ margin-right: 70px; border-right: none; text-indent: -99999px; } .top .last{ margin-left: 72px; border-right: none; } .top .last a{ color:#146f7f; } /* 顶部栏结束 */ /* banner栏开始 */ table tr{ background-color: #e6e6e6; } table td{ color: #f57719; font-size: 20px; text-indent: 3em; } /* banner栏结束 */ /* 3D旋转图片酷炫特效开始 */ #box3d{ width:100%; height: 500px; background-color: #272822; overflow: hidden; } #box3d img{ position: absolute; -webkit-box-reflect: below 5px -webkit-linear-gradient(top , rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%); } #innerbox{ width: 133px; height: 200px; margin:80px auto; transform-style: preserve-3d; perspective:800px; transform: rotateX(-12deg); transform: rotateY(0deg); } /* 3D旋转图片酷炫特效结束 */ .bottom{ width:100%; height: 100px; background-color:#e6e6e6; } .innerbottom{ width:1000px; height: 50px; line-height: 50px; margin:0 auto; } .outbottom{ width:1000px; height: 50px; line-height: 50px; margin:0 auto; } .innerbottom li{ display:inline-block; margin-left: 20px; } .outbottom span{ margin-left: 20px; font-family: 黑体; color: #9c8b93; } footer img{ position: relative; left:1030px; top: 100px; }
这个是3d相片层，用来储存她的照片，在浏览器上会显示动态效果，下面的静态图片是看不出效果的！
还有图片轮播层，虽然做的很粗糙，但是这只是最初的模板，六月后我会发布最终的版本,我希望用六个月来为自己喜欢的人写一个网站，不在乎她能不能看见。
//获取图片位置过 var imgObj = document.images[1]; //开启定时器 setInterval(imgpaly1, 2000); //定义轮播函数 var i = 2; function imgpaly1(){ imgObj.src = "./images/"+i+".jpg"; i++; if(i>4){ i = 1; } } var oImg = document.getElementsByTagName("img");//获取图片标签 var nowX , nowY ,lastX , lastY, minusX , minusY , roX = -12, roY = 0;//定义坐标的初始值 var oWrap = document.getElementById("innerbox");//获取innerbox标签 var timer = null;//定时器的初始值 (function(i){ var deg = 360/10;//每一张图片需要旋转的度数 for(;i<12;i++){ oImg[i].style.transform = "rotateY("+deg*i+"deg) translatez(350px)"; } })(2);//定义旋转函数 document.onmousedown = function(e){ //鼠标按下 var e = e || window.event; lastX = e.clientX; lastY = e.clientY; this.onmousemove = function (){ //鼠标移动 var e = e || window.event; nowX = e.clientX; nowY = e.clientY; minusX = nowX - lastX;//坐标的差值就是旋转的角度 minusY = nowY - lastY; roX -= minusY *0.2; roY += minusX *0.2; oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)"; lastX = nowX; lastY = nowY; } this.onmouseup = function(){ //鼠标离开 this.onmousemove =null; timer = setInterval(function(){ minusX *=0.95; minusY *=0.95; roX -= minusY *0.2; roY += minusX *0.1; oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)"; if(Math.abs(minusX) <0.1 || Math.abs(minusY) < 0.1){ //当角度减小到一定值的时候就清除定时器 clearInterval(timer); } }, 1000/60) } }
