資訊專(zhuān)欄INFORMATION COLUMN
摘要：今天呢我想給大家，也給我自己，對(duì)我的個(gè)人網(wǎng)站做一個(gè)全面的整理和分析。首頁(yè)上用戶直接看得到的部分有導(dǎo)航欄和輪播大圖當(dāng)時(shí)寫(xiě)這個(gè)網(wǎng)站的設(shè)想是在年月份的時(shí)候。目前網(wǎng)上流行的個(gè)人博客頁(yè)面。感謝框架對(duì)本網(wǎng)站的大力支持。
大家好~又見(jiàn)面了。
今天呢我想給大家，也給我自己，
對(duì)我的個(gè)人網(wǎng)站yanyy.cn/yanyy
做一個(gè)全面的整理和分析。
也給有這方面想法的朋友一個(gè)參考。
做網(wǎng)站的有愛(ài)好也有帶有目的性的。
不過(guò)我還是希望大家能夠傳播正能量~
進(jìn)入正題
網(wǎng)站首頁(yè)
看到上圖，是網(wǎng)站的首頁(yè)。
首頁(yè)上用戶直接看得到的部分有（導(dǎo)航欄和輪播大圖）
當(dāng)時(shí)寫(xiě)這個(gè)網(wǎng)站的設(shè)想是在2018年4月份的時(shí)候。
距離現(xiàn)在也有一年多了。
導(dǎo)航欄用的是inline-block。
為了讓用戶怎么拖動(dòng)窗口大小導(dǎo)航欄都不會(huì)移動(dòng)
以及和logo圖并排。所以將父元素div也改為inline-block。
由于后面要加的頁(yè)面越來(lái)越多，所以引用了挺多css樣式庫(kù)。
有的庫(kù)優(yōu)先級(jí)太高，把我自己的樣式給頂了，
所以只能用！important來(lái)提高優(yōu)先級(jí)。
輪播圖用的原生js代碼，非常繁瑣
輪播代碼一角
如果需要訪問(wèn)請(qǐng)點(diǎn)擊->
http://www.yanyy.cn/yanyy/js/container.js
最近會(huì)利用jQuery（js支持庫(kù)）對(duì)它進(jìn)行更新。
首頁(yè)的剩余內(nèi)容是（技能樹(shù)+博主介紹+尾頁(yè)）?
?網(wǎng)站剩余內(nèi)容
技能樹(shù)就是簡(jiǎn)單的圖片+圖片+li標(biāo)簽。
博主介紹就是p標(biāo)簽+p標(biāo)簽+position定位。
我這個(gè)審美確實(shí)。。。
不是說(shuō)我審美不行，是寫(xiě)到后面完全沒(méi)有內(nèi)容可寫(xiě)。
目前網(wǎng)上流行的個(gè)人博客頁(yè)面。
首頁(yè)上基本上是輪播圖+文章+文章
如果我有這么多的素材，我也能將首頁(yè)排的滿滿的。
這又涉及到一個(gè)爬蟲(chóng)爬取其他頁(yè)面文章的問(wèn)題了。
上次我在博客園（cnblogs.com）寫(xiě)的文章。
被爬蟲(chóng)爬到幾個(gè)莫名網(wǎng)站上給當(dāng)做文章顯示了。?
?
我的文章被別的網(wǎng)站爬取
這種就無(wú)法判斷文章的真實(shí)性和有益性。
就像我這種水平寫(xiě)的文章還能被抓取。
當(dāng)然這樣爬取文章也有一定難度。
（等我有了自己的服務(wù)器一定會(huì)試試。）
網(wǎng)站的動(dòng)態(tài)頁(yè)面：
?
由于QQ空間，知乎，微信的封閉和隱私性，
爬蟲(chóng)無(wú)法去爬取頁(yè)面內(nèi)容。所以只能用蠢辦法。
自己一個(gè)一個(gè)更新，基本上上想到了要更新才去更新。
不過(guò)有些不會(huì)在空間或者其他地方發(fā)表的東西。
可能會(huì)在網(wǎng)站動(dòng)態(tài)上看到。
這里用到了一個(gè)css3的新功能。?
當(dāng)鼠標(biāo)懸停時(shí)放大圖片:transform:scale(2.5);
?
網(wǎng)站的文章頁(yè)面：
?
?
這里用的是css庫(kù)foundation.css的柵格樣式。
這樣的樣式經(jīng)常在論壇上看到，
不得不說(shuō)省了很多功夫。
如果手動(dòng)寫(xiě)一個(gè)這樣的樣式，要花費(fèi)很多的時(shí)間。
還不一定有這個(gè)好看。
文章區(qū)的文章很多都沒(méi)有寫(xiě)完，正在努力碼中~
如果你點(diǎn)擊未完成的文章，那么就會(huì)提示你：
如果你點(diǎn)擊到已經(jīng)完成的文章，那么就會(huì)跳轉(zhuǎn)到相關(guān)的文章頁(yè)面：
?
電腦上的排版主要是：縮進(jìn)+p標(biāo)簽。
不得不說(shuō)里面有些文章很呆...
?
網(wǎng)站的留言界面。
這個(gè)頁(yè)面可能是最具技術(shù)性的頁(yè)面了。
用的是PHP+MySQL數(shù)據(jù)庫(kù)
雖然有技術(shù)體現(xiàn)，但是頁(yè)面還是很丑
我一定會(huì)寫(xiě)好看來(lái)的！！
目前這些留言幾乎都是我一個(gè)人留的，就很尷尬。
只有少部分是朋友留下的?？梢远嗳ゲ炔龋?/p>
部分PHP和SQL語(yǔ)句
由于不熟悉fetch_assoc()的操作。
所以只能用這么呆的方法一個(gè)一個(gè)來(lái)儲(chǔ)存留言數(shù)據(jù)到數(shù)據(jù)庫(kù)。
然后再輸出到頁(yè)面中。
網(wǎng)站的關(guān)于頁(yè)面
基本上是首頁(yè)的內(nèi)容照搬。
可能真的是詞窮吧，完全想不到什么好東西來(lái)裝飾。
還是自己的閱歷太少，沒(méi)有什么內(nèi)涵。
在網(wǎng)站的底部欄里有個(gè)彩蛋。
如果你是電腦端訪問(wèn)，那么在將鼠標(biāo)放在
QQ和微信的圖標(biāo)上時(shí)，會(huì)彈出一個(gè)圖片，掃碼
就可以加好友啦~
?
網(wǎng)站的手機(jī)端。
考慮到手機(jī)訪問(wèn)和電腦訪問(wèn)的巨大差別。
橫屏和豎屏的問(wèn)題。
于是我發(fā)揮我的聰明才智，另外寫(xiě)了手機(jī)頁(yè)面。
火狐瀏覽器上的手機(jī)顯示頁(yè)面
整個(gè)頁(yè)面的實(shí)現(xiàn)呢也是用的foundation框架。
追求極簡(jiǎn)的體驗(yàn)。沒(méi)有太華麗的動(dòng)畫(huà)（還不是因?yàn)閷?xiě)不出來(lái)。）
單擊更多會(huì)顯示出豎向?qū)Ш綑凇?/span>
剛剛進(jìn)入頁(yè)面是全站閱覽模式。
?
隨意點(diǎn)擊一個(gè)版塊就會(huì)切換到該頁(yè)面的內(nèi)容。
同時(shí)會(huì)隱藏其他版塊的內(nèi)容。
這里主要是應(yīng)用了js。點(diǎn)擊后執(zhí)行函數(shù)
?
簡(jiǎn)單又暴力。
由于又包含了PHP內(nèi)容
所以整個(gè)頁(yè)面為.php后綴。
這樣留言頁(yè)面才能完全顯示。
這里要特別提到一個(gè)地方，
我覺(jué)得手機(jī)端的文章版塊是最舒適的了
不管是文字還是圖片顯示很舒服。
?
感謝foundation框架對(duì)本網(wǎng)站的大力支持。hhh
?
可能大家會(huì)注意到在網(wǎng)站的底部還有一個(gè)
這個(gè)是友盟+（https://www.umeng.com/）的標(biāo)志。
他可以記錄網(wǎng)站被訪問(wèn)次數(shù)等數(shù)據(jù)，便于了解網(wǎng)站情況。
站長(zhǎng)必備~
其實(shí)如果說(shuō)完全小白要做一個(gè)網(wǎng)站也不是不可能。
只要有錢(qián)，什么樣的網(wǎng)站都可以定制。
如果是草根站長(zhǎng)。沒(méi)有太多時(shí)間來(lái)學(xué)習(xí)。
那么網(wǎng)上很多自主建站網(wǎng)站可以使用。
像織夢(mèng)cms，帝國(guó)cms，凡科cms。
那樣做出的網(wǎng)站確實(shí)要比我手碼的要好看。
不過(guò)不是自己寫(xiě)的終究不是自己的
這可能就是我的一點(diǎn)執(zhí)念吧。
這個(gè)網(wǎng)站用時(shí)1個(gè)半月。全部代碼大約3000行。
重復(fù)率20%左右。文字5000字左右。
雖然技術(shù)含量不怎么高，但我想這會(huì)是我值得珍藏的記憶。
如果對(duì)建站感興趣的朋友們，也可以在下方留言討論。
一起成長(zhǎng)一起進(jìn)步~
點(diǎn)擊這里，進(jìn)入網(wǎng)站訪問(wèn)吧！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1065.html
摘要：自主建站的好處是，云服務(wù)器購(gòu)買(mǎi)網(wǎng)站搭建網(wǎng)站維護(hù)上全程自主，彈性靈活。不同網(wǎng)站類(lèi)型需要的云服務(wù)器配置不同，建站前需確認(rèn)網(wǎng)站規(guī)模與訪問(wèn)人數(shù)。如何用云服務(wù)器搭建個(gè)人網(wǎng)站?你是否想要搭建一個(gè)網(wǎng)站，卻苦苦找不到方法，你是否看到別人搭建的網(wǎng)站，自己羨慕不已，今天，就教大家來(lái)搭建一個(gè)簡(jiǎn)單的個(gè)人網(wǎng)站。 在這里，我采用的是云服務(wù)器搭建的。 一、建站有哪些方式? 搭建網(wǎng)站主要有兩種方式，一種...
摘要：自行建站服務(wù)器購(gòu)買(mǎi)網(wǎng)站搭建網(wǎng)站維護(hù)全程自主，彈性靈活。網(wǎng)站部署常見(jiàn)網(wǎng)站類(lèi)型有以下幾種個(gè)人博客常用于搭建個(gè)人博客網(wǎng)站，尤其適用于首次使用阿里云進(jìn)行建站的新用戶。若您需要在阿里云服務(wù)器上部署站點(diǎn)環(huán)境安裝應(yīng)用程序，可點(diǎn)此查看網(wǎng)站基礎(chǔ)環(huán)境搭建服務(wù)。相信很多新用戶會(huì)有這樣的疑惑，我要做個(gè)網(wǎng)站，到底要使用什么產(chǎn)品，如何能快速完成網(wǎng)站建站呢？搭建網(wǎng)站有兩種選擇，一種是直接購(gòu)買(mǎi)建站模板，另一種則是自行建站。...
摘要：自行建站服務(wù)器購(gòu)買(mǎi)網(wǎng)站搭建網(wǎng)站維護(hù)全程自主，彈性靈活。網(wǎng)站部署常見(jiàn)網(wǎng)站類(lèi)型有以下幾種個(gè)人博客常用于搭建個(gè)人博客網(wǎng)站，尤其適用于首次使用阿里云進(jìn)行建站的新用戶。若您需要在阿里云服務(wù)器上部署站點(diǎn)環(huán)境安裝應(yīng)用程序，可點(diǎn)此查看網(wǎng)站基礎(chǔ)環(huán)境搭建服務(wù)。前言相信很多新用戶會(huì)有這樣的疑惑，我要做個(gè)網(wǎng)站，到底要使用什么產(chǎn)品，如何能快速完成網(wǎng)站建站呢？搭建網(wǎng)站有兩種選擇，一種是直接購(gòu)買(mǎi)建站模板，另一種則是自行建...
摘要：自建主要花費(fèi)在購(gòu)買(mǎi)云服務(wù)器上和靜態(tài)資源托管上，剩余工作一力承擔(dān)。 寫(xiě)這系列文章的初衷是：對(duì)自己知識(shí)面廣度和深度的確定，并以此調(diào)整后續(xù)的發(fā)展和學(xué)習(xí)方向。希望能達(dá)到溫故而知新的效果。 選擇從建站入手，是因?yàn)檫@個(gè)是最常見(jiàn)的要求。對(duì)于公司而言，網(wǎng)站是展示公司主旨、業(yè)務(wù)、溝通方式、宣傳營(yíng)銷(xiāo)的必選方案，一個(gè)符合公司形象的高質(zhì)量官網(wǎng)，必然能讓客戶留下良好的第一印象。，對(duì)個(gè)人而言，博客是表達(dá)其特有的思...
摘要：經(jīng)常有朋友咨詢我麥克，跨境獨(dú)立站的域名解析怎么弄一個(gè)兩個(gè)人問(wèn)就算了，陸陸續(xù)續(xù)總是有人在問(wèn)，我就察覺(jué)到了這個(gè)問(wèn)題對(duì)我來(lái)說(shuō)，是小菜一碟。的具體配置操作包括域名解析已經(jīng)放在個(gè)人博客上了，歡迎過(guò)去瀏覽。 經(jīng)常有朋友咨詢我：麥克，跨境獨(dú)立站的域名解析怎么弄？ 一個(gè)兩個(gè)人問(wèn)就算了，陸陸續(xù)續(xù)總是有人在問(wèn)，...
閱讀 2553·2021-10-09 09:44
閱讀 648·2019-08-30 15:44
閱讀 3007·2019-08-29 18:46
閱讀 1144·2019-08-29 18:38
閱讀 566·2019-08-26 10:44
閱讀 2443·2019-08-23 16:07
閱讀 1102·2019-08-23 15:38
閱讀 4129·2019-08-23 14:02
