文章頁面的設計跟主頁差不多，頁頭，底部邊欄，還有頁腳都是一樣的，不同是，頁面的主內容區域分成兩部分 ... 左邊占用 8 個網格寬度，顯示文章的內容，比如標題，正文，文章的評論等等 ... 右邊的邊欄占用 4 個網格的寬度 ...

我們可以直接復制一份之前創建的網頁，然后再修改一下 ... 復制一份 ... 命名為 article.html .... 然后打開這個網頁 ... 刪掉網頁里面的內容列表塊的內容 ...

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

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

第一組

標簽上，添加一個 .span8 的類 ... 第二組 標簽里，添加一個 .span4 的類 ...

把分頁導航和面包屑也放在第一組

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

標簽 ...

內容的大標題

，在這個

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

footer

標題的下面是文章的發布日期，分類，標簽，和評論鏈接這些內容 ... 這部分內容可以放在 標簽里 ...

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

在它的里面分別是文章的發布日期 ... 使用 標簽 ...

2013-01-10

然后是分類 ... 把它放在一組 標簽里 ...

后院婚禮

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

秋天

最后是文章評論的數量 ....

3

這里每一項內容的前面我們可以添加一個小圖標 ... 打開 Bootstrap 項目的網站 ... 打開 Base CSS ... 點擊 Icons ...

在這里你可以找幾個合適的圖標 ，使用對應的圖標的類就可以在網頁上添加對應的圖標 ... 回到網頁的代碼模式下 ...

用 標簽 ... 然后添加對應的圖標類 ... 日期的圖標是 icon-calendar ....

分類的前面添加一個 icon-book 圖標 ... 標簽前面添加一個 icon-tags 圖標 ...

評論數量的前面添加一個 icon-comment 圖標 ...

#content

在這部分內容的下面就是文章的內容... 先輸入一組

標簽 ... 然后定義一個 #content 的 id ...

這組

標簽里包裝的就是文章的正文 ...

先插入一張圖片 ...

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

文章內容樣式

下面給文章的內容添加點樣式，打開網頁的樣式表 ... 輸入一段注釋 ...

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

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

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

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

/*

* 文章內容樣式

*/

.article-title{

margin-bottom: 30px;

}

#content{

margin: 20px 0;

}

#content img{

margin-bottom: 5px;

}

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。