記一次計算機網絡上機報告實現過程---web網頁製作（一）

起因

這不是計算機網絡就要結課了嗎，就有了一個上機實驗，前幾個我看的雲裏霧裏，但到了這第七個web網頁，卻讓我眼前一亮。
要求是跟下圖要求一致，必須div+css，JavaScript，jQuery。
然後是效果圖：

說實話有點辣眼睛，我好歹也寫過幾個網頁，這種風格，有點難以接受啊。
我決定自己優化一下，做出一份好的上機報告！

創建項目

傳統老三項，建立項目文件夾，創建index.html文件，css文件夾，img文件夾，js文件夾。
如圖：

準備工作

這老師要求jQuery，因爲太久沒有寫前端項目，再加上電腦重裝過，jQuery在我的電腦上是沒有的，只好去重新下載一個。網址是https://jquery.com/download/。如果沒辦法下載，可以完全複製下來然後粘貼到一個新文件裏面的。
然後上面還有一個導航欄，是不是使用bootstrap更爲方便簡單呢？那就再下載一個bootstrap。網址：http://getbootstrap.com/。我下載的版本是3.4.1的
然後呢，就是一些圖片了，隨手找了一兩張。logo沒找到，就用了長江大學的校徽，嘿嘿嘿。

HTML部分

我使用的編譯器是VS code，感覺使用的很舒服，把項目拖到vscode打開，開始編輯我們的HTML部分。
從效果圖中不難看出，他有一個頁眉部分，然後是主體，主體是在中間的，上面是一個logo圖，然後是一個導航欄，然後加載一個圖片。最下面的部分是三種不同的顏色分割佔據的一個地方。

---

我們可以使用兩個div組成頁眉和主體部分，既然要優化一下，那就加一個頁尾。然後用一個整體的div包裹起來。 大致就是這樣：

 <div class="hyc">
        <div class="top"></div>
        <div class="main"></div>
        <div class="bottom"></div>
    </div>

---

先來看看這簡陋的頁眉部分。左邊，是一個藍色長條，右邊是一個橙色短條加一個設爲收藏，設爲首頁的兩個按鍵。 有點簡約，我就在想，你是不是好歹得加一個登錄/註冊？ 然後鼠標放上去就有下劃線啥的。初步設想可以使用 `span>a` 實現。 鑑於這次只是一個頁面，沒啥後臺，就弄個空鏈接就好了。

<div class="top">
    <div class="right">
        <span><a href="#">設爲收藏</a></span>
        <span><a href="#">設爲首頁</a></span>
        <span><a href="#">註冊</a>
		/
		<a href="#">登錄</a>
		</span>
    </div>
</div>

寫完之後，看一下還挺像那麼一回事，但是是不是少了點什麼？
沒錯，少了咱的CSS，層疊樣式表。

CSS部分

咱也沒啥取名天賦，就一個css.css文件放在css文件夾裏面好了，下面開始寫樣式表。

頁眉

這個比較簡單，設置一下背景顏色，定位一下位置，然後去掉a標籤的下劃線，再加一個點擊樣式就歐克了

.top{
    background-color: #3399ff;
}

.right{
    width: 20%;
    background-color: #ff9900;
    position: relative;
    left: 80%;
}

.right span{
    margin-left: 11%;
}

.right span a{
    text-decoration: none;
}

.right span a:hover{
    text-decoration: red;
}

js部分

這個點擊收藏是不是點了，就收藏一下，但是這咱也辦不到啊，但是這個字變一下還是可以做到的。
然後呢，這個設爲首頁，那按照正常的是檢測是不是首頁，是的話不顯示，不是顯示。但是沒這個實力，就不弄這麼花裏胡哨的東西了，就弄一個點擊了他就消失了。
登錄/註冊的話，寫個登錄/註冊頁面？但是咱原本就這一個頁面啊，是不是有點太麻煩了？算了，弄一個點擊顯示暫未開放此功能算了。生活不易，小豬嘆氣。

$('.one').click(function(){
    $('.one').find('a').text("已收藏")
})

$('.two').click(function(){
    $('.two').hide()
})

$('.three').click(function() {
    alert('此功能爲開放')
})

來看看完成效果圖：