從專案中學習HTML+CSS
title: 從專案中學習HTML+CSS
tags: [HTML, CSS, Web開發]
date: 2018-11-10 10:51:51
categories: Web開發
keywords: HTML, CSS, Web開發
最近由於工作原因以及自己的懈怠，已經很久都沒有更新過部落格了。通過這段時間，我發現堅持一件事情是真的很難，都說萬事開頭難，但是在放棄這件事上好像開頭了後面就順理成章的繼續下去了。中間即使不怎麼情願也在努力的每週更新部落格，但是自從9月份以來，第一次因為工作需要加班而斷更之後，後面好像很容易找到理由斷更。從這件事上我學到了一點：在堅持一件事的時候千萬要堅持，只要中間放棄一次，後續就可以心安理得的將其拋之腦後。這次在這裡也是希望自己能夠再次堅持之前的每週至少一更。即使沒有內容。。。。
感想就這麼多，現在進入真正的主題——HTML+CSS相關內容的整理，因為網上針對HTML+CSS的相關知識已經很多了，而且都是很零碎的點，大多是對應的程式碼，也可以說是應用性極強的，我本人是不太喜歡大段大段的帖程式碼的。學習的過程中我喜歡從理論或者從實踐開始，根據需求或者理論來寫程式碼，需求清楚了，流程出來了，程式碼就是水到渠成的事。所以這次就根據具體的一個網頁專案來梳理一下我這段時間學習這些東西的成果。
最終的效果圖如下:
我希望自己通過對Web開發的學習能夠自己獨立的開發一套部落格系統，因此我在選擇練手專案的時候主要找的是部落格的相關頁面。這是從站長之家上找的一個部落格網站模板的首頁，它相對其他的模板來說顯的比較中規中矩，而且對初學者來說實現起來更加簡單。
基本佈局
從大體上看，它可以分為幾個部分：
大體上分為3個部分，頭部、內容部分，以及下方的頁尾部分。
頭部可以分為上面的標題以及下方的導航部分，內容部分又可以分為左邊和右邊兩個部分。然後根據區域的劃分，可以寫下大體的程式碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS + HTML專案部落格首頁</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <!--頂部--> <div class = "header"> <div class = "title"> </div> <div class = "nav"> </div> </div> <div class = "container"> <div class = "left"> </div> <div class = "right"> </div> </div> <!--底部--> <div class = "footer"> </div> </body> </html>
然後再使用CSS的樣式規定具體的佈局顏色:
*{
margin:auto; /*只有設定了對應的寬度，才會預設居中*/
padding:0px;
font-family: "Microsoft YaHei","微軟雅黑","Lantinghei SC","Open Sans",Arial,"Hiragino Sans GB","STHeiti","WenQuanYi Micro Hei",SimSun,sans-serif;
}
.header{
margin-top:15px;
}
.title{
height: 20px;
line-height: 15px;
width 這裡有一個問題，我當時一直以為margin:auto;這個會直接將對應的元素居中，但是我在實踐中發現它好像並沒有，原來當時我忘記了設定元素的寬度，而元素預設的寬度是與父元素相同的，這樣就導致margin:auto這個屬性認為不需要給外邊距，所以也就沒有居中，只有給了寬度，它才會將元素相對於父元素居中。
導航欄的實現
這裡導航欄使用無序列表 + a連結來實現，我們先寫上對應的HTML程式碼
<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="index.html">列表頁</a></li>
<li><a href="index.html">詳細頁</a></li>
<li><a href="index.html">404</a></li>
<li><a href="index.html">MZ-NetBlog主題</a></li>
<li><a href="index.html">IT技術筆記</a></li>
<li><a href="index.html">原始碼分享</a></li>
<li><a href="index.html">靠譜網賺</a></li>
<li style = "margin-right: 0px;"><a href="index.html">資訊分享</a></li>
</ul>
然後通過CSS樣式來調整
/*先去掉列表前的小圓點*/
.nav ul {
list-style-type: none;
}
/*讓列表項左浮動，以便導航項可以橫向排列，同時設定右外邊距，讓各項可以分割開來*/
.nav ul li{
float:left;
margin-right:34px;
}
/*上述內容已經有了導航欄的雛形，剩下的就是設定導航項的字型、顏色、以及點選的相關屬性*/
.nav ul li a{
text-decoration:none;
color:#999;
font-size:18px;
}
.nav ul li a:hover{
color:lightskyblue;
}
.nav ul li a:active{
color:lightskyblue;
}
通過上述的簡單的CSS就可以製作對應的導航欄了
左上角標籤頁的製作
從原始的網頁效果圖來看，標籤頁可以看成上下兩個部分，上方是一個導航欄，而下方則是一個div，這個div根據點選導航上的具體項來顯示不同的內容。因此它的大致內容結構可以用下面的HTML來定義
<div class = "about">
<!--上方是一個導航欄-->
<div class = "tab-header">
<ul>
<li><a href = "#" style = "color:lightskyblue;background-color:#fff;">統計資訊</a></li>
<li><a href = "#">聯絡站長</a></li>
</ul>
</div>
<!--下方是用來顯示具體的內容-->
<div class = "info">
<p>日誌總數:888篇</p>
<p>網站執行:88天</p>
</div>
</div>
上方的導航可以沿用之前的導航欄的CSS程式碼，而下方只需要設定對應的北京顏色即可，這裡就不再貼出了
文章列表
文章列表採用的仍然是列表的方式，我們可以針對列表的每個項設定對應的邊框，以及長度和寬度即可。下面只貼出對應的CSS程式碼
/**列表本身屬性**/
.article-list{
width:820px;
height:960px;
background-color:#fff;
margin-top:15px;
}
/**列表項屬性**/
.article{
width:820px;
height: 192px;
border-top: solid 1px rgb(234,234,234);
}
文章項的製作
文章列表中有具體的文章項，這個文章項可以簡單的分為幾個部分：圖片、標題、文章屬性等等內容、文章的摘要；在這裡我將它們都作為同級元素，然後調整浮動以及大小，它自然就會按照這樣的佈局進行排列。
<div class ="article">
<a class = "article-img"><img src = "images/article.jpg"></a>
<div class = "label">
<div class = "rect"><span>MZ-NetBlog主題</span></div>
<div class = "arrow"></div>
<a href = "#">用DTcms做一個獨立部落格網站（響應式模板）</a>
</div>
<div class = "time-watch-comment">
<span class = "time"><img src = "images/clock.jpg"><span>2018-11-06</span></span>
<span class = "watch"><img src = "images/eye.jpg"><span>666</span></span>
<span class = "comment"><img src = "images/comment.jpg"><span>4</span></span>
</div>
<p>用DTcms做一個獨立部落格網站（響應式模板），採用DTcms V4.0正式版（MSSQL）。開發環境：SQL2008R2+VS2010。DTcms V4.0正式版功能修復和優化：1、favicon.ico圖示後臺上傳。（解決要換圖示時要連FTP或者開伺服器的麻煩）</p>
</div>
這個部分我感覺最需要提出來的是對標籤的製作，這裡的標籤是文章標題前面的那個藍色背景，白色字型的矩形後帶有箭頭的東西，這個的製作我採用的是前方一個
標籤，而後方利用另一個div 來製作的小箭頭。想要製作小箭頭首先需要回歸一下CSS中講到的border屬性，我們知道border表示的是邊框，我們可以通過設定border的值來規定邊框的大小顏色等等屬性，那麼當我們在四個邊上都規定邊框的時候，邊框是如何來顯示的呢，我們寫下如下的例項
<div class = "div1"></div>
.div1{
width:100px;
height:100px;
background: orange;
float: left;
border-top:10px solid black;
border-bottom:12px solid green;
border-left:15px solid red;
border-right:20px solid blue;
border-style: solid;
}
重新整理瀏覽器，我們發現它產生的是這樣的一個效果
之前在學習的時候我一直實驗的是border為1個畫素，但是沒想到給邊框加粗後能產生這樣的效果，它能夠產生這樣一種像話框的效果，隨著邊框的加粗，中間的內容越小，而這個畫框的邊框就越大。這個時候很容易就產生一種想法，隨著邊框的加粗，最終上下或者左右邊框完全佔據元素的所有空間，而另一側為空，那麼就可以產生一個類似於箭頭的效果，根據這個想法，我們再修改一下上面的CSS程式碼
.div1{
width:0px;
height:0px;
border-top:50px solid black;
border-bottom:50px solid green;
border-left:15px solid red;
border-style: solid;
}
這個時候它的效果如下:
這樣我們把上下兩個邊框的眼色設定為父元素的背景色，左邊框設定為需要的顏色，就可以做一個小的箭頭了。而要調整它的寬度、角度等等只需要調整上下邊框的寬度即可。下面是箭頭最終的CSS程式碼
/*方向向右的小箭頭*/
.arrow{
float:left;
background-color:#fff;
width:0;
height:0;
border-top:5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid #3399CC;
margin-top: 31px;
}
搜尋框的實現
這個搜尋框我簡單的使用了一個帶邊框的文字輸入框加一個按鈕。它的HTML程式碼如下:
<input class = "search-box" type = "text" value = "請輸入關鍵字"/>
<input class = "search-submit" type = "submit" value = "搜尋"/>
對應的CSS程式碼如下:
.search-box{
width:258px;
height:34px;
border:solid 1px rgb(51, 153, 204);
margin-top:7px;
margin-left:22px;
margin-right:0px;
color:#999;
padding-left:9px;
}
.search-submit{
width:52px;
height:36px;
background-color:rgb(51, 153, 204);
border-style:none;
margin-left:-4px;
color:#fff;
}
專案後記
這個頁面雖然說完成了，但是也是有一些不足的地方：
- 頁面中幾乎每一個元素寫了它的屬性，而且有的屬性是幾乎類似的，程式碼只是簡單的完成了頁面沒有考慮到重用
- 頁面是靜態的，簡單的利用HTML+CSS來做展示，沒有互動的東西，而原始的模板是有的，互動這個的部分我想學習了JavaScript 和 JQuery之後再來加
雖然我主要用C/C++ 與Python做過一些服務程式和其他的Web程式，但是對於前端的相關內容也僅僅是會用HTML，關於佈局和CSS的東西幾乎不懂，而這次我想抽點時間學習一下這方面的內容。
為什麼會想要學習前端呢？之前不知道在哪看到這麼一句話: “黑客一定是程式設計師，而程式設計師不一定是黑客”, 作為一個初步邁入Web安全大門的我來說，想要深入Web安全就必須學會Web開發，而Web開發是繞不開前端的。雖然不要求有很高的前端水平，但是基本的佈局、css、JavaScript、jQuery還是得會的，所以我想先抽點時間好好補一下這方面的內容。