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

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

最終的效果圖如下:

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

基本布局

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

大體上分為3個部分，頭部、內(nèi)容部分，以及下方的頁腳部分。
頭部可以分為上面的標題以及下方的導(dǎo)航部分，內(nèi)容部分又可以分為左邊和右邊兩個部分。然后根據(jù)區(qū)域的劃分，可以寫下大體的代碼:

然后再使用CSS的樣式規(guī)定具體的布局顏色:

*{
    margin:auto; /*只有設(shè)置了對應(yīng)的寬度，才會默認居中*/
    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;
}

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

導(dǎo)航欄的實現(xiàn)

這里導(dǎo)航欄使用無序列表 + a鏈接來實現(xiàn)，我們先寫上對應(yīng)的HTML代碼

        
首頁
        
列表頁
        
詳細頁
        
404
        
MZ-NetBlog主題
        
IT技術(shù)筆記
        
源碼分享
        
靠譜網(wǎng)賺
        
資訊分享

然后通過CSS樣式來調(diào)整

/*先去掉列表前的小圓點*/
.nav ul {
    list-style-type: none;
}

/*讓列表項左浮動，以便導(dǎo)航項可以橫向排列，同時設(shè)置右外邊距，讓各項可以分割開來*/
.nav ul li{
    float:left;
    margin-right:34px;
}

/*上述內(nèi)容已經(jīng)有了導(dǎo)航欄的雛形，剩下的就是設(shè)置導(dǎo)航項的字體、顏色、以及點擊的相關(guān)屬性*/
.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就可以制作對應(yīng)的導(dǎo)航欄了

左上角標簽頁的制作

從原始的網(wǎng)頁效果圖來看，標簽頁可以看成上下兩個部分，上方是一個導(dǎo)航欄，而下方則是一個div，這個div根據(jù)點擊導(dǎo)航上的具體項來顯示不同的內(nèi)容。因此它的大致內(nèi)容結(jié)構(gòu)可以用下面的HTML來定義

    
        

                

                        
統(tǒng)計信息
                        
聯(lián)系站長
                
        

    
        

            
日志總數(shù):888篇
            
網(wǎng)站運行:88天
        

上方的導(dǎo)航可以沿用之前的導(dǎo)航欄的CSS代碼，而下方只需要設(shè)置對應(yīng)的北京顏色即可，這里就不再貼出了

文章列表

文章列表采用的仍然是列表的方式，我們可以針對列表的每個項設(shè)置對應(yīng)的邊框，以及長度和寬度即可。下面只貼出對應(yīng)的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);
}

文章項的制作

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

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


.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;
}
刷新瀏覽器，我們發(fā)現(xiàn)它產(chǎn)生的是這樣的一個效果



之前在學(xué)習(xí)的時候我一直實驗的是border為1個像素，但是沒想到給邊框加粗后能產(chǎn)生這樣的效果，它能夠產(chǎn)生這樣一種像話框的效果，隨著邊框的加粗，中間的內(nèi)容越小，而這個畫框的邊框就越大。這個時候很容易就產(chǎn)生一種想法，隨著邊框的加粗，最終上下或者左右邊框完全占據(jù)元素的所有空間，而另一側(cè)為空，那么就可以產(chǎn)生一個類似于箭頭的效果，根據(jù)這個想法，我們再修改一下上面的CSS代碼
.div1{
                width:0px;
                height:0px;
                border-top:50px solid black;
                border-bottom:50px solid green;
                border-left:15px solid red;
                border-style: solid;
}
這個時候它的效果如下:



這樣我們把上下兩個邊框的眼色設(shè)置為父元素的背景色，左邊框設(shè)置為需要的顏色，就可以做一個小的箭頭了。而要調(diào)整它的寬度、角度等等只需要調(diào)整上下邊框的寬度即可。下面是箭頭最終的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;
}
搜索框的實現(xiàn)
這個搜索框我簡單的使用了一個帶邊框的文本輸入框加一個按鈕。它的HTML代碼如下:


對應(yīng)的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;
}
項目后記
這個頁面雖然說完成了，但是也是有一些不足的地方：

頁面中幾乎每一個元素寫了它的屬性，而且有的屬性是幾乎類似的，代碼只是簡單的完成了頁面沒有考慮到重用
頁面是靜態(tài)的，簡單的利用HTML+CSS來做展示，沒有交互的東西，而原始的模板是有的，交互這個的部分我想學(xué)習(xí)了JavaScript 和 JQuery之后再來加

雖然我主要用C/C++ 與Python做過一些服務(wù)程序和其他的Web程序，但是對于前端的相關(guān)內(nèi)容也僅僅是會用HTML，關(guān)于布局和CSS的東西幾乎不懂，而這次我想抽點時間學(xué)習(xí)一下這方面的內(nèi)容。
為什么會想要學(xué)習(xí)前端呢？之前不知道在哪看到這么一句話: "黑客一定是程序員，而程序員不一定是黑客", 作為一個初步邁入Web安全大門的我來說，想要深入Web安全就必須學(xué)會Web開發(fā)，而Web開發(fā)是繞不開前端的。雖然不要求有很高的前端水平，但是基本的布局、css、JavaScript、jQuery還是得會的，所以我想先抽點時間好好補一下這方面的內(nèi)容。
           
               
                                           
                       
                 

            
                     

                 

                                                                                                                    
                         GPU云服務(wù)器
                                             
                         云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               東湖中學(xué)
                                                                                                           優(yōu)能中學(xué)vps
                                                                                                           html css
                                                                                                           HTML+CSS
                                                         
                 
               
              
             
               

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

                 
                                  
上一篇：重構(gòu)一段基于原生JavaScript的表格繪制代碼
  
                                                
                                       
下一篇：基于Vue實現(xiàn)圖片在指定區(qū)域內(nèi)移動