我郭某走南闯北,靠的就是能文能武,与众不同。不光吃喝玩乐,更要雪月风花。哈哈哈(葛大爷式笑声)。由于我在现实里沉默不语,所以我觉得我应该在网络世界里重拳出击。索性就写了一个个人网站(纯粹为了装逼)。功能及其简单,后续边学,边改进吧。整个从写代码到放到公网的步骤,大概概括为下面四个步骤。
1. 服务器购买/租赁
2. 域名购买/备案
3. 域名解析
4. 个人网站代码实现
&&&分割线&&&&分割线&&&&分割线&&&&&分割线&&&&&&&&分割线&&&&&&
1.服务器购买/租赁
我是购买的腾讯的云服务器,学生价,很便宜,白菜价,买了一年。
这个购买的步骤我就不废话了,跟着官网一步一步走,很快的。
2. 域名购买/备案
域名也是在腾讯买的,域名更便宜,才几十块钱好几年。
3. 域名解析
域名的解析也很简单,跟着网站的步骤很快就能搞定。
4. 个人网站代码实现
这部分就要看个人发挥了。由于我的web水平也怪垃圾的。所以在代码规范和整洁度上肯定还有很大的问题。这个以后再慢慢修改吧。
version1.0版本 更新日期2019/10/12
功能:主体界面简单实现。可以播放一首音乐(起风了),这个开关需要用户自己打开。看时间。看天气(可根据用户ip定位城市,进行三天天气更新)。看一篇王小波的文章。看一张猪的照片。1.0版本网址体验链接
界面
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>均沾落袋</title>
<style type="text/css">
*{margin: 0;padding: 0;}
p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none; color: #000;}
img{display: block;}
input{border: none;}
/*设置版心*/
.mian{
width: 1200PX;
margin: 0 auto;
}
.fl{float: left;}
.fr{float: right;}
.clearFixed:after{
content: "";
display: block;
clear:both;
}
.header{
height: 50px;
background: #E5E9EF;
}
.header .con{
height: 50px;
background: #E5E9EF;
}
.header .con .conLeft{
height: 50px;
line-height: 50px;
}
.header .con .conLeft .leftTxt1{
height: 50px;
text-align: center;
}
.header .con .conLeft .leftTxt1 .zhuzhan{
font-size: 30px;
color: #000000;
margin-right: 32px;
}
.header .con .conLeft .leftTxt1 .yinpin{
font-size: 30px;
color: #000000;
margin-right: 32px;
}
.header .con .conLeft .leftTxt1 .tupian{
font-size: 30px;
color: #000000;
margin-right: 32px;
}
.header .con .conLeft .leftTxt1 .zhibo{
font-size: 30px;
color: #000000;
margin-right: 32px;
}
.header .con .conLeft .leftTxt1 .app{
font-size: 30px;
color: #000000;
}
.header .con .conRight{
height: 50px;
line-height: 50px;
}
.header .con .conRight .rightTxt1{
text-align: center;
height: 50px;
}
.header .con .conRight .rightTxt1 .xiaoxi{
font-size: 30px;
color: #000000;
margin-right: 32px;
}
.header .con .conRight .rightTxt1 .dongtai{
font-size: 30px;
color: #000000;
margin-right: 32px;
}
.header .con .conRight .rightTxt1 .shoucang{
font-size: 30px;
color: #000000;
margin-right: 32px;
}
.header .con .conRight .rightTxt1 .tougao{
font-size: 30px;
color: #000000;
}
/*ziji start*/
.ziji{
height: 120px;
background: #3CB371;
}
.ziji .conLeft{
position: relative;
width: 566px;
height: 120px;
background: url("img/ziji.png")no-repeat;
background-size: 120px 100%;
}
.ziji .conLeft .txtBox1{
position: absolute;
top: 0px;
left: 150px;
font-size: 24px;
}
.ziji .conLeft .txtBox2{
position: absolute;
top: 30px;
left: 150px;
font-size: 24px;
}
.ziji .conLeft .txtBox3{
position: absolute;
top: 60px;
left: 150px;
font-size: 24px;
}
.ziji .conLeft .txtBox4{
position: absolute;
top: 90px;
left: 150px;
font-size: 24px;
}
.ziji .conRight{
width: 600px;
height: 120px;
position: relative;
background: #3CB371;
}
.ziji .conRight .btnBox{
position: absolute;
top: 50%;
margin-top: -18px;
margin-left: 50px;
height: 36px;
width: 600px;
color: #757575;
font-size: 12px;
}
.ziji .conRight .btnBox .txt1{
width: 163px;
height: 36px;
margin-right: 25px;
text-indent: 10px;
}
.ziji .conRight .btnBox .pBtn{
background: #fff;
width: 200px;
height: 36px;
margin-right: 12px;
}
.ziji .conRight .btnBox .pBtn .txt2{
width: 134px;
height: 36px;
text-indent: 10px;
}
.ziji .conRight .btnBox .pBtn .aTxt2{
padding: 6px -4px 9px;
font-size: 8px;
color: #00b38a;
}
.ziji .conRight .btnBox .btnSub{
width: 106px;
height: 36px;
border: 1px solid #ccefe7;
background: transparent;
color: #ccefe7;
}
/*yuyan start*/
.yuyan{
background: #e7e9d1;
}
.yuyan .yuyanCon{
width: 1200px;
}
.yuyan .yuyanCon .yuyanLeft{
width: 300px;
height: 430px;
}
.yuyan .yuyanCon .yuyanLeft .diyi .java{
margin-top: 25px;
margin-left: 30px;
}
.yuyan .yuyanCon .yuyanLeft .diyi .python{
margin-top: 25px;
margin-right: 30px;
}
.yuyan .yuyanCon .yuyanLeft .dier .kotlin{
margin-top: 25px;
margin-left: 30px;
}
.yuyan .yuyanCon .yuyanLeft .dier .html{
margin-top: 25px;
margin-right: 30px;
}
.yuyan .yuyanCon .yuyanLeft .disan .matlab{
margin-top: 25px;
margin-left: 30px;
}
.yuyan .yuyanCon .yuyanLeft .disan .cyuyan{
margin-top: 25px;
margin-right: 30px;
}
.yuyan .yuyanCon .yuyanRight{
position: relative;
width: 840px;
}
.yuyan .yuyanCon .yuyanRight .banImgBox{
width: 840px;
height: 347px;
}
.yuyan .yuyanCon .yuyanRight .banImgBox .banImg{
margin-top: 37px;
width: 100%;
height: 100%;
}
.yuyan .yuyanCon .yuyanRight:hover span{
display: block;
}
.yuyan .yuyanCon .yuyanRight span{
position: absolute;
top: 50%;
margin-top: -17px;
width: 22px;
height: 34px;
font-size: 34px;
color: #000;
font-family: "宋体";
display: none;
font-weight: bold;
}
.yuyan .yuyanCon .yuyanRight .btnRight{
right: 20px;
}
.yuyan .yuyanCon .yuyanRight .btnLeft{
left: 20px;
}
.riji{
background: skyblue;
}
.riji .shijiantianqi .shijian{
margin-top: 15px;
}
.wenzhang{
background: #94b5b9;
}
.wenzhang .meiriyiji .zhu{
left: 50%;
margin-left: 181px;
}
.wenzhang .meiriyiji h1{
text-align: center;
color: white;
}
.wenzhang .meiriyiji h2{
margin-left: 60%;
color: white;
}
.wenzhang .meiriyiji p{
text-indent: 32px;
font-size: 16px;
line-height: 32px;
color: white;
}
.music{
background: #87CEEB;
}
</style>
<script type="text/javascript" src="js/time.js"></script>
<link rel="stylesheet" href="APlayer.min.css">
<link rel="stylesheet" type="text/css" href="music.css">
</head>
<body onload="showTime()">
<div id="box">
<div class="header">
<div class="con mian clearFixed">
<div class="conLeft fl">
<div class="leftTxt1 fl">
<a href="" class="zhuzhan">主站</a>
<a href="" class="yinpin">音频</a>
<a href="" class="tupian">图片</a>
<a href="" class="zhibo">直播</a>
<a href="" class="app">下载APP</a>
</div>
</div>
<div class="conRight fr">
<div class="rightTxt1 fr">
<a href="" class="xiaoxi">消息</a>
<a href="" class="dongtai">动态</a>
<a href="" class="shoucang">收藏</a>
<a href="" class="tougao">投稿</a>
</div>
</div>
</div>
</div>
<div class="ziji">
<div class="sb mian">
<div class="conLeft fl ">
<div class="txtBox1">昵称:君莫笑</div>
<div class="txtBox2">学校:兴欣</div>
<div class="txtBox3">公司:均沾落袋</div>
<div class="txtBox4">联系方式:123456</div>
</div>
<div class="conRight fr">
<div class="btnBox">
<input type="text" placeholder="请留下一句话吧" class="fl txt1"/>
<p class="fl pBtn">
<input type="text" placeholder="艾欧尼亚,昂扬不灭!" class="txt2 "/>
|
<a href="" class="aTxt2">下一句</a>
</p>
<input type="submit" value="登录/注册" class="fl btnSub"/>
</div>
</div>
</div>
</div>
<div class="yuyan mian">
<div class="yuyanCon clearFixed">
<div class="yuyanLeft fl">
<div class="diyi">
<div class="java fl">
<img src="img/java.jpg" width="100px" height="100px"/>
</div>
<div class="python fr">
<img src="img/python.jpg" width="100px" height="100px" />
</div>
</div>
<div class="dier">
<div class="kotlin fl">
<img src="img/kotlin.jpg" width="100px" height="100px"/>
</div>
<div class="html fr">
<img src="img/html.jpg" width="100px" height="100px" />
</div>
</div>
<div class="disan">
<div class="matlab fl">
<img src="img/matlab.jpg" width="100px" height="100px"/>
</div>
<div class="cyuyan fr">
<img src="img/cyuyan.jpg" width="100px" height="100px" />
</div>
</div>
</div>
<div class="yuyanRight fr">
<div class="banImgBox">
<img src="img/java.jpg" class="banImg" alt=""/>
</div>
<span class="btnLeft"><</span>
<span class="btnRight">></span>
</div>
</div>
</div>
<div class="music mian">
<div id="main">
<div class="demo mian">
<div id="player3" class="aplayer">
<pre class="aplayer-lrc-content">
[00:00.00]起风了
[00:00.08]演唱:买辣椒也用券
</pre>
</div>
</div>
</div>
<script src="APlayer.min.js"></script>
<script>
var ap3 = new APlayer({
element: document.getElementById('player3'),//样式1
narrow: false,
autoplay: false,
showlrc: true,
music: {
title: 'Jar Of Love',
author: '_Re-梦_',
url: 'aa.mp3',
pic: 'zz.jpg'
}
});
ap3.init();
</script>
</div>
<div class="riji mian">
<div class="shijiantianqi clearFixed mian">
<div class="shijian fl">
<div id="gettime">yyyy-MM-dd hh:mm:ss</div>
</div>
<div class="tianqi fr">
<iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true"
src="//i.tianqi.com/index.php?c=code&id=12&color=%23&bgc=%2300B050&bdc=%23000000&icon=1&py=pukou&num=5&site=16"></iframe>
</div>
</div>
</div>
<div class="wenzhang mian">
<div class="meiriyiji ">
<h1>一只特立独行的猪</h1>
<h2>王小波</h2>
<p>插队的时候,我喂过猪、也放过牛。假如没有人来管,这两种动物也完全知道该怎样生活。它们会自由自在地闲逛,饥则食渴则饮,春天来临时还要谈谈爱情;这样一来,它们的生活层次很低,完全乏善可陈。人来了以后,给它们的生活做出了安排:每一头牛和每一口猪的生活都有了主题。就它们中的大多数而言,这种生活主题是很悲惨的:前者的主题是干活,后者的主题是长肉。我不认为这有什么可抱怨的,因为我当时的生活也不见得丰富了多少,除了八个样板戏,也没有什么消遣。有极少数的猪和牛,它们的生活另有安排。以猪为例,种猪和母猪除了吃,还有别的事可干。就我所见,它们对这些安排也不大喜欢。种猪的任务是交配,换言之,我们的政策准许它当个花花公子。但是疲惫的种猪往往摆出一种肉猪(肉猪是阉过的)才有的正人君子架势,死活不肯跳到母猪背上去。母猪的任务是生崽儿,但有些母猪却要把猪崽儿吃掉。总的来说,人的安排使猪痛苦不堪。但它们还是接受了:猪总是猪啊。</p>
<p>对生活做种种设置是人特有的品性。不光是设置动物,也设置自己。我们知道,在古希腊有个斯巴达,那里的生活被设置得了无生趣,其目的就是要使男人成为亡命战士,使女人成为生育机器,前者像些斗鸡,后者像些母猪。这两类动物是很特别的,但我以为,它们肯定不喜欢自己的生活。但不喜欢又能怎么样?人也好,动物也罢,都很难改变自己的命运。</p>
<p>以下谈到的一只猪有些与众不同。我喂猪时,它已经有四五岁了,从名分上说,它是肉猪,但长得又黑又瘦,两眼炯炯有光。这家伙像山羊一样敏捷,一米高的猪栏一跳就过;它还能跳上猪圈的房顶,这一点又像是猫——所以它总是到处游逛,根本就不在圈里呆着。所有喂过猪的知青都把它当宠儿来对待,它也是我的宠儿——因为它只对知青好,容许他们走到三米之内,要是别的人,它早就跑了。它是公的,原本该劁掉。不过你去试试看,哪怕你把劁猪刀藏在身后,它也能嗅出来,朝你瞪大眼睛,噢噢地吼起来。我总是用细米糠熬的粥喂它,等它吃够了以后,才把糠对到野草里喂别的猪。其他猪看了嫉妒,一起嚷起来。这时候整个猪场一片鬼哭狼嚎,但我和它都不在乎。吃饱了以后,它就跳上房顶去晒太阳,或者模仿各种声音。它会学汽车响、拖拉机响,学得都很像;有时整天不见踪影,我估计它到附近的村寨里找母猪去了。我们这里也有母猪,都关在圈里,被过度的生育搞得走了形,又脏又臭,它对它们不感兴趣;村寨里的母猪好看一些。它有很多精彩的事迹,但我喂猪的时间短,知道得有限,索性就不写了。总而言之,所有喂过猪的知青都喜欢它,喜欢它特立独行的派头儿,还说它活得潇洒。但老乡们就不这么浪漫,他们说,这猪不正经。领导则痛恨它,这一点以后还要谈到。我对它则不止是喜欢——我尊敬它,常常不顾自己虚长十几岁这一现实,把它叫做“猪兄”。如前所述,这位猪兄会模仿各种声音。我想它也学过人说话,但没有学会——假如学会了,我们就可以做倾心之谈。但这不能怪它。人和猪的音色差得太远了。</p>
<p>后来,猪兄学会了汽笛叫,这个本领给它招来了麻烦。我们那里有座糖厂,中午要鸣一次汽笛,让工人换班。我们队下地干活时,听见这次汽笛响就收工回来。我的猪兄每天上午十点钟总要跳到房上学汽笛,地里的人听见它叫就回来——这可比糖厂鸣笛早了一个半小时。坦白地说,这不能全怪猪兄,它毕竟不是锅炉,叫起来和汽笛还有些区别,但老乡们却硬说听不出来。领导上因此开了一个会,把它定成了破坏春耕的坏分子,要对它采取专政手段——会议的精神我已经知道了,但我不为它担忧——因为假如专政是指绳索和杀猪刀的话,那是一点门都没有的。以前的领导也不是没试过,一百人也治不住它。狗也没用:猪兄跑起来像颗鱼雷,能把狗撞出一丈开外。谁知这回是动了真格的,指导员带了二十几个人,手拿五四式手枪;副指导员带了十几人,手持看青的火枪,分两路在猪场外的空地上兜捕它。这就使我陷入了内心的矛盾:按我和它的交情,我该舞起两把杀猪刀冲出去,和它并肩战斗,但我又觉得这样做太过惊世骇俗——它毕竟是只猪啊;还有一个理由,我不敢对抗领导,我怀疑这才是问题之所在。总之,我在一边看着。猪兄的镇定使我佩服之极:它很冷静地躲在手枪和火枪的连线之内,任凭人喊狗咬,不离那条线。这样,拿手枪的人开火就会把拿火枪的打死,反之亦然;两头同时开火,两头都会被打死。至于它,因为目标小,多半没事。就这样连兜了几个圈子,它找到了一个空子,一头撞出去了;跑得潇洒之极。以后我在甘蔗地里还见过它一次,它长出了獠牙,还认识我,但已不容我走近了。这种冷淡使我痛心,但我也赞成它对心怀叵测的人保持距离。</p>
<p>我已经四十岁了,除了这只猪,还没见过谁敢于如此无视对生活的设置。相反,我倒见过很多想要设置别人生活的人,还有对被设置的生活安之若素的人。因为这个原故,我一直怀念这只特立独行的猪。</p>
<img src="img/pig.png" alt="猪" class="zhu">
</div>
</div>
<div class="fuli mian">
<img src="img/pig.png" class="fuli1 fl"/>
<img src="img/pig.png" class="fuli2 fl"/>
<img src="img/pig.png" class="fuli2 fl"/>
</div>
</div>
</body>
</html>
以上。1.0版本web端已经写完了,功能单一,看起来就像一个空壳子。但是对于俺来说,已经还不错啦。后续继续完善。相对应的安卓端APP已经在写了(前后端一起装逼才刺激),前面写了一个关于掩星的简单app,可以下载体验一下哈。之前一直没有一个web端提供接口,所以都是一些本地化功能,还是很操蛋的。以后有了这个,可以继续装逼了。。。。。。。。。。。