勇闯前后端——前端：梭哈原生项目之手搭最简单的电商界面

前言

下面上一点强度，笔者计划记录一下手搭一个超级无敌简单的电商界面的超级小项目的笔记，最后呢，笔者的效果看起来像是这样的

谈不上好看，但是好歹也是自己试出来的，记录一下吧（悲）

构思过程

很简单，对于原生项目而言，我们要做的手工活很多。一个原生项目的三个骨架在于：HTML，CSS和JS。关于JS，我们可以放到后面，因为被施加行为的对象还不存在，CSS也可以放到后面，或者贯穿于优化细节的全程，因为他是给我们的元素添加血肉的。所以，让我们从HTML开始，即做这些事情：

创建 index.html
写最基本的页面结构：header / sidebar / grid / pagination 占位结构
不写样式

笔者大致思考了一下，一个最简单的电商项目的Layout，无非就是三个大的Part组成。顶部的Header，可以是我们的电商的Title和一点功能性的按钮（Tips:笔者没做，只是有一个样子（笑））。中间的是一个大的Part，分为左右两侧，左侧是一个SideBar，可以做一些简单的过滤功能（Tips：我也没做），右侧的话就是一个简单的Grid布局展示具体的电商商品的模样了。这里笔者打算为了看起来更加像是独立的部分（组件），这里就<div class="product-card"></div>包一下了。再下面就是Footer页脚了。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final Practice Of HTML/CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="shop_header">
        <h1>Shop</h1> <button class="filter_button">🔍</button>
    </header>
    <div class="main_page">
        <aside class="sidebar">
            <h2> Filters </h2>
            <ul>
                <li><label><input type="checkbox">A</label></li>
                <li><label><input type="checkbox">B</label></li>
                <li><label><input type="checkbox">C</label></li>
            </ul>
        </aside>
        <main class="product-container"> <!-- Cards -->
            <div class="product-card">
                <h3>Product A</h3> <img src="https://picsum.photos/300/200" alt="Product-A">
                <p>price: 11.41541</p>
            </div>
            
            <!-- 后面的话改进好了再复制几份看看 -->
        </main>
    </div>
    <footer class="navigation-bar"> 
        <button>Prev</button> 
        <span>1 / 10</span> 
        <button>Next</button> 
    </footer>
</body>

</html>

关于这里涉及到的知识细节，笔者不在计划重复了，没有意义，如果有疑惑的朋友自行

基本的骨架搭好了，下一步就是进一步的完善一下最最基本的样式。笔者这里给了GPT，感兴趣的朋友可以对着练习一下。

类/选择器	目标/需求	说明/提示	可扩展练习
`*`	清除所有元素默认外边距和内边距，设置盒模型为 `border-box`	盒模型包含边框和内边距，方便布局	尝试只对 `div` 元素使用 box-sizing，看看效果差异
`:root`	定义全局 CSS 变量：背景色、文字色、主色、边框色、侧边栏宽度、页面最大宽度	CSS 变量方便统一管理主题	尝试增加一个 `--color-accent` 变量并在按钮上使用
`body`	设置字体族、文字颜色、背景色、行高	基础页面样式，保证排版美观	尝试修改字体或增加 `letter-spacing` 来改善可读性
`img`	图片块级显示，最大宽度 100%	响应式图片，避免溢出父元素	尝试给图片添加圆角或阴影
`button`	去掉默认边框和背景，鼠标悬停显示手型	常用按钮样式，便于自定义	尝试添加 hover 背景色或边框效果
`.main_page`	最大宽度居中显示，添加内边距	主内容区布局	尝试增加左右 margin 或 padding 调整页面呼吸感
`.shop_header`	顶部导航栏：左右布局、垂直居中、内边距、白底、下边框	使用 Flex 布局，常见头部样式	尝试给导航栏增加悬停颜色变化或阴影
`.sidebar`	侧边栏：内边距、白底、右边框	常见侧边布局	尝试固定侧边栏宽度，并在小屏幕上隐藏或折叠
`.navigation-bar`	顶部间距、内边距、文本居中	用于分页或导航按钮布局	尝试增加 flex 布局，让按钮横向排列或间距自适应

笔者的做法：

类/选择器	样式需求	说明
`*`	`margin: 0; padding: 0; box-sizing: border-box;`	清除默认外边距与内边距，并使用 border-box 盒模型
`:root`	`--color-bg: #f8f8f8; --color-text: #333; --color-primary: #2a7ae4; --color-border: #ddd; --sidebar-width: 240px; --max-width: 1200px;`	定义全局 CSS 变量，方便主题管理
`body`	`font-family: Arial, Helvetica, sans-serif; color: var(--color-text); background-color: var(--color-bg); line-height: 1.6;`	设置页面字体、文字颜色、背景色和行高
`img`	`display: block; max-width: 100%;`	图片块级显示，响应式宽度限制
`button`	`border: none; background: none; cursor: pointer;`	去掉默认边框和背景，鼠标悬停可点击
`.main_page`	`max-width: var(--max-width); margin: 0 auto; padding: 1rem;`	页面主内容区最大宽度居中，添加内边距
`.shop_header`	`display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: white; border-bottom-width: 1px; border-bottom-color: var(--color-border);`	顶部导航栏，左右布局，带下边框
`.sidebar`	`padding: 1rem; background-color: white; border-right-width: 1px; border-right-color: var(--color-border);`	侧边栏布局，带右边框
`.navigation-bar`	`margin-top: 2rem; padding: 1rem; text-align: center;`	导航栏或分页条布局，顶部间距和居中对齐

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-bg: #f8f8f8;
    --color-text: #333;
    --color-primary: #2a7ae4;
    --color-border: #ddd;
    --sidebar-width: 240px;
    --max-width: 1200px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

.main_page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;
}

.shop_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: white;
    border-bottom-width: 1px;
    border-bottom-color: var(--color-border);
}

.sidebar {
    padding: 1rem;
    background-color: white;
    border-right-width: 1px;
    border-right-color: var(--color-border);
}

.navigation-bar {
    margin-top: 2rem;
    padding: 1rem;
    text-align: center;
}

做外层 Grid

到这里，我们准备处理一下最核心的main_page

.main_page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;
}

我们要给它加 两列布局：

.main_page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;

    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: 1.5rem;
}

这样写的原因很简单，我们要让左侧的sidebar是固定的大小，所以设计成

grid-template-columns: var(--sidebar-width) 1fr; 左边固定 sidebar，右边自适应
gap: 1.5rem; 两栏之间的空隙

给 product-container 设置 grid 卡片布局

<main class="product-container">
    <div class="product-card">...</div>
</main>

我们要让 product 卡片自动排成 最佳的列（最小宽度限制）。

.product-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

解释一下

repeat(auto-fill, minmax(220px, 1fr))
- 每个卡片最小 220px
- 多余空间自动铺满
自适应情况：
- 宽屏可能排 4 列
- 中等屏排 3 列
- 窄屏自动变 2 列甚至 1 列（还没加 mobile，但 grid 已经有响应性）

商品卡片美化

我们先让卡片更像商品卡片一点：

.product-card {
    background: white;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

让图片固定比例（不拉伸、不压缩）

在下一步，我们就准备开始对着细节进行优化了，我们要让图片成为固定的比例，不拉伸、不压缩，我们在 .product-card img 添加：

.product-card img {
    width: 100%;
    aspect-ratio: 4 / 3; /* 控制比例，4:3 比较常见 */
    object-fit: cover;   /* 超过范围裁剪，不会变形 */
    border-radius: 6px;
}

优化商品卡片排版

更新 .product-card：

.product-card {
    background: white;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

hover 效果（更像电商卡片）

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

格式化价格

如果你用 <p>，UI 会有点普通。

我们加一点样式：

.product-card .price {
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: bold;
}

同时更新 HTML：

<p class="price">¥ 11.41</p>

✔️ 4.5（可选）标题文字两行省略（更像真实电商）

以后你会经常用到这个小技巧：

.product-card h3 {
    font-size: 1rem;
    line-height: 1.4;
    height: 2.8rem; /* 约等于两行高度 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制为两行 */
    -webkit-box-orient: vertical;
}

优化一下侧栏

我们注意到侧栏看起来太难崩了，不协调，咱们给每个 checkbox 加一个 span，用于自定义样式：

<ul class="filter-list">
  <li>
    <label>
      <input type="checkbox">
      <span class="checkmark"></span>
      A
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">
      <span class="checkmark"></span>
      B
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">
      <span class="checkmark"></span>
      C
    </label>
  </li>
</ul>

2. CSS 美化 Checkbox

/* 隐藏原生 checkbox */
.filter-list input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* label 容器 */
.filter-list li label {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}

/* 自定义 checkmark */
.filter-list li .checkmark {
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  width: 20px;
  background-color: white;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* hover 效果 */
.filter-list li label:hover .checkmark {
  border-color: var(--color-primary);
}

/* 选中样式 */
.filter-list li input:checked ~ .checkmark {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 打勾符号 */
.filter-list li .checkmark::after {
  content: "";
  position: absolute;
  display: none;
}

.filter-list li input:checked ~ .checkmark::after {
  display: block;
}

.filter-list li .checkmark::after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

使用 Media Query做到配合的响应式

在 styles.css 最后，添加：

/* 手机端布局 */
@media (max-width: 768px) {
    .main_page {
        grid-template-columns: 1fr; /* sidebar + main 一列布局 */
    }

    .sidebar {
        display: none; /* 默认隐藏 sidebar */
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--sidebar-width);
        background: white;
        z-index: 100;
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
        padding: 1rem;
        overflow-y: auto;
    }

    .sidebar.active {
        display: block;
    }

    /* header 按钮显示 */
    .filter_button {
        display: block;
    }

    /* product grid 调整间距 */
    .product-container {
        grid-template-columns: 1fr; /* 手机端一列 */
        gap: 1rem;
    }
}

CSS 美化分页按钮

剩下的就是咱们的footer部分了

.navigation-bar {
    margin-top: 2rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background: white;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-radius: 8px;
}

.navigation-bar button {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: white;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.navigation-bar button:hover {
    background: #185ac4;
    transform: translateY(-2px);
}

.navigation-bar .current-page {
    font-weight: bold;
    color: var(--color-primary);
}

然后在 HTML <footer> 中：

<footer class="navigation-bar">
    <button class="prev">Prev</button>
    <span class="page-number">1 / 10</span>
    <button class="next">Next</button>
</footer>

我们用 JS 来控制页码变化，模拟翻页交互。

JS 小交互

<script>
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const pageNumber = document.querySelector('.page-number');

let currentPage = 1;
const totalPages = 10;

prevBtn.addEventListener('click', () => {
    if(currentPage > 1){
        currentPage--;
        pageNumber.textContent = `${currentPage} / ${totalPages}`;
    }
});

nextBtn.addEventListener('click', () => {
    if(currentPage < totalPages){
        currentPage++;
        pageNumber.textContent = `${currentPage} / ${totalPages}`;
    }
});
</script>

完事

到这里，基本上就完事了，笔者把自己的文件贴出来：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final Practice Of HTML/CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="shop_header">
        <h1>Shop</h1>
        <button class="filter_button">🔍</button>
    </header>

    <div class="main_page">
        <aside class="sidebar">
            <h2> Filters </h2>
            <ul>
                <ul class="filter-list">
                    <li><label>
                            <input type="checkbox">
                            <span class="checkmark"></span>
                            A</label></li>

                    <li><label>
                            <input type="checkbox">
                            <span class="checkmark"></span>
                            B</label></li>
                    <li><label>
                            <input type="checkbox">
                            <span class="checkmark"></span>
                            C</label></li>
                </ul>

            </ul>
        </aside>

        <main class="product-container">
            <!-- Cards -->
            <div class="product-card">
                <img src="https://picsum.photos/300/200" alt="Product-A">
                <h3>Product A</h3>
                <p class="price">price: 11.41541</p>
            </div>
            <div class="product-card">
                <img src="https://picsum.photos/300/200" alt="Product-A">
                <h3>Product A</h3>
                <p class="price">price: 11.41541</p>
            </div>
            <div class="product-card">
                <img src="https://picsum.photos/300/200" alt="Product-A">
                <h3>Product A</h3>
                <p class="price">price: 11.41541</p>
            </div>
            <div class="product-card">
                <img src="https://picsum.photos/300/200" alt="Product-A">
                <h3>Product A</h3>
                <p class="price">price: 11.41541</p>
            </div>
            <div class="product-card">
                <img src="https://picsum.photos/300/200" alt="Product-A">
                <h3>Product A</h3>
                <p class="price">price: 11.41541</p>
            </div>
        </main>
    </div>

    <footer class="navigation-bar">
        <button class="prev">Prev</button>
        <span class="page-number">1 / 10</span>
        <button class="next">Next</button>
    </footer>
</body>

<script>

    const filterBtn = document.querySelector('.filter_button');
    const sidebar = document.querySelector('.sidebar');

    filterBtn.addEventListener('click', () => {
        sidebar.classList.toggle('active');
    });

    sidebar.addEventListener('click', (e) => {
        if (e.target.tagName === 'A' || e.target.tagName === 'LI') {
            sidebar.classList.remove('active');
        }
    });

    const next_button = document.querySelector('.next')
    const prev_button = document.querySelector('.prev')
    const page_number_span = document.querySelector(".page-number")

    let currentPage = 1;
    const totalPages = 10;

    next_button.addEventListener('click', () => {
        if (currentPage <= totalPages) {
            console.log("next page")
            currentPage++;
            page_number_span.textContent = `${currentPage} / ${totalPages}`;
        }
        prev_button.disabled = currentPage === 1;
        next_button.disabled = currentPage === totalPages;
    })

    prev_button.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            page_number_span.textContent = `${currentPage} / ${totalPages}`;
        }
        prev_button.disabled = currentPage === 1;
        next_button.disabled = currentPage === totalPages;
    })

</script>

</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-bg: #f8f8f8;
    --color-text: #333;
    --color-primary: #2a7ae4;
    --color-border: #ddd;
    --sidebar-width: 240px;
    --max-width: 1200px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
}


button {
    border: none;
    background: none;
    cursor: pointer;
}

.main_page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;

    /* OK, we shell leave sidebar */
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: 1.5rem;
}

.shop_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: white;
    border-bottom-width: 1px;
    border-bottom-color: var(--color-border);
}

.sidebar {
    padding: 1rem;
    background-color: white;
    border-right-width: 1px;
    border-right-color: var(--color-border);
}

.filter-list input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.filter-list li label {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.filter-list li .checkmark {
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.filter-list li label:hover .checkmark {
    border-color: var(--color-primary);
}

.filter-list li input:checked~.checkmark {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}


.filter-list li .checkmark::after {
    content: "";
    position: absolute;
    display: none;
}

.filter-list li input:checked~.checkmark::after {
    display: block;
}

.filter-list li .checkmark::after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.navigation-bar {
    margin-top: 2rem;
    padding: 1rem;
    text-align: center;
}

.product-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background-color: wheat;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.product-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 6px;
}

.product-card .price {
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: bold;
}

.product-card h3 {
    font-size: 1rem;
    line-height: 1.4;
    height: 2.8rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.navigation-bar {
    margin-top: 2rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background: white;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-radius: 8px;
}

.navigation-bar button {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: white;
    border-radius: 6px;
    transition: 0.2s ease, transform 0.2s ease;
}

.navigation-bar button:hover {
    background: #185ac4;
    transform: translateY(-2px);
}

.navigation-bar .current-page {
    font-weight: bold;
    color: var(--color-primary);
}


.navigation-bar button:disabled {
    background: #aaa;
    cursor: not-allowed;
    transform: none;
}


@media (max-width: 768px) {
    .main_page {
        grid-template-columns: 1fr;
    }

    .sidebar {
        /* Hide these */
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--sidebar-width);
        background: white;
        z-index: 100;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
        padding: 1rem;
        overflow-y: auto;
    }

    .sidebar.active {
        display: block;
    }

    .filter_button {
        display: block;
    }

    .product-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}