html+css3+jquery全屏页面跟随导航切换滚动

1、新建html文档。

3、书写css代码。<style>* { margin: 0; padding: 0; list-style: none; }a { text-decoration: none; color: #fff; }.page { width: 100%; height: 100%; background: pink; }.page1 { background: orange; }.page2 { background: yellow; }.page3 { background: green; }.page4 { background: cyan; }.containter { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }body, html { height: 100%; overflow: hidden; }.dian { position: absolute; right: 20px; top: 50%; text-align: center; }.dian ul { text-align: center; width: 14px; }.dian li { width: 10px; height: 10px; border-radius: 50%; background: #fff; text-align: center; margin: 0 auto; margin-bottom: 10px; cursor: pointer; }.dian .da { width: 14px; height: 14px; }.nav { width: 100%; height: 100px; background: purple; position: absolute; left: 0; top: 0; z-index: 111; }.nav li { float: left; width: 100px; height: 30px; margin: 35px 30px; background: black; cursor: pointer; border-radius: 5px; text-align: center; line-height: 30px; color: #fff; }.nav li a { width: 100px; height: 30px; display: block; }.nav .bg { background: yellow; color: #000; }</style>

5、代码整体结构。