CSS綜合例項
在Web頁面中經常使用欄目顯示分類內容。本例將使用HTML和CSS結合編寫一個分類欄目模型,用於演示前面介紹的CSS應用。通過使用獨立的檔案定義樣式表,並在HTML文件中使用link標記與其連結,使HTML程式碼和CSS程式碼完全分離。在HTML文件中只負責輸出欄目的內容,而欄目的樣式則完全由CSS控制。建立一個名為list.html的HTML文件檔案,程式碼如下所示:
在上面的HTML檔案中輸出一個分類欄目,包括欄目標題、欄目內容區塊及內容列表等。但沒有定義欄目的顯示格式,而是連結一個外部樣式表文件style.css,由這個檔案中的CSS程式碼控制輸出欄目的樣式格式。程式碼如下所示:
通過將樣式檔案style.css加入到HTML檔案list.html中,則HTML文件中定義的各個元素使用了CSS進行控制,而HTML可以保持簡單明了的初衷。直接訪問list.html檔案的輸出結果如圖所示。
圖 HTML和CSS結合使用輸出欄目內容
>
最新評論