一个简单的html界面 | 青训营HTML部分 CSS部分 JavaScript部分总结：这个是一个简单的模仿闲鱼交

HTML部分

<!DOCTYPE html>
<html>
<head>
  <title>闲鱼交易市场</title>
  <link rel="stylesheet" type="text/css" href="闲鱼.css">
</head>
<body>
  <header>
    <h1>闲鱼交易市场</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">发布商品</a></li>
        <li><a href="#">已选商品</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">个人中心</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section id="search">
      <input type="text" placeholder="搜索商品">
      <button>搜索</button>
    </section>
    
    <section id="products">
      <!-- 商品列表 -->
    </section>
  </main>

  <script src="闲鱼.js"></script>
</body>
</html>

CSS部分

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #c99191;
  color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

nav ul li a {
  color: #333;
  text-decoration: none;
}

main {
  padding: 20px;
}

#search input {
  padding: 5px;
  width: 300px;
}

#search button {
  padding: 5px 10px;
}

#products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.product {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

.product img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}

JavaScript部分

const productsData = [
    { id: 1, name: "商品1", price: 100, image: "product1.jpg" },
    { id: 2, name: "商品2", price: 200, image: "product2.jpg" },
    { id: 3, name: "商品3", price: 300, image: "product3.jpg" },
    { id: 4, name: "商品4", price: 150, image: "product4.jpg" },
    { id: 5, name: "商品5", price: 250, image: "product5.jpg" },
    { id: 6, name: "商品6", price: 320, image: "product6.jpg" },
    { id: 7, name: "商品7", price: 350, image: "product7.jpg" },
    { id: 8, name: "商品8", price: 50, image: "product8.jpg" },
    { id: 9, name: "商品9", price: 220, image: "product9.jpg" },
  ];
  
  const productsContainer = document.getElementById("products");
  
  function generateProductsList() {
    productsContainer.innerHTML = "";
  
    productsData.forEach((product) => {
      const productElement = document.createElement("div");
      productElement.classList.add("product");
  
      const imageElement = document.createElement("img");
      imageElement.src = product.image;
      productElement.appendChild(imageElement);
  
      const productInfo = document.createElement("p");
      productInfo.innerHTML = `商品名称：${product.name}<br>价格：${product.price}`;
      productElement.appendChild(productInfo);
  
      productsContainer.appendChild(productElement);
    });
  }
  window.addEventListener("load", generateProductsList);

总结： 这个是一个简单的模仿闲鱼交易市场来写的一个基本的前端界面，还是收获了一些，对创建商品元素div，创建图片元素img有了深刻的认识，慢慢提高了对html，JavaScript以及css的了解，后面会试着去学然后写一个注册界面，利用express，Ajax还有nodejs与后端的mysql进行连接，实现一个前后端的交互的功能，奥利给，菜鸟前端小白！