自己做一个首页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己做一个首页相关的知识，希望对你有一定的参考价值。
最近我做了一个属于自己的首页，并且，之前只学了一点点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
以上是关于自己做一个首页的主要内容，如果未能解决你的问题，请参考以下文章
ASP.net分页条怎么做?就是这种“首页 上一页 1 2 3 4下一页 末页”怎么做呢？最好有代码教程，谢谢了
（导航组件）返回首页fragment时如何在activity上显示返回箭头？