这是基础校园二手交易框架

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>校园二手交易</title>
  <style>
      /* Reset stylesheet */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      /* Global styles */
      body {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
      }
      
      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: #333;
        color: #fff;
      }
      
      nav ul {
        display: flex;
      }
      
      nav ul li {
        margin: 0 10px;
      }
      
      nav ul li a {
        color: #fff;
        text-decoration: none;
      }
      
      form input {
        padding: 10px;
        border: none;
        border-radius: 5px;
        margin-right: 10px;
      }
      
      form button {
        background-color: #fff;
        color: #333;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
      }
      
      main {
        padding: 50px;
      }
      
      h2 {
        margin-bottom: 30px;
      }
      
      #categories ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      
      #categories li {
        flex-basis: calc(20% - 20px);
        margin-bottom: 20px;
      }
      
      #categories a {
        display: block;
        padding: 10px;
        background-color: #eee;
        text-align: center;
        color: #333;
        text-decoration: none;
      }
      
      #featured ul,
      #popular ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      
      #featured li,
      #popular li {
        flex-basis: calc(25% - 20px);
        margin-bottom: 20px;
      }
      
      #featured a,
      #popular a {
        display: block;
        text-align: center;
        color: #333;
        text-decoration: none;
      }
      
      #featured img,
      #popular img {
        width: 100%;
      }
      
      .price {
        display: block;
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
      }
      
      footer {
        text-align: center;
        padding: 20px;
        background-color: #333;
        color: #fff;
      }

  </style>
  <link rel="stylesheet" href="style.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>
      </ul>
    </nav>
    <form action="#" method="get">
      <input type="text" name="search" id="search" placeholder="搜索商品...">
      <button type="submit">搜索</button>
    </form>
  </header>
  <main>
    <section id="categories">
      <h2>商品分类</h2>
      <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>
        <li><a href="#">其他</a></li>
      </ul>
    </section>
    <section id="featured">
      <h2>推荐商品</h2>
      <ul>
        <li>
          <a href="#">
            <img src="product1.jpg" alt="商品1">
            <h3>商品1</h3>
            <p>商品1的描述</p>
            <span class="price">￥100</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="product2.jpg" alt="商品2">
            <h3>商品2</h3>
            <p>商品2的描述</p>
            <span class="price">￥200</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="product3.jpg" alt="商品3">
            <h3>商品3</h3>
            <p>商品3的描述</p>
            <span class="price">￥300</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="product4.jpg" alt="商品4">
            <h3>商品4</h3>
            <p>商品4的描述</p>
            <span class="price">￥400</span>
          </a>
        </li>
      </ul>
    </section>
    <section id="popular">
      <h2>热门商品</h2>
      <ul>
        <li>
          <a href="#">
            <img src="product5.jpg" alt="商品5">
            <h3>商品5</h3>
            <p>商品5的描述</p>
            <span class="price">￥500</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="product6.jpg" alt="商品6">
            <h3>商品6</h3>
            <p>商品6的描述</p>
            <span class="price">￥600</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="product7.jpg" alt="商品7">
            <h3>商品7</h3>
            <p>商品7的描述</p>
            <span class="price">￥700</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="product8.jpg" alt="商品8">
            <h3>商品8</h3>
            <p>商品8的描述</p>
            <span class="price">￥800</span>
          </a>
        </li>
      </ul>
    </section>
  </main>
  <footer>
    <p>版权所有 &copy; 2021 校园二手交易</p>
  </footer>
</body>
</html>

效果图：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/205757.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

七牛云产品使用介绍之CDN篇

七牛云产品使用介绍之CDN篇

上一篇介绍了七牛云的Kodo对象存储&#xff0c;并用Java SDK实现将本地文件上传到bucekt&#xff0c;接下来是对CDN产品的介绍 CDN&#xff08;内容分发网络&#xff09;&#xff1a;通过多级缓存实现对Kodo中的资源或者自己网站的资源的加速访问&#xff0c;让你的系统更快更强…
阅读更多...
复旦、人大等发布大五人格+MBTI测试 角色扮演AI特质还原率达82.8%

复旦、人大等发布大五人格+MBTI测试 角色扮演AI特质还原率达82.8%

近期&#xff0c;由复旦大学和中国人民大学合作的Chat凉宫春日团队发布了一项关于AI角色扮演的研究。该研究强调了良好的人设还原度对于评价AI角色扮演的重要性&#xff0c;特质还原率高达82.8%。研究使用了大五人格的NEO-FFI问卷和MBTI的16Personalities测试&#xff0c;并通过…
阅读更多...
交流充电桩测试参考标准是哪些

交流充电桩测试参考标准是哪些

功能性能测试&#xff1a;这是评价交流充电桩性能的重要标准&#xff0c;包括充电效率、充电稳定性、充电模式等。充电效率主要检查充电桩的充电功率、充电时间等&#xff1b;充电稳定性主要检查充电桩的电压、电流波动等&#xff1b;充电模式主要检查充电桩的恒流充电、恒压充…
阅读更多...
数据集笔记：Pems 自行下载数据+python处理

数据集笔记：Pems 自行下载数据+python处理

以下载District 4的各station每5分钟的车速为例 1 PEMS网站下载数据 点击红色的 选择需要的station和区域&#xff0c;点击search&#xff0c;就是对应的数据&#xff0c;点击数据即可下载 &#xff08;这个是station每5分钟的速度数据&#xff09; 2 pems 速度数据 2.1 每一…
阅读更多...
Linux系统管理与服务器安全：构建稳健云数据中心

Linux系统管理与服务器安全：构建稳健云数据中心

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在当今数字化时代&#xff0c;云数据中心已经成…
阅读更多...
今日定音，博通以610亿美元成功收购VMware | 百能云芯

今日定音，博通以610亿美元成功收购VMware | 百能云芯

博通&#xff08;Broadcom&#xff09;日前宣布&#xff0c;已获得中国监管机构的批准&#xff0c;将于今日完成对云计算公司VMware的收购交易。这意味着&#xff0c;610亿美元的收购案正式收关。 据悉&#xff0c;中国市场监管总局在11月21日晚发布了有关附加限制性条件批准博…
阅读更多...
HT513 I2S输入的音频功放的应用场景

HT513 I2S输入的音频功放的应用场景

HT513 I2S输入的音频功放的应用场景于&#xff1a;・智N家居 ・智N玩具 ・IoT设备 ・游戏设备・智N音箱 ・其他锂电/5V设备等等。 HT513内部集成了DA转换器&#xff0c;其I2S输入支持32-bit字节&#xff0c;并且可自动监测采样频率&#xff0c;支持192kHz。 HT513集成的D类音…
阅读更多...
小雪来袭，安全无忧

小雪来袭，安全无忧

今日#小雪# 智安网络提前为你的云保驾护航 让安全成为你的最佳伙伴#智安网络# ​​​
阅读更多...
Java继承和多态

Java继承和多态

文章目录 继承成员继承构造方法super和this的区别代码块构造顺序 限定修饰符final继承和组合 多态向上转型重写动态绑定重写注意事项 向下转型多态优点注意 继承 成员继承 class Animal{public String name;public int age;public int a10;public void doSomething(){System.…
阅读更多...
[Python人工智能] 四十.命名实体识别 (1)基于BiLSTM-CRF的威胁情报实体识别万字详解

[Python人工智能] 四十.命名实体识别 (1)基于BiLSTM-CRF的威胁情报实体识别万字详解

从本专栏开始，作者正式研究Python深度学习、神经网络及人工智能相关知识。前一篇文章普及VS Code配置Keras深度学习环境，并对比常用的深度学习框架，最后普及手写数字识别案例。这篇文章将讲解如何实现威胁情报实体识别，利用BiLSTM-CRF算法实现对ATT&CK相关的技战术实体…
阅读更多...
获取当前用户信息的几种方式

获取当前用户信息的几种方式

说明&#xff1a;在开发中&#xff0c;我们经常需要获取当前操作的用户信息&#xff0c;如创建用户、创建订单时&#xff0c;我们需要记录下创建人&#xff0c;本文介绍获取当前用户信息的三种方式。 方式一&#xff1a;使用ThreadLocal ThreadLocal本质上是一个Map&#xff…
阅读更多...
2023年中国感应电炉产业链、产量、销量及市场规模分析[图]

2023年中国感应电炉产业链、产量、销量及市场规模分析[图]

感应电炉行业定义是指使用电磁感应原理&#xff0c;通过感应电流使金属工件在短时间内达到预定温度的工业设备。广泛应用于冶金、机械、汽车、航空、航天、船舶、电子、医疗器械等领域。 感应电炉行业产业链 资料来源&#xff1a;共研产业咨询&#xff08;共研网&#xff09; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023