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

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

最終的效果圖如下:

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

基本布局

從大體上看，它可以分為幾個(gè)部分：

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

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

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

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

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

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

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

然后通過(guò)CSS樣式來(lái)調(diào)整

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

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

/*上述內(nèi)容已經(jīng)有了導(dǎo)航欄的雛形，剩下的就是設(shè)置導(dǎo)航項(xiàng)的字體、顏色、以及點(diǎn)擊的相關(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;
}

通過(guò)上述的簡(jiǎn)單的CSS就可以制作對(duì)應(yīng)的導(dǎo)航欄了

左上角標(biāo)簽頁(yè)的制作

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

    
        

                

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

    
        

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

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

文章列表

文章列表采用的仍然是列表的方式，我們可以針對(duì)列表的每個(gè)項(xiàng)設(shè)置對(duì)應(yīng)的邊框，以及長(zhǎng)度和寬度即可。下面只貼出對(duì)應(yīng)的CSS代碼

/**列表本身屬性**/
.article-list{
    width:820px;
    height:960px;
    background-color:#fff;
    margin-top:15px;
}

/**列表項(xiàng)屬性**/
.article{
    width:820px;
    height: 192px;
    border-top: solid 1px rgb(234,234,234);
}

文章項(xiàng)的制作

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

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


.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)生的是這樣的一個(gè)效果



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



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


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

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

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

            
                     

                 

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

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

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