极其简洁的购物商城静态网站_购物网站代码-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41709801/article/details/103619244

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

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

实现效果

网站效果

具体实现

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

划分页面`html`

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

<body>
	<div id="header">
	</div>
	<div id="content">
	</div>
	<div id="footer">
	</div>
</body>

划分页面`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`

定义完总体样式之后开始写内容的样式。这里内容~~仿照淘宝的~~（使用文字+图片这种）。一块内容上面是文字下面是图片。如下图。
一块内容的样式
然后将文字部分由分为价格和描述部分。
最后可以编写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。

<div id="header"><!--导航栏是放在头部模块的-->
  <nav>
    <ul>
        <li>
            <a href="index.html">登录</a>
        </li>
        <li>
            <a href="main.html">主页</a>
        </li>
    </ul>
  </nav>
</div>

添加导航栏`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>标签，随便放在哪都可以

<!--html5画布，随便放在哪都可以-->
<canvas id="canvas"></canvas>

背景雪花`css`

然后定义相应的css

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

背景雪花`javascript`

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

<script>
	// 获取画布
	var can = document.getElementById("canvas");
	// 获取笔刷
	var ctx = can.getContext("2d");
	// 获取窗口大小
	var wid = window.innerWidth;
	var hei = window.innerHeight;
	can.width = wid;
	can.height = hei;
	var snow = 70; //雪花数量
	var arr = []; //保存雪花坐标，半径
	for (var i = 0; i < snow; i++) {
	  // 生成一个雪花
	  arr.push({
	    // 位置
	    x: Math.random() * wid,
	    y: Math.random() * hei,
	    // 雪花最大半径-大小
	    r: Math.random() * 5
	  });
	}
	function DrawSnow() {
	  ctx.clearRect(0, 0, wid, hei);
	  ctx.beginPath();
	  for (var i = 0; i < snow; i++) {
	    var p = arr[i];
	    // 移动到雪花的位置
	    ctx.moveTo(p.x, p.y);
	    // 画出雪花
	    ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);
	    //   雪花颜色
	    ctx.fillStyle = "#ffffff88";
	  }
	  ctx.fill();
	  // 加下面的会有黑框
	  //   ctx.stroke();
	  SnowFall();
	  ctx.closePath();
	}
	//雪花飘落
	function SnowFall() {
	  for (var i = 0; i < snow; i++) {
	    var p = arr[i];
	    //   向下飘动速度 +的数值占比越大，抖动越小
	    p.y += Math.random() * 20 + 10;
	    //   如果超出了窗口
	    if (p.y > hei) {
	      p.y = 0; // 会到顶部
	    }
	    // 向右飘动速度
	    p.x += Math.random() * 10 + 10;
	    //   如果超出了窗口
	    if (p.x > wid) {
	      p.x = 0; // 回到左边
	    }
	  }
	}
	// 雪花更新速度 - 也决定了雪花的飘动速度 - 数值越大越平滑
	setInterval(DrawSnow, 60);
</script>