HTML+CSS+JS(产品列表渲染、价格筛选)

---

前言

小案例展示主要包括了“商品页面的数据渲染”、根据不同价格区间，我们可以筛选我们想要的价格下商品。
适合前端小白练手
掌握前端相关的基础语法，Html+Css+Js

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端页面渲染(展示)

二、页面功能分析

1、头部四个区间选择样式：通过css来写的，用的是a标签，给a标签增加了一个focus伪类选择器，当a标签聚焦的时候添加对应的样式即可。

css代码如下：

 .price_area li a:focus{
   
			background-color: green;
			color: white;
		}

2、中间身体部分的数据通过JS渲染的：
通过遍历可以遍历存储的数据，定义一个字符串我们将每次遍历的数据进行累加拼接存储，最后绑定到我们的父元素，父元素.innerHTML=s，这里的s即 遍历累加拼接的内容。

js代码如下：

function render(arr){
   
				let s="";
				arr.forEach(item