網頁思路:

在正式編寫前，給網頁結構大致劃分出導航欄（nav）、內容（content）、底部（footer）等div布局

布局好之后，再在CSS文件中，完整詳細的補充div盒子的寬、高、背景顏色等樣式。由于網頁的元素分為內聯元素和塊狀元素，有時候適當的使用display屬性轉換。
其實不管是框架還是內容每一個都可以看成盒子布局

網頁大致布局好之后，再填充詳細完成里面的元素樣式。
里面內容也是建議分塊布局寫內容，再在CSS文件中編輯樣式，
再分塊布局再編輯樣式

整體效果圖:

?如上所說我們可把一個網頁分為三步驟 導航欄（nav）、內容（content）、底部（footer）接下來展示我們網頁效果以及代碼分享

導航欄效果圖展示：

?導航欄代碼展示：

HTML：

?CSS:

注：由于每個瀏覽器的問題，網頁與瀏覽器會有一定的邊距。我比較習慣在CSS布局里像這樣設置，就解決了這個問題。

margin:0? padding:0

因為導航欄上有個圖片可直接在HTML里顯示，在通過css進行設置盒子內容寬與高

padding-top 屬性設置元素的上內邊距（空間）

創建水平導航欄，可以使用inline和float兩種方式
將列表項設置為內聯元素

默認情況下，<li>元素是塊元素。 在這里，我們刪除每個列表項之前和之后的換行符，以將其顯示在一行上

創建水平導航欄的另一種方法是浮動<li>元素，并為導航鏈接<a>指定布局

內容效果圖展示：

?內容代碼實現：

HTML代碼：

?

?

?CSS代碼：

?

?注：內容部分使用<table> 標簽定義 HTML 表格。

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。

更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素

這里使用class="left"，來設置寬度width 與水平對齊text-align

<input> 標簽用于搜集用戶信息。

根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。

底部效果圖展示：

?底部代碼實現：

HTML代碼：

?CSS代碼：

?

注:使用id選擇器進行編輯內容 用p標簽進行段落劃分，設置內容寬與高，和文字大小，與字體顏色和背景顏色

text-align 屬性規定元素中的文本的水平對齊方式。

padding-top 屬性設置元素的上內邊距

margin-top 屬性設置元素的上外邊距

line-height 屬性設置行間的距離（行高）

以上為千年之戀全部代碼，需要圖片文件的可評論區留言，進行自我練習

總結

以上是生活随笔為你收集整理的千年之恋HTML+CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

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