自己做一个首页

最近我做了一个属于自己的首页，并且，之前只学了一点点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 = "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃";
                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

猜你喜欢