技術(shù)男用來對妹子表白的百度首頁
更新時(shí)間：2014年07月23日 11:50:08 作者：明凱
這篇文章主要介紹了技術(shù)男用來對妹子表白的百度首頁,非常有創(chuàng)意、有意思,需要的朋友可以參考下
有一天突發(fā)奇想，我要是能用我學(xué)的程序員技術(shù)給女朋友來表白的話，那豈不是高端大氣上檔次。
想到就立馬去做，首先想到的是更改hosts文件，將瀏覽器的主頁更改為自己設(shè)計(jì)的網(wǎng)頁。
國內(nèi)的女同學(xué)一般用百度首頁，于是我就自己仿做了一個(gè)百度首頁，具體的效果如下面：
是不是看起來高大上，當(dāng)然最后我失敗了，程序員怎么可能會(huì)有女朋友呢？
但是為了廣大屌絲朋友的福利，我現(xiàn)在將這些代碼給貼出來，就算有一個(gè)人成功了，我也是深藏功與名。
其中更改hosts文件的步驟請自行百度，這里為止不夠就不詳解了。
自己寫的百度源碼：
復(fù)制代碼 代碼如下:
<style>
html,body{height:100%}html{overflow-y:auto}#wrapper{position:relative;_position:;min-height:100%}#content{padding-bottom:100px;text-align:center}#ftCon{height:100px;position:absolute;bottom:44px;text-align:center;width:100%;margin:0
auto;z-index:0;overflow:hidden}#ftConw{width:720px;margin:0 auto}
body{font:12px arial;text-align:left;background:#fff}
body,p,form,ul,li{margin:0;padding:0;list-style:none}
body,form,#fm{position:relative}td{text-align:left}img{border:0}a{color:#00c}a:active{color:#f60}
.bg{background-image:url(http://s1.bdstatic.com/r/www/cache/static/global/img/icons_aea40f46.png);background-repeat:no-repeat;_background-image:url(http://s1.bdstatic.com/r/www/cache/static/global/img/icons_cfa0bb3b.gif)}
.c-icon{display:inline-block;width:14px;height:14px;vertical-align:text-bottom;font-style:normal;overflow:hidden;background:url(http://s1.bdstatic.com/r/www/cache/static/global/img/icons_aea40f46.png)no-repeat 0 0;_background-image:url(http://s1.bdstatic.com/r/www/cache/static/global/img/icons_cfa0bb3b.gif)}.c-icon-triangle-down-blue{background-position:-480px
-24px}.c-icon-chevron-unfold2{background-position:-504px -24px}#u{color:#999;padding:4px
10px 5px 0;text-align:right}#u a{margin:0 5px}#u .reg{margin:0}#m{width:720px;margin:0
auto}#nv a,#nv b,.btn,#lk{font-size:14px}#fm{padding-left:130px;text-align:left;z-index:1}input{border:0;padding:0}#nv{height:19px;font-size:16px;margin:0
0 4px;text-align:left;text-indent:137px}.s_ipt_wr{width:468px;height:30px;display:inline-block;margin-right:5px;background-position:0
-288px;border:1px solid #b6b6b6;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top}.s_ipt{width:458px;height:22px;font:14px/22px
arial;margin:5px 0 0 7px;background:#fff;outline:0;-webkit-appearance:none}.s_btn{width:95px;height:32px;padding-top:2px\9;font-size:14px;background-color:#ddd;background-position:0
-240px;cursor:pointer}.s_btn_h{background-position:-240px -240px}.s_btn_wr{width:97px;height:34px;display:inline-block;background-position:-120px
-240px;*position:relative;z-index:0;vertical-align:top}#lg img{vertical-align:top;margin-bottom:3px}#lk{margin:33px
0}#lk span{font:14px "宋體"}#lm{height:60px;line-height:15px}#lh{margin:16px
0 5px;word-spacing:3px}.tools{position:absolute;top:-4px;*top:10px;right:7px}#mHolder{width:62px;position:relative;z-index:296;display:none}#mCon{height:18px;line-height:18px;position:absolute;cursor:pointer}#mCon
span{color:#00c;cursor:default;display:block}#mCon .hw{text-decoration:underline;cursor:pointer;display:inline-block}#mCon
.pinyin{display:inline-block}#mCon .c-icon-chevron-unfold2{margin-left:5px}#mMenu
a{width:100%;height:100%;display:block;line-height:22px;text-indent:6px;text-decoration:none;filter:none\9}#mMenu,#user
ul{box-shadow:1px 1px 2px #ccc;-moz-box-shadow:1px 1px 2px #ccc;-webkit-box-shadow:1px
1px 2px #ccc;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135,Color="#cccccc")\9}#mMenu{width:56px;border:1px
solid #9b9b9b;list-style:none;position:absolute;right:27px;top:28px;display:none;background:#fff}#mMenu
a:hover{background:#ebebeb}#mMenu .ln{height:1px;background:#ebebeb;overflow:hidden;font-size:1px;line-height:1px;margin-top:-1px}#cp,#cp
a{color:#666}#seth{display:none;background:url(#default#homepage)}#setf{display:none}#sekj{margin-left:14px}#shouji{margin-right:14px}#u
.last{margin-right:0}#u .un{font-weight:bold;margin-right:5px}#u ul{width:100%;background:#fff;border:1px
solid #9b9b9b}#u li{height:25px}#u li a{width:100%;height:25px;line-height:25px;display:block;text-align:left;text-decoration:none;text-indent:6px;margin:0;filter:none\9}#u
li a:hover{background:#ebebeb}#u li.nl{border-top:1px solid #ebebeb}#user_center{position:relative;display:inline-block}#user_center
.user_center_btn{margin-right:5px}.userMenu{width:64px;position:absolute;right:7px;_right:2px;top:15px;top:14px\9;*top:15px;padding-top:4px;display:none;*background:#fff}#user{position:relative;display:inline-block}
</style>
<style>
/*
我的logo樣式
*/
#m{position: relative;padding: 50px 0 0 0;}
#newYearEve{height:15px;position: absolute;top:250px;left:130px;width:510px;}
#newYearEve li{cursor: pointer;width:20px;height:15px;margin:0 21px 0 0;float: left;}
#newYearEve .icon-newyear0{background: url("http://img.jbzj.com/file_images/article/201407/mylove.png") no-repeat center center;}
#newYearEve .month-next{display: none!important;}
#newYearEve .icon-newyear1{background: url("http://img.jbzj.com/file_images/article/201407/mylove01.png") no-repeat center center;}
#newYearEve li:hover{background: url("http://img.jbzj.com/file_images/article/201407/mylove.gif") no-repeat -0 0; }
#m{position: relative;}
#play{position: absolute;top:135px;left:348px;width:25px;height:25px;cursor: pointer;}
#newYearEve .icon-newyear2,#newYearEve .icon-newyear1:hover{background: url("http://img.jbzj.com/file_images/article/201407/mylove01.png") no-repeat center center;}
#newYearKw {color:#e203a9;position:absolute;top:212px;left:135px;width:300px;height:20px;color:#897883;z-index:100;font-family: "微軟雅黑";text-align:left;font-weight: 700;font-size: 16px;overflow: hidden;}
#newYearKw i,#newYearKw img{font-style: normal;position:absolute;width:20px;height:20px;top:0;}
#newYearKw .img01{left:0px;}
#newYearKw .img02{left:180px;}
#newYearKw .c1{color:#e203a9;left:20px;}
#newYearKw .c2{color:#e203a9;left:40px;}
#newYearKw .c3{color:#b60175;left:60px;}
#newYearKw .c4{color:#b60175;left:80px;}
#newYearKw .c5{color:#f460af;left:100px;}
#newYearKw .c6{color:#f460af;left:120px;}
#newYearKw .c7{color:#fd98a5;left:140px;}
#newYearKw .c8{color:#fec8db;left:160px;}
#newYearKw .c9{color:#fec8db;left:180px;}
#newYearKw .c11{color:#fec8db;}
#newYearKw .c12{color:#fec8db;}
#newYearKw .c13{color:#fec8db;}
#newYearKw .c14{color:#fec8db;}
.word-box{position:relative;width:300px;height:20px;}
</style>
<div id="content">
<div id="m">
<p id="lg">
<img src="http://img.jbzj.com/file_images/article/201407/mylove_logo.png" width="270" height="129"/>
</p>
<p id="nv">
<a rel="external nofollow" name="tj_news">
新 聞
</a>
<b>
網(wǎng) 頁
</b>
<a rel="external nofollow" name="tj_tieba">
貼 吧
</a>
<a rel="external nofollow" name="tj_zhidao">
知 道
</a>
<a rel="external nofollow" name="tj_mp3">
音 樂
</a>
<a rel="external nofollow" name="tj_img">
圖 片
</a>
<a rel="external nofollow" name="tj_video">
視 頻
</a>
<a rel="external nofollow" name="tj_map">
地 圖
</a>
</p>
<div id="fm">
<form name="f" action="http://www.baidu.com/s" target="_blank">
<span class="bg s_ipt_wr">
<input type="text" name="wd" id="kw" maxlength="100" class="s_ipt" autocomplete="off"/>
</span>
<input type="hidden" name="rsv_bp" value="0"/>
<input type="hidden" name="ch" value=""/>
<input type="hidden" name="tn" value="sitehao123"/>
<input type="hidden" name="bar" value=""/>
<input type="hidden" name="rsv_spt" value="3"/>
<input type="hidden" name="ie" value="utf-8"/>
<span class="bg s_btn_wr">
<input type="submit" value="百度一下" id="su" class="bg s_btn" onmousedown="this.className='bg s_btn s_btn_h'" onmouseout="this.className='bg s_btn'"/>
</span>
<div id="sd_1386659528033" style="display: none;">
</div>
</form>
<span class="tools">
<span id="mHolder">
<div id="mCon">
<span>
輸入法
</span>
</div>
</span>
</span>
</div>
<ul class="logo-new-year" id="newYearEve"><li class="icon-newyear0" i="0"></li><li class="icon-newyear1" i="1"></li></ul>
<div id="play" style="display:none;"></div>
<div id="newYearKw" style="width: 0px;">
<div class="word-box">
<img src="http://img.jbzj.com/file_images/article/201407/mylove.gif" class="img01"/>
<i class="c1">親</i>
<i class="c2">愛</i>
<i class="c3">的</i>
<i class="c4">，</i>
<i class="c5">嫁</i>
<i class="c6">給</i>
<i class="c7">我</i>
<i class="c8">吧</i>
<img src="http://img.jbzj.com/file_images/article/201407/mylove.gif" class="img02"/>
</div>
</div>
</div>
</div>
<script type="text/javascript">//< ![CDATA[
var newYearEve = newYearEve||{};
newYearEve.DOM = document;
newYearEve.box=newYearEve.DOM.getElementById("newYearEve");
newYearEve.kw=newYearEve.DOM.getElementById("kw");
newYearEve.newYearKw=newYearEve.DOM.getElementById("newYearKw");
//newYearEve.logo=newYearEve.DOM.getElementById("lg");
//newYearEve.playDOM=newYearEve.DOM.getElementById("play");
newYearEve.num=-1;
newYearEve.time=0;
newYearEve.wordWidth = 300;
newYearEve.wordW = 0;
newYearEve.newDay=false;
newYearEve.dataArr = [{
keyword : "2012年5月18日 第一次見面 你給我的感覺有些特別"
}, {
keyword : "2012年6月5日我們在一起了,從此這個(gè)平淡的日子對我們有了特殊的意義"
}, {
keyword : "2012年8月20日 第一次吵架 讓你傷心了 對不起"
}, {
keyword : "2012年10月1日 香格里拉 屬于我們的第一次旅行"
}, {
keyword : "2012年12月24日 平安夜 我們一起做了棵圣誕樹"
}, {
keyword : "2013年2月14日 第一個(gè)情人節(jié) 雖然俗氣還是送了玫瑰給你"
}, {
keyword : "2013年3月17日 陪你過的第一個(gè)生日"
}, {
keyword : "2013年6月1日 一起過兒童節(jié)也很開心"
}, {
keyword : "2013年6月5日 一周年紀(jì)念日 感謝有你陪在身邊的一年"
}, {
keyword : "2013年8月4日 帶你去吃我的家鄉(xiāng)菜，看你吃得好開心"
}, {
keyword : "2013年9月19日 中秋節(jié) 第一次見你爸媽 有點(diǎn)緊張"
}, {
keyword : "2013年12月31日 希望以后每一次都是我陪你跨年。。。"
}
];
newYearEve.createHtml = function(num){
var h = '';
var n = 1;
num=num-0;
if(num<n+1){
switch(num){
case 0:
h='<li class="icon-newyear2" i="0">';
break;
case 1:
h='<li class="icon-newyear0" i="0"></li><li class="icon-newyear1" i="1"></li>';
break;
}
}else{
for(var i = 0 ;i < num-n;i++){
h+='<li class="icon-no" i="'+i+'">';
}
for(var i = num-n;i < num+1;i++ ){
var c = 'icon-newyear'+(i+n-num);
h+='<li class="'+c+'" i="'+i+'">';
}
}
if( newYearEve.box){
newYearEve.box.innerHTML=h;
}
newYearEve.kw.value= newYearEve.dataArr[num].keyword;
}
newYearEve.animate = function () {
if (newYearEve.num < 11) {
newYearEve.num++;
newYearEve.createHtml(this.num);
}
newYearEve.time = setTimeout(function () {
if (newYearEve.num < 11) {
newYearEve.animate();
} else {
newYearEve.kw.value="";
newYearEve.box.innerHTML="";
newYearEve.wordAnimate();
}
}, 3000);
}
newYearEve.wordAnimate = function(){
if(newYearEve.wordW<newYearEve.wordWidth){
newYearEve.wordW=newYearEve.wordW+1;
newYearEve.newYearKw.style.width=newYearEve.wordW+"px";
setTimeout( function(){
newYearEve.wordAnimate();},16);
}else{
newYearEve.rePlay();
}
}
newYearEve.rePlay = function(num){
newYearEve.time=setTimeout(function(){
newYearEve.wordW=0;
newYearEve.newYearKw.style.width=newYearEve.wordW+"px";
newYearEve.kw.value="";
newYearEve.num=-1;
newYearEve.box.innerHTML="";
newYearEve.animate();
},3000);
}
newYearEve.box.onclick=function(event){
var e = event.target||event.srcElement;
var i = e.getAttribute("i");
if(i!==null){
newYearEve.newYearKw.style.width="0px";
newYearEve.kw.value= newYearEve.dataArr[i].keyword;
newYearEve.clickNum = i;
newYearEve.createHtml(newYearEve.clickNum);
clearTimeout( newYearEve.time);
newYearEve.time=setTimeout(function(){
//newYearEve.createHtml(newYearEve.num);
newYearEve.num=newYearEve.num==11? 10:newYearEve.num;
newYearEve.animate();
//newYearEve.kw.value= newYearEve.user||"";
},3000)
}
}
newYearEve.animate();
//newYearEve.wordAnimate();
// ]]></script>
相關(guān)文章
在使用vue的開發(fā)中,我們會(huì)使用axios來做前后端通信,那這時(shí)候我們就需要對請求前后做攔截,下面這篇文章主要給大家介紹了關(guān)于如何消除axios攔截中if的相關(guān)資料,需要的朋友可以參考下2022-04-04
在大型前端項(xiàng)目中,模塊路徑往往很長且復(fù)雜,使用相對路徑不僅降低了代碼可讀性,還增加了維護(hù)成本,Webpack提供了配置別名路徑的功能,可以通過為常用目錄定義簡短的別名,簡化模塊導(dǎo)入路徑,本文將詳細(xì)介紹如何在Webpack中配置別名路徑,需要的朋友可以參考下2025-03-03
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義頭部導(dǎo)航欄，膠囊按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
基于javascript實(shí)現(xiàn)根據(jù)身份證號(hào)碼識(shí)別性別和年齡
這篇文章主要介紹了基于javascript實(shí)現(xiàn)根據(jù)身份證號(hào)碼識(shí)別性別和年齡的相關(guān)資料,需要的朋友可以參考下2016-01-01
近期在寫一個(gè)博客管理后臺(tái)的前端,涉及在同一頁面兩種高亮顯示當(dāng)前菜單的需求.2010-06-06
這篇文章主要為大家詳細(xì)介紹了bootstrap suggest搜索建議插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
下面小編就為大家?guī)硪黄狫S 終止執(zhí)行的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起 小編過來看看吧2016-11-11
JavaScript實(shí)現(xiàn)字符串與日期的互相轉(zhuǎn)換及日期的格式化
這篇文章主要介紹了JavaScript實(shí)現(xiàn)字符串與日期的互相轉(zhuǎn)換及日期的格式化的方法,這里格式化使用的是正則表達(dá)式來替換日期后進(jìn)行格式化,需要的朋友可以參考下2016-03-03
javascript(js) join函數(shù)使用方法介紹
javascript(js) join函數(shù)使用方法介紹...2007-11-11