文章頁面的設(shè)計跟主頁差不多，頁頭，底部邊欄，還有頁腳都是一樣的，不同是，頁面的主內(nèi)容區(qū)域分成兩部分 ... 左邊占用 8 個網(wǎng)格寬度，顯示文章的內(nèi)容，比如標(biāo)題，正文，文章的評論等等 ... 右邊的邊欄占用 4 個網(wǎng)格的寬度 ...

我們可以直接復(fù)制一份之前創(chuàng)建的網(wǎng)頁，然后再修改一下 ... 復(fù)制一份 ... 命名為 article.html .... 然后打開這個網(wǎng)頁 ... 刪掉網(wǎng)頁里面的內(nèi)容列表塊的內(nèi)容 ...

這個區(qū)域我們要可以分成兩部分 ... 先輸入一組

... 添加一個 .row 的類 ... 在這組 標(biāo)簽里，再輸入兩組 標(biāo)簽 ... 這兩組 標(biāo)簽會分成兩塊顯示在同一排 ...

第一組

標(biāo)簽上，添加一個 .span8 的類 ... 第二組 標(biāo)簽里，添加一個 .span4 的類 ...

把分頁導(dǎo)航和面包屑也放在第一組

標(biāo)簽里 ... 然后在它們的上面，先輸入文章的標(biāo)題 ... 可以使用

標(biāo)簽 ...

內(nèi)容的大標(biāo)題

，在這個

標(biāo)簽上再定義一個類 .article-title 一會兒用這個類給文章的標(biāo)題添加點樣式 ...

footer

標(biāo)題的下面是文章的發(fā)布日期，分類，標(biāo)簽，和評論鏈接這些內(nèi)容 ... 這部分內(nèi)容可以放在 標(biāo)簽里 ...

，在上面添加一個 .content-meta 類 ...

在它的里面分別是文章的發(fā)布日期 ... 使用 標(biāo)簽 ...

2013-01-10

然后是分類 ... 把它放在一組 標(biāo)簽里 ...

后院婚禮

后面是內(nèi)容的標(biāo)簽 ... 同樣把它放在一組 標(biāo)簽里 ... 如果需要，我們可以在這組 標(biāo)簽上定義 css 類，這樣可以專門針對這個 css 類添加一些樣式 ...

秋天

最后是文章評論的數(shù)量 ....

3

這里每一項內(nèi)容的前面我們可以添加一個小圖標(biāo) ... 打開 Bootstrap 項目的網(wǎng)站 ... 打開 Base CSS ... 點擊 Icons ...

在這里你可以找?guī)讉€合適的圖標(biāo) ，使用對應(yīng)的圖標(biāo)的類就可以在網(wǎng)頁上添加對應(yīng)的圖標(biāo) ... 回到網(wǎng)頁的代碼模式下 ...

用 標(biāo)簽 ... 然后添加對應(yīng)的圖標(biāo)類 ... 日期的圖標(biāo)是 icon-calendar ....

分類的前面添加一個 icon-book 圖標(biāo) ... 標(biāo)簽前面添加一個 icon-tags 圖標(biāo) ...

評論數(shù)量的前面添加一個 icon-comment 圖標(biāo) ...

#content

在這部分內(nèi)容的下面就是文章的內(nèi)容... 先輸入一組

標(biāo)簽 ... 然后定義一個 #content 的 id ...

這組

標(biāo)簽里包裝的就是文章的正文 ...

先插入一張圖片 ...

在圖片下面，再添加點文字 ... (準(zhǔn)備好文字內(nèi)容 ... )

文章內(nèi)容樣式

下面給文章的內(nèi)容添加點樣式，打開網(wǎng)頁的樣式表 ... 輸入一段注釋 ...

然后輸入 .article-title{} 給文章的標(biāo)題添加一個下邊的外邊距 ...

#content{} 給文章的正文的上邊和下面添加一個 20px 的外邊距...

#content img{} 給文章正文里面圖片，添加一個 5px 的下邊的外邊距 ...

這樣文章的內(nèi)容基本就處理好了，下面視頻我們來看一下文章的評論 ...

/*

* 文章內(nèi)容樣式

*/

.article-title{

margin-bottom: 30px;

}

#content{

margin: 20px 0;

}

#content img{

margin-bottom: 5px;

}

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的html5文章页面,文章页面的设计《 HTML5 与 Bootstrap 应用实例 》的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。