自己做一個首頁
阿新 • • 發佈：2018-08-26
到你 incr lin 字體 add clear doctype top and 最近我做了一個屬於自己的首頁，並且，之前只學了一點點web開發的技能，在別人的幫助下，我終於做好了.
代碼先放出來:
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>歡迎光臨-萌楊之博客</title> <link rel="stylesheet" href="css/index.css"> <script src="js/texiao.js"></script> </head> <body> <audio autoplay loop> <source src="https://m10.music.126.net/20180825205106/be8be5dd1428456d0c427271879ae7f4/ymusic/7485/6a72/8ec9/a42016879f878a0f0dcc6092f2317071.mp3"> </audio> <div id="touxiang"> <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=3236144706"><img id="b1" src="img/huaji.jpg" height="100" width="100"></a> </div> <div id="tixing"> <p>點擊頭像聯系我</p> </div> <p id="tou">我是菜鳥萌楊</p> <div id="abok"> <a id="boke" href="http://blog.51cto.com/13940072">我的博客</a> </div> </body> </html>
js:
onload = function() { var click_cnt = 0; var $html = document.getElementsByTagName("html")[0]; var $body = document.getElementsByTagName("body")[0]; $html.onclick = function(e) { var $elem = document.createElement("b"); $elem.style.color = "#E94F06"; $elem.style.zIndex = 9999; $elem.style.position = "absolute"; $elem.style.select = "none"; var x = e.pageX; var y = e.pageY; $elem.style.left = (x - 10) + "px"; $elem.style.top = (y - 20) + "px"; clearInterval(anim); switch (++click_cnt) { case 10: $elem.innerText = "OωO"; break; case 20: $elem.innerText = "(??? ? ???)"; break; case 30: $elem.innerText = "(??? ? ???)"; break; case 40: $elem.innerText = "(???_???)"; break; case 50: $elem.innerText = "（￣へ￣）"; break; case 60: $elem.innerText = "(╯°口°)╯(┴—┴"; break; case 70: $elem.innerText = "?( ??皿?? )?"; break; case 80: $elem.innerText = "╮(?>口<?)╭"; break; case 90: $elem.innerText = "( ? ??皿??)??3??"; break; case 100: case 101: case 102: case 103: case 104: case 105: $elem.innerText = "(?°?д°?)"; break; default: $elem.innerText = "?"; break; } $elem.style.fontSize = Math.random() * 10 + 8 + "px"; var increase = 0; var anim; setTimeout(function() { anim = setInterval(function() { if (++increase == 150) { clearInterval(anim); $body.removeChild($elem); } $elem.style.top = y - 20 - increase + "px"; $elem.style.opacity = (150 - increase) / 120; }, 8); }, 70); $body.appendChild($elem); }; };
css:
html,body { height: 100%; background-color: rgb(0,0,0); } body { margin: 0; padding: 0; position: relative; } #touxiang { width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); } #tixing { color:aliceblue; width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(70%); } #tou { margin: 15px; padding: 23px; color:aliceblue; } #b1 { border-radius: 100%; border: 3px solid aqua; } #abok { width: 100%; text-align: center; position: absolute; top: 70%; } #boke{ font-size: 30px; background: rgb(27, 154, 247); color: #FFF; border:1px solid rgb(27, 154, 247); border-radius: 10px; padding:10px 66px; text-decoration: none; }
首先，我要做到一個功能:點擊中間的圖片實現加好友
先定義一個div:
<div id="touxiang">
</div>要做到點擊頭像加好友，就必須是超鏈接
<div id="touxiang">
<a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=3236144706"><img id="b1" src="img/huaji.jpg" height="100" width="100"></a>
</div>height=100,width=100正好
那麽我們還有一個問題，圖片不是遠的
怎麽辦呢
我們圖片的id是b1
那麽要在css中這樣寫:
#bi {
border-radius: 100%;
}border-radius指的是圓角
好了，我們該讓圖片居中了
定義的div 的id 是touxiang
那麽這樣寫:
html, body {
height=100%;
}
body {
margin: 0;
padding: 0;
position: relative;
}
#touxiang {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}居中了
對了，超鏈接的href裏面寫你的加好友地址，可以把我的鏈接最後的數字換成你的QQ號
接下來應該幹什麽呢？
寫一個標題
<title>我的主頁</title>把圖片搞一個框框不是更好看嗎?
#b1裏面加上這個
border: 3px solid aqua;左上角應該寫一下你的名字
html中先寫一個p標簽
<p id="name">愛玩的xxx</p>css讓他離邊框遠一點
#name {
margin: 15px;
padding: 23px;
}這樣就很好看了
把背景搞成黑色應該更炫酷
在css中的html添加:
background-color: rgb(0,0,0);不錯
可是你的名字不見了
別害怕
只需要在css中的name裏填上這個:
color:aliceblue;怎麽樣，出來了吧
然後要搞個超鏈接，可以傳送到你博客的超鏈接
.html裏加上這句
<div = "abok">
<a id="boke" href="博客地址">我的博客</a>
</div>這樣居中:
# abok{
width: 100%;
text-align: center;
position: absolute;
top: 70%;
}很好看了
之後寫上這個:
#boke{
font-size: 30px;
background: rgb(27, 154, 247);
color: #FFF;
border:1px solid rgb(27, 154, 247);
border-radius: 10px;
padding:10px 66px;
text-decoration: none;
}變成了一個按鈕
font-size是字體大小
background是超鏈接的背景
color字體顏色啦
border邊框大小和顏色，記得solid必須加上，不然看不見邊框
padding我也不是很懂
text-decoration: none是去除下滑線
好了
簡單的主頁就做好了
雖然不好看
但是可以讓人聯系上你
還可以打廣告QwQ
自己做一個首頁