个人网站建设（装逼）指南

我郭某走南闯北，靠的就是能文能武，与众不同。不光吃喝玩乐，更要雪月风花。哈哈哈（葛大爷式笑声）。由于我在现实里沉默不语，所以我觉得我应该在网络世界里重拳出击。索性就写了一个个人网站（纯粹为了装逼）。功能及其简单，后续边学，边改进吧。整个从写代码到放到公网的步骤，大概概括为下面四个步骤。
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">&lt;</span><span class="btnRight">&gt;</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'),//样式1narrow: 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端提供接口，所以都是一些本地化功能，还是很操蛋的。以后有了这个，可以继续装逼了。。。。。。。。。。。

个人网站建设（装逼）指南相关推荐

使用github搭建自己的个人网站（装逼指南）
哈喽,你好.欢迎进来我的博客. 上一篇关于git的教程是教大家如何在github上面窗子哦及的本地项目.这次呢,和大家分享一下如何使用github创建自己的个人网站. 当然,前提还是得有github的 ...
java装逼的话_程序员装逼指南（语言篇）
原标题:程序员装逼指南(语言篇) 语言:千万不要说自己是做Java或者.Net的,一下子就屌丝了.PHP现在也不行,Python稍微有点烂大街,但还是明显要强过前几个.剩下的可以说自己是做Ruby的, ...
高级程序员装逼指南，是高级哦！（转）
高级程序员装逼指南,是高级哦! 下面这个才是高级版本 ;; 这是注释 ;; 0.9版本 ;; 2011年8月22日 ** 前言 ** 最近网上出了一个<程序员装逼指南>,觉得这个东西其实图 ...
高级程序员装逼指南，是高级哦！
下面这个才是高级版本 ;; 这是注释 ;; 0.9版本 ;; 2011年8月22日 ** 前言 ** 最近网上出了一个<程序员装逼指南>,觉得这个东西其实图样图森破然后在下跟微博上的一些 ...
你以为 CSS 只是个简单的布局？装逼指南了解一下
装逼指南本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before .::after 伪元素,transparent .border,多重线性与径向渐变,多重内外阴影,如 ...
EXCEL装逼指南之动态进度条（项目经理必备技能）
EXCEL装逼指南之动态进度条(项目经理必备技能) 作为浪迹职场多年的混子(项目经理),是否常常对项目进度把控不利,汇报工作又含含糊糊让领导不知所以而经常惨遭领导羞辱,同事嘲笑? 那么如何做一份让领导 ...
【转】这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已
[转]这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已 Javascript是一门很吊的语言,我可能学了假的JavaScript,哈哈,大家还有什么推荐的本文秉承着:你看不懂是 ...
myqr一句代码实现二维码背景图片自定义装逼指南
myqr一句代码实现二维码背景图片自定义装逼指南文章目录 myqr一句代码实现二维码背景图片自定义装逼指南前提准备步骤注意拓展示例前提准备 1.Python安装(下载安装教程自行查阅). ...
OSChina 周二乱弹 ——程序员高级装逼指南
2019独角兽企业重金招聘Python工程师标准>>> [今日歌曲推荐] @贺常志 :<闷>-王菲,看我菲的慵懒.不可一世. <闷>-王菲手机党少年们想听歌 ...
GitHub 装逼指南
一份不正经的指南. 退后,我要开始装逼啦. Start. 为了发这篇推送,从 8 年前起--抗战都胜利了,我不幸注册了一个 GitHub 的账号,陷入了开源世界中.到了今天,写了几百个开源项目,攒了几 ...

个人网站建设（装逼）指南

个人网站建设（装逼）指南相关推荐

最新文章

热门文章