摘要：最近由于工作原因以及自己的懈怠，已經很久都沒有更新過博客了。所以這次就根據具體的一個網頁項目來梳理一下我這段時間學習這些東西的成果。

最近由于工作原因以及自己的懈怠，已經很久都沒有更新過博客了。通過這段時間，我發現堅持一件事情是真的很難，都說萬事開頭難，但是在放棄這件事上好像開頭了后面就順理成章的繼續下去了。中間即使不怎么情愿也在努力的每周更新博客，但是自從9月份以來，第一次因為工作需要加班而斷更之后，后面好像很容易找到理由斷更。從這件事上我學到了一點：在堅持一件事的時候千萬要堅持，只要中間放棄一次，后續就可以心安理得的將其拋之腦后。這次在這里也是希望自己能夠再次堅持之前的每周至少一更。即使沒有內容。。。。
感想就這么多，現在進入真正的主題——HTML+CSS相關內容的整理，因為網上針對HTML+CSS的相關知識已經很多了，而且都是很零碎的點，大多是對應的代碼，也可以說是應用性極強的，我本人是不太喜歡大段大段的帖代碼的。學習的過程中我喜歡從理論或者從實踐開始，根據需求或者理論來寫代碼，需求清楚了，流程出來了，代碼就是水到渠成的事。所以這次就根據具體的一個網頁項目來梳理一下我這段時間學習這些東西的成果。

最終的效果圖如下:

我希望自己通過對Web開發的學習能夠自己獨立的開發一套博客系統，因此我在選擇練手項目的時候主要找的是博客的相關頁面。這是從站長之家上找的一個博客網站模板的首頁，它相對其他的模板來說顯的比較中規中矩，而且對初學者來說實現起來更加簡單。

基本布局

從大體上看，它可以分為幾個部分：

大體上分為3個部分，頭部、內容部分，以及下方的頁腳部分。
頭部可以分為上面的標題以及下方的導航部分，內容部分又可以分為左邊和右邊兩個部分。然后根據區域的劃分，可以寫下大體的代碼:

然后再使用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:1200px;
    color:#999;
}

.nav{
    width:1200px;
    margin-top:8px;
}

.container{
    width:1200px;
    margin-top:15px;
}

.left{
    float:left;
    width:820px;
}

.right{
    float:left;
    margin-left:20px;;
}

.footer{
    height:60px;
    width:100%;
    background-color:#fff;
    text-align: center;
    padding-top:24px;
    font-size:12px;
    color:#999;
}

這里有一個問題，我當時一直以為margin:auto;這個會直接將對應的元素居中，但是我在實踐中發現它好像并沒有，原來當時我忘記了設置元素的寬度，而元素默認的寬度是與父元素相同的，這樣就導致margin:auto這個屬性認為不需要給外邊距，所以也就沒有居中，只有給了寬度，它才會將元素相對于父元素居中。

導航欄的實現

這里導航欄使用無序列表 + a鏈接來實現，我們先寫上對應的HTML代碼

        
首頁
        
列表頁
        
詳細頁
        
404
        
MZ-NetBlog主題
        
IT技術筆記
        
源碼分享
        
靠譜網賺
        
資訊分享

然后通過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來定義

    
        

                

                        
統計信息
                        
聯系站長
                
        

    
        

            
日志總數:888篇
            
網站運行:88天
        

上方的導航可以沿用之前的導航欄的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);
}

文章項的制作

文章列表中有具體的文章項，這個文章項可以簡單的分為幾個部分：圖片、標題、文章屬性等等內容、文章的摘要；在這里我將它們都作為同級元素，然后調整浮動以及大小，它自然就會按照這樣的布局進行排列。

    
想要制作小箭頭首先需要回歸一下CSS中講到的border屬性，我們知道border表示的是邊框，我們可以通過設置border的值來規定邊框的大小顏色等等屬性，那么當我們在四個邊上都規定邊框的時候，邊框是如何來顯示的呢，我們寫下如下的實例


.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代碼如下:


對應的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還是得會的，所以我想先抽點時間好好補一下這方面的內容。
           
               
                                           
                       
                 

            
                     

                 

                                                                                                                    
                         云服務器
                                             
                         GPU云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               東湖中學
                                                                                                           優能中學vps
                                                                                                           html css
                                                                                                           HTML+CSS
                                                         
                 
               
              
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1570.html
               
                      
               

                 
                                  
上一篇：重構一段基于原生JavaScript的表格繪制代碼
  
                                                
                                       
下一篇：基于Vue實現圖片在指定區域內移動