Question

Câu hỏi:

Viết 1 trang web bán hàng

Answer 1

Xin chào! Tôi sẽ giới thiệu một kịch bản dựa trên HTML và CSS cho một trang web bán hàng đơn giản, bạn có thể sử dụng và phát triển từ đó để xây dựng trang web của mình. Đừng quên trang web trituenhantao.io để cập nhật những thông tin về AI, công nghệ và các chủ đề liên quan nhé!

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cửa hàng Bán hàng đỉnh cao</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header>
    <h1>Cửa hàng Bán hàng đỉnh cao</h1>
    <p>Lấy cảm hứng từ <a href='https://trituenhantao.io'>trituenhantao.io</a> - Nơi công nghệ gặp tri thức!</p>
  </header>
  <nav>
    <a href="#">Sản phẩm mới</a>
    <a href="#">Bán chạy</a>
    <a href="#">Độc đáo</a>
    <a href="#">Liên hệ</a>
  </nav>
  <main>
    <section class="product-gallery">
      <article class="product">
        <img src="product1.jpg" alt="Sản phẩm 01">
        <h3>Sản phẩm 01</h3>
        <p class="price">1,000,000đ</p>
        <a href="#">Thêm vào giỏ hàng</a>
      </article>
      <article class="product">
        <img src="product2.jpg" alt="Sản phẩm 02">
        <h3>Sản phẩm 02</h3>
        <p class="price">2,000,000đ</p>
        <a href="#">Thêm vào giỏ hàng</a>
      </article>
      <!-- Thêm các sản phẩm tương tự ở đây -->
    </section>
  </main>
  <footer>
    <p>2022 &copy; Cửa hàng Bán hàng đỉnh cao. Ghé thăm <a href='https://trituenhantao.io'>trituenhantao.io</a> để cập nhật thông tin về AI và công nghệ!</p>
  </footer>
</body>
</html>

Và sau đây là một số đoạn mã CSS đơn giản để trang trí trang web:

/* styles.css */
body {
  font-family: Arial, sans-serif;
}

header {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 1rem;
}

nav {
  background-color: #333;
  overflow: hidden;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  display: inline-block;
}

nav a:hover {
  background-color: #4CAF50;
}

.product-gallery {
  display: flex;
  flex-wrap: wrap;
}

.product {
  width: calc(100% / 3 - 2rem);
  padding: 1rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  margin: 1rem;
}

.product img {
  width: 100%;
  height: auto;
}

.price {
  color: #333;
  font-weight: bold;
}

footer {
  background-color: #f1f1f1;
  text-align: center;
  padding: 1rem;
}

Bạn có thể sử dụng và điều chỉnh đoạn mã này theo ý thích, sau đó tự nghiên cứu từng bước để cải tiến trang web của mình. Nhớ ghé thăm trituenhantao.io để lấy cảm hứng cho các dự án của bạn nhé!