1、在html编辑器软件内，新建html页面，（一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver，这里我使用的软件是HBuilder）。
2、在<body></body>添加<div class="nav"></div>,于<div class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签，<li>内同时添加<a>标签，方便连接导航跳转。
3、在新建的<a></a>内，添加横向导航要显示的内容。
4、在<title></title>下方添加一个<style type="text/css"></style>。
5、源文件html保存后，使用浏览器打开预览效果。
初学HTML，遇到一个题需要将几张图放在一个边框里，并且需要横向拖动
想着很简单，直接在div中设置width、height。并添加属性“overflow:auto”。但实际运行是发现图片始终会换行，窗口只能上下滚动
后来找到问题的原因，是因为由于在div中直接添加图片，所以图片会适应该div的大小，从而自动换行。而要做到不换行的效果，则需要在div中嵌套一层div2，设置div2的width >div的width，由此保证：图片不会换行；在横轴方向溢出，从而出现横向滚动条。
这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动
最基础的思路就是表头和内容是用两个表格来显示（图来自 https://zhuanlan.zhihu.com/p/33280304 ），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。
纵向滚动是挺好实现的，我开始是在内容的表格外面套了一个div，之后设置 overflow-y:auto 就实现纵向滚动了。
但横向滚动呢？
首先想到的方案是在最外面的div,outer加上 overflow-x:auto
虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了。
然后想到了是用js来同步，可以是可以的，但是还是想挣扎一下。
之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。
最后突然想到一个position的新属性，sticky
设置了 position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果（ https://www.cnblogs.com/s1nker/p/4835079.html ）。
所以最后设置了表头
css:
就成功实现了想要的效果了。
不过sticky的兼容性也是要考虑一下的。
