极其简洁的购物商城静态网站

电玩女神 2023-06-23 13:30 9阅读 0赞

# 极其简洁的购物商城静态网站 #

首先介绍一下使用了那些东西做的。  
**整体使用html5+css+js（少量）+jquery（一点点 ）**  
**实现内容有 js轮播图，canvas实现飘雪，背景音乐。**这些比较垃圾的功能大部分都借鉴了其他人的实现。直接贴的js代码然后加了注释而已  
在介绍实现之前先给大家看一下效果。

## 实现效果 ##

![网站效果][20191219180655619.gif_pic_center]

## 具体实现 ##

接下来慢慢介绍实现过程。

### 划分页面`html` ###

为了让所有的页面都有统一的样式首先要**划分页面成几个部分**。  
这里我将页面按照`上中下`划分成3个区域。分别是**头部导航栏、中间主题内容、底部页脚**。

### 划分页面`css` ###

写完html然后针对html带有的id去写`css`让结构显示出来。

/* 所有页面通用css */
    /* 设置页面的总体布局 */
    * { 
    	/*清除间距样式防止样式干扰*/
      margin: 0px;
      padding: 0px;
    }
    /* 页头 */
    #header { 
      height: 60px;
      margin: 0px auto 10px auto;
      padding: 10px 10px;
      width: 100%;
      /*设置颜色*/
      background-color: #f0f8ff99;
    }
    /* 主体 */
    #content { 
      max-width: 90%;
      margin: 0px auto;
      padding: 30px;
      background-color: #f0f8ff99;
      /*居中*/
      min-height: 400px;
    }
    
    /* 页脚 */
    #footer { 
      min-height: 100px;
      margin-top: 20px;
      padding: 20px 30px;
      background-color: #f0f8ff99;
      text-align: center;
    }

### 表示每个商品`html` ###

定义完总体样式之后开始写内容的样式。这里内容仿照淘宝的（使用文字+图片这种）。一块内容上面是文字下面是图片。如下图。  
![一块内容的样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzA5ODAx_size_16_color_FFFFFF_t_70_pic_center]  
然后将文字部分由分为价格和描述部分。  
最后可以编写`html`模板如下。

<div class="item">
        <div class="item-img">
             <img src="img/jacket/1.jpg" alt="">
         </div>
         <div class="item-content">
             <div class="item-content-price">
                 ￥5.00
             </div>
             <div class="item-content-text">
                 好看的衣服买一送一。
             </div>
         </div>
     </div>

### 表示每个商品`css` ###

然后编写相应的`css`样式。

/* 定义商品的样式 */
    /* 一个商品的样式 */
    .item { 
      width: 250px;
      height: 300px;
      background-color: #ffffffaa;
      padding: 10px 10px 20px 10px;
      display: inline-block;
      margin: 0px 5px 10px 5px;
    }
    
    /* 商品图片样式 */
    .item .item-img { 
      margin: 0px auto;
      text-align: center;
      /* 固定图片可以显示的高度，防止图片大小引起的样式破坏 */
      height: 180px;
    }
    
    .item .item-img img { 
      /* 设置图片填充父标签-大小为父标签设置的高度 */
      width: 100%;
      height: 100%;
    }
    
    /* 商品价格样式 */
    .item .item-content .item-content-price { 
      font-size: large;
      color: #ff0000;
    }
    
    /* 商品文字样式 */
    .item-content .item-content-text { 
      font-size: small;
      color: #5e5e5e;
      height: 100px;
      padding: 3px;
      overflow: hidden;
    }

上面的代码编写完成之后基本页面样式就已经确定，而且内容也有了。接下来就是添加导航栏、背景飘雪、还有简单的轮播图了。

### 添加导航栏`html` ###

导航栏就使用`html`自带的标签库来表示。这样语义也明确也不用自己去给标签添加额外的`class`或者`id`。

### 添加导航栏`css` ###

接下来给导航栏添加一些`css`。

/* 设置导航 */
    nav ul { 
      list-style: none;
      text-align: center;
      margin: 0px 0px;
    }
    /*给每个li添加样式*/
    nav ul li { 
      display: inline-block;/*在一行排列*/
      margin: 10px 10px;
    }
    /* 导航栏a标签样式 */
    nav ul li a:link { 
      text-decoration: none;
      padding: 3px;
      background: #ffffff44;
    }

到这里整体的`html`就以及`css`布局完成。接下来就是添加背景雪花、轮播图的时候到了。

### 背景雪花 ###

雪花的飘动主要还是依赖于`javascript`的。这里先定义出雪花背景需要的`html`标签以及`css`样式。

#### 背景雪花`html` ####

先在html中加入一个`html5`画布`<canvas>`标签，随便放在哪都可以

<canvas id="canvas"></canvas>

#### 背景雪花`css` ####

然后定义相应的`css`

/* 背景动画的样式 */
    #canvas { 
      /* position: fixed;position:absolute */
      position: fixed;
      top: 0px;
      z-index: -100;/*设置在最底层 - 也是就背景*/
    }

#### 背景雪花`javascript` ####

然后定义一个js文件或者直接在`<script>`标签中添加`css`。**但是一定要注意放在`<canvas>`标签下方（不要在它前面就行QWQ）**。

到这里你就可以看到雪花飘动了有木有很激动。

[20191219180655619.gif_pic_center]: https://img-blog.csdnimg.cn/20191219180655619.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzA5ODAx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20191227212121140.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzA5ODAx,size_16,color_FFFFFF,t_70#pic_center