1.实现缩略图列表，点击缩略图显示大图：
先去掉默认margin、padding： * { margin: 0; padding: 0;}
(1)设置大图背景：
background-image: url(...); //设置背景图
background-repeat: no-repeat; //背景图不重复
background-size: cover; //背景图大小 自适应
(2)设置缩略图列表：
width: 100%; //高度自适应
height: 200px; //高度固定
background-color: rgba(0, 0, 0, .6); //列表框为透明系数为0.6的黑色背景
list-style-type: none; //清除小黑点
display: flex; //布局
justify-content: space-around; //开启弹性盒模型
align-items: center; //主轴 左右均分
实现缩略图列表点击上下伸缩切换： $(".img-list").slideToggle();
实现缩略图点击事件，显示大图：
$("li").click(function(){
var src = $(this).attr("data-src"); //获取li标签上预存的大图路径
$("xx").css({ "background-image": "url("+src+")"}); //将大图路径赋值给要显示的元素
});(3)设置角标点击图：
position:absolute; //绝对定位
right: 0; //右边为0
top: 0; //上面为0
width: 50px; //宽度为50px
height: 50px; //高度为50px
设置鼠标移上去事件：
:hover { background-position-y: 64px; }
2.实现标签列表，以及点击标签，定位到该标签所对应的内容元素：
(1) 设置内容框排序：
div布局自适应居中：margin: auto;
(2) 设置标签栏：
设置标签栏自适应居中： height: 20px; line-height: 20px; //当行高和li标签高度一致的时候，标签内容自适应居中
设置标签栏的固定定位： position:flex; right: 20px; top: 30px;
设置点击标签，页面定位到标签所对应的内容区域：
var index = $("li").index(); //获取标签li的下标位置
var top = $("content").eq(index).offset().top; //获取该标签对应内容区域上边框距离html上边界的偏移量
$("html,body").animate({ scrollTop: top + "px"}); //将当前界面往上移动top的距离
来源：oschina
链接：https://my.oschina.net/zhangmaoyuan/blog/3213886