html5+Css3+jquery网页中锚点定位平滑滚动菜单

来源：互联网 2023-03-16 23:54:34 489

html5 Css3 jquery网页中锚点定位平滑滚动菜单

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

html5 Css3 jquery网页中锚点定位平滑滚动菜单

书写hmtl代码。

div class="content">

h3>内容框架/h3>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>

内容框架内容框架内容框架内容框架br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>br/>

h3>二jQuery的核心特性/h3>

内容框架

h4>二-一发展历程/h4>

内容框架

h3>三 jQuery语法/h3>

内容框架

h3>jQuery 1.1.3版发布/h3>

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

h3>简洁的JavaScript框架/h3>

内容框架Ajax交互

h3>简洁的JavaScript框架/h3>

内容框架设计和Ajax交互

h3>简洁的JavaScript框架/h3>

内容框架

h3>简洁的JavaScript框架/h3>

内容框架计和Ajax交互

h3>简洁的JavaScript框架/h3>

内容框架设计和Ajax交互 /div>

div class="autoMenu" id="autoMenu" data-autoMenu> /div>

html5 Css3 jquery网页中锚点定位平滑滚动菜单

书写css代码。

body, div, ul, p, h1, h2, h3, h4, ol, dl, dd, dt, form, input, textarea, select, strong, em { padding: 0; margin: 0; }

* { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box }

li { list-style: none; }

a { text-decoration: none; font-size: 14px; }

a:hover { text-decoration: none; }

a:focus { outline: none; }

.autoMenu { position: fixed; bottom: 10%; right: 5%; z-index: 1; text-align: left; }

.autoMenu ul { line-height: 2; overflow-y: auto; background: #fff; -webkit-box-shadow: 0 0 10px #CCC; -moz-box-shadow: 0 0 10px #CCC; box-shadow: 0 0 10px #CCC; }

.autoMenu ul>li.sub { padding-left: 20px; }

.autoMenu ul>li>a { color: #399c9c; }

.autoMenu ul>li.active>a { color: #ff5370; }

.btn-box { display: inline-block; width: 40px; height: 40px; text-decoration: none; position: relative; }

.icon-plus-sign { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 4px solid #91ba61; background: #91ba61; position: absolute; top: 3px; left: 3px; }

.icon-plus-sign:before, .icon-plus-sign:after { content: ''; display: inline-block; width: 3px; height: 20px; background: #fff; border-radius: 1px; position: absolute; top: 3px; left: 11.5px; }

.icon-plus-sign:after { -webkit-transform: rotate(90deg); }

.icon-minus-sign { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 4px solid #ff5370; background: #ff5370; position: absolute; top: 3px; left: 3px; }

.icon-minus-sign:before { content: ''; display: inline-block; width: 20px; height: 3px; background: #fff; border-radius: 1px; position: absolute; left: 3px; top: 11.5px; }

.content { width: 700px; margin: 0 auto; }

h3 { line-height: 60px }

html5 Css3 jquery网页中锚点定位平滑滚动菜单