千年之恋HTML+CSS
網頁思路:
在正式編寫前，給網頁結構大致劃分出導航欄（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的全部內容，希望文章能夠幫你解決所遇到的問題。
