首页dream weaver做口红网页首页代码

dream weaver做口红网页首页代码

时间: 2023-12-31 19:05:46 浏览: 103

以下是一个简单的口红网页首页代码，使用 Dreamweaver 编写： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Lipstick Home Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Lipstick</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section class="hero"> <h2>Discover a New Look</h2> <p>Our lipstick collection has a shade for every mood and occasion. Try them all and find your new go-to color!</p> <a href="#" class="button">Shop Now</a> </section> <section class="featured-products"> <h2>Featured Products</h2> <div class="product-grid"> <div class="product"> <img src="lipstick1.jpg" alt="Lipstick 1"> <h3>Lipstick 1</h3> <p>$19.99</p> <a href="#" class="button">Buy Now</a> </div> <div class="product"> <img src="lipstick2.jpg" alt="Lipstick 2"> <h3>Lipstick 2</h3> <p>$24.99</p> <a href="#" class="button">Buy Now</a> </div> <div class="product"> <img src="lipstick3.jpg" alt="Lipstick 3"> <h3>Lipstick 3</h3> <p>$29.99</p> <a href="#" class="button">Buy Now</a> </div> </div> </section> </main> <footer> <p>© 2021 Lipstick. All rights reserved.</p> </footer> </body> </html> ``` 在这段代码中，我们使用了 HTML 和 CSS 来创建一个简单的网页布局。在头部（`header`）中，我们包含了网站的标题和导航菜单，而在主体（`main`）中，我们包含了一个主要的宣传区域和一些精选产品。在底部（`footer`）中，我们包含了版权信息。请注意，这只是一个简单的示例，实际的网页可能需要更多的页面元素和样式。

阅读全文