HTML滿屋花源代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滿屋花源</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>歡迎來到滿屋花源</h1> </header> <nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">商品</a></li> <li><a href="#">關于我們</a></li> <li><a href="#">聯系我們</a></li> </ul> </nav> <main> <h2>熱銷商品</h2> <div class="product"> <img src="product1.jpg" alt="商品1"> <h3>商品名稱1</h3> <p>商品描述1</p> <p class="price">￥99.00</p> <a href="#" class="buy">立即購買</a> </div> <div class="product"> <img src="product2.jpg" alt="商品2"> <h3>商品名稱2</h3> <p>商品描述2</p> <p class="price">￥199.00</p> <a href="#" class="buy">立即購買</a> </div> <div class="product"> <img src="product3.jpg" alt="商品3"> <h3>商品名稱3</h3> <p>商品描述3</p> <p class="price">￥299.00</p> <a href="#" class="buy">立即購買</a> </div> </main> <footer> <p>?2021 滿屋花源 版權所有</p> </footer> </body> </html>
上面這段HTML代碼是一個簡單的“滿屋花源”網站，包含了網站的基本結構和熱銷商品的展示。其中使用了header、nav、main、footer等標簽，使得網站結構更加清晰明了。使用了外部樣式表style.css來美化頁面，對每個商品的展示使用了div標簽，對各個商品的名稱、描述、價格、購買鏈接也進行了相應的標記，以便搜索引擎對其進行收錄和分析。
上一篇css ul去默認樣式
下一篇vue的http攔截