html+css3社交平台侧固定导航特效

准备好需要用到的字体图标文件。

新建html文档。

书写hmtl代码。

书写css代码。.tb-toolbar { position: fixed; z-index: 1; width: 35px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; right: 0; top: 0; bottom: 0; background-color: #eee; -webkit-transform: translate3d(0, 0, 0); font-family: tahoma, arial, 'Hiragino Sans GB', simsun, sans-serif; font-size: 0 }.ks-ie6 .tb-toolbar { zoom: 1; position: absolute; right: 0;  height:expression(eval(document.documentElement.clientHeight)); top:expression(eval(document.documentElement.scrollTop));left: auto }.ks-ie6 .tb-toolbar-space { line-height: 0 }.tb-toolbar-list { margin: 0; padding: 0; list-style: none; min-height: 46px }.tb-toolbar-item { height: 46px }.tb-toolbar-item-hd { display: block; width: 35px; height: 46px; position: relative; color: #666; font-size: 12px; text-decoration: none!important; cursor: pointer; outline: 0; _overflow: hidden }.tb-toolbar-item-hd:hover { _overflow: visible }.tb-toolbar-item-hd:hover, .tb-toolbar-item-hd-active { color: #f40; background-color: #fff }.tb-toolbar-item-bd { display: none; z-index: 1; position: absolute; right: 36px; top: 0; bottom: 0; width: 245px;  _height:expression(eval(document.documentElement.clientHeight));border-right: 1px solid #f9f8f7; box-shadow: -2px 0 2px rgba(0,0,0,.15); background-color: #f1f1f1; font-size: 12px }.tb-toolbar-right .tb-toolbar-item-bd { left: 36px; border-right: none; box-shadow: none }.tb-toolbar-item-bd-left { right: 36px!important; left: inherit!important }.tb-toolbar-item-tipa { display: none; z-index: 1; position: absolute; top: -18px; left: -980px; width: 979px; height: 100px; color: #fff; font-size: 12px; line-height: 30px; font-family: tahoma, arial, 'Hiragino Sans GB', simsun, sans-serif; text-align: center; background: #E4F0F8; /* background:#f40; */-webkit-animation: leftFadeIn .3s ease-out; -moz-animation: leftFadeIn .3s ease-out; animation: leftFadeIn .3s ease-out }.tb-toolbar-item-hd:hover .tb-toolbar-item-tipa { display: block }.tb-toolbar-item-arrowa { position: absolute; right: -6px; top: 30px; color: #E4F0F8 }.tb-toolbar-item-tipsj { display: none; z-index: 1; position: absolute; top: -18px; left: -205px; width: 205px; height: 205px; color: #fff; font-size: 12px; line-height: 30px; font-family: tahoma, arial, 'Hiragino Sans GB', simsun, sans-serif; text-align: center; /* background:#f40; */-webkit-animation: leftFadeIn .3s ease-out; -moz-animation: leftFadeIn .3s ease-out; animation: leftFadeIn .3s ease-out }.tb-toolbar-item-hd:hover .tb-toolbar-item-tipsj { display: block }.tb-toolbar-item-arrowsj { position: absolute; right: -6px; top: 25px; color: #E4F0F8 }.tb-toolbar-item-tip { display: none; z-index: 1; position: absolute; top: 8px; left: -85px; width: 85px; height: 30px; color: #fff; font-size: 12px; line-height: 30px; font-family: tahoma, arial, 'Hiragino Sans GB', simsun, sans-serif; text-align: center; background: #f40; -webkit-animation: leftFadeIn .3s ease-out; -moz-animation: leftFadeIn .3s ease-out; animation: leftFadeIn .3s ease-out }.tb-toolbar-item-hd:hover .tb-toolbar-item-tip { display: block }.tb-toolbar-item-arrow { position: absolute; right: -6px; top: 0; color: #f40 }.tb-toolbar-item-label { text-align: center; font-size: 12px; line-height: 14px; margin: 2px 0 }@font-face { font-family: tb-toolbar-iconfont; src: url(../images/font_1418875995_7687602.eot); src: url(../images/font_1418875995_7687602.eot?#iefix) format('embedded-opentype'), url(../images/font_1418875995_7687602.woff) format('woff'), url(../images/font_1418875995_7687602.ttf) format('truetype'), url(../images/font_1418875995_7687602.svg#iconfont) format('svg') }.tb-toolbar-item-icon { text-align: center; width: 35px; line-height: 46px; font-family: tb-toolbar-iconfont; font-size: 20px; font-style: normal; -webkit-font-smoothing: antialiased; webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none }.tb-toolbar-relative { position: relative }.tb-toolbar-loading { background-image: url(../images/TB1KTLrGVXXXXaeXFXXfLpBIVXX-144-100.gif); background-repeat: no-repeat; background-position: center }.tb-toolbar-flyer { position: absolute; z-index: 3; border: 2px solid #FF5720; width: 40px; padding: 2px; height: 40px }.tb-toolbar-list-with-cart, .tb-toolbar:hover .tb-toolbar-list-with-cart { border-top: 1px solid transparent; border-bottom: 1px solid transparent; _border-color: #eee }.tb-toolbar-list-with-gotop { position: absolute; bottom: 20px }.tb-toolbar-item-split { width: 60%; margin: 0 auto; border-bottom: 1px dotted #bbb }.tb-toolbar-price { font-family: arial }@media screen and (max-width:1024px) {.tb-toolbar-shrinked { top: 25%; bottom: auto }.tb-toolbar-shrinked .tb-toolbar-space, .tb-toolbar-shrinked .tb-toolbar-list { display: none }.tb-toolbar-shrinked .tb-toolbar-list-with-cart { display: block; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd }.tb-toolbar-shrinked:hover { top: 0; bottom: 0 }.tb-toolbar-shrinked:hover .tb-toolbar-list, .tb-toolbar-shrinked:hover .tb-toolbar-space { display: block }}.tb-toolbar-mini.tb-toolbar-shrinked { top: 25%; bottom: auto }.tb-toolbar-mini.tb-toolbar-shrinked .tb-toolbar-space, .tb-toolbar-mini.tb-toolbar-shrinked .tb-toolbar-list { display: none }.tb-toolbar-mini.tb-toolbar-shrinked .tb-toolbar-list-with-cart { display: block; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd }.tb-toolbar-mini.tb-toolbar-shrinked:hover { top: 0; bottom: 0 }.tb-toolbar-mini.tb-toolbar-shrinked:hover .tb-toolbar-list, .tb-toolbar-mini.tb-toolbar-shrinked:hover .tb-toolbar-space { display: block }@-webkit-keyframes leftFadeIn {  0% { opacity:0; -webkit-transform:translateX(-10px)} 100% { opacity:1; -webkit-transform:translateX(0)}}@-moz-keyframes leftFadeIn {  0% { opacity:0; -moz-transform:translateX(-10px)} 100% { opacity:1; -moz-transform:translateX(0)}}@keyframes leftFadeIn {  0% { opacity:0; transform:translateX(-10px)} 100% { opacity:1; transform:translateX(0)}}.tb-toolbar-item-tip-coupon-x { width: 86px!important; left: -86px!important }.tb-toolbar-item-hd-extra { position: relative; width: 100%; height: 0; display: none; -webkit-animation: leftFadeIn .3s ease-out; -moz-animation: leftFadeIn .3s ease-out; animation: leftFadeIn .3s ease-out; font-size: 12px }.tb-toolbar-item-bubble { position: absolute; top: -46px; left: -108px; width: 108px; height: 66px; background: #3c3c3c; z-index: 1 }.tb-toolbar-item-bubble .tb-toolbar-item-arrow { top: 14px; color: #3c3c3c }.tb-toolbar-item-bubble-txt { float: left; width: 100%; height: 20px; overflow: hidden; color: #fff; font-size: 12px; line-height: 20px; text-align: center; margin-top: 9px }.tb-toolbar-item-bubble-btn { float: right; width: 65px; height: 20px; color: #fff; font-size: 12px; line-height: 18px; text-align: center; text-decoration: none!important; background: #ea3f34; border-radius: 2px; margin-top: 5px; margin-right: 20px }.tb-toolbar-item-bubble-btn:hover { background: #db0026 }.tb-toolbar-item-bd-coupon { position: absolute; right: 35px; width: 300px; top: 0; bottom: 0; border: 0; background-color: #f1f1f1; z-index: 1; overflow-x: hidden; overflow-y: auto }.ks-ie8 .tb-toolbar-item-bubble-btn { line-height: 20px }.tb-toolbar-item-cart { height: auto;  *height:110px}.tb-toolbar-item-hd-cart { height: auto;  *height:110px;padding-bottom: 5px }.tb-toolbar-item-icon-cart { line-height: 32px }.tb-toolbar-item-label-cart { width: 20px; height: 50px; line-height: 16px; padding: 0; margin: 0 auto }.tb-toolbar-item-label-cart { color: #666 }.tb-toolbar-item-badge-cart { border-radius: 10px; background-color: #f40; color: #fff; width: 18px; height: 18px; line-height: 18px; text-align: center; margin: 0 auto }.tb-toolbar-item-border-cart { position: absolute; top: 0; left: 8px; height: 108px; width: 20px; border: 1px dotted #bbb; border-width: 1px 0 }.tb-toolbar-item-cart .tb-toolbar-item-bd { width: 330px; background-color: #f1f1f1 }.tb-toolbar-history .tb-toolbar-item-bd { width: 330px; background-color: #f1f1f1; overflow-x: hidden; overflow-y: auto }.tb-toolbar .J_WangWang, .tb-toolbar .ww-light { display: none!important }.tb-toolbar-item-hd-ww.tb-toolbar-ww-offline, .tb-toolbar-item-hd-ww.tb-toolbar-ww-offline:hover { color: #999 }.tb-toolbar-item-hd-ww, .tb-toolbar-item-hd-ww:hover { color: #1c9eff }.tb-toolbar-ww-groups { color: #7C8994; background-color: #f1f1f1; border: 1px solid #d6dce0; border-right: none; margin: 0 auto; padding: 10px 15px; min-height: 34px }.tb-toolbar-ww-groups li { margin: 5px 0; position: relative }.tb-toolbar-ww-groups a { color: #7C8994; vertical-align: top; line-height: 18px; white-space: nowrap; padding-left: 20px }.tb-toolbar-ww-groups a:hover { text-decoration: none }.tb-toolbar-ww-groups-status-online { background-position: -80px 0 }.tb-toolbar-item-bd-worthbuying { width: 330px; overflow: auto }.tb-toolbar-item-worthbuying .tb-toolbar-item-bd { width: 330px; overflow: auto }@font-face { font-family: huabei-pro; src: url(../images/font_1426125221_0773435.eot); src: url(../images/font_1426125221_0773435.eot?#iefix) format('embedded-opentype'), url(../images/font_1426125221_0773435.woff) format('woff'), url(../images/font_1426125221_0773435.ttf) format('truetype'), url(../images/font_1426125221_0773435.svg#iconfont) format('svg') }.tb-toolbar-item-huabei-bd { background-color: #393939; padding: 10px; width: 300px }.tb-toolbar-item-huabei-bd .yen { font-family: arial, sans-serif; font-style: normal }.tb-toolbar-item-huabei-bd .huabei-wrap { width: 300px; text-align: center }.tb-toolbar-item-huabei-bd .huabei-hd { background-color: #dec387; margin-top: 10px }.tb-toolbar-item-huabei-bd .huabei-hd .my-title { color: #0d1111; padding: 12px 0 11px 0; font-family: 'microsoft yahei'; font-size: 16px }.tb-toolbar-item-huabei-bd .huabei-hd .my-title img { padding: 0 8px; margin-bottom: -2px }.tb-toolbar-item-huabei-bd .huabei-hd .my-cash { border-top: 1px dashed #393939; color: #0d1111; padding-bottom: 15px }.tb-toolbar-item-huabei-bd .huabei-hd .my-cash .t { font-size: 50px; font-family: impact }.tb-toolbar-item-huabei-bd .huabei-hd .my-cash .t .yen { font-size: 30px; padding-right: 12px }.tb-toolbar-item-huabei-bd .huabei-hd .my-cash .b { font-family: simsun }.tb-toolbar-item-huabei-bd .huabei-hd .my-msg { padding: 47px 0 45px 0 }.tb-toolbar-item-huabei-bd .huabei-hd .gotoBtn { text-align: center }.tb-toolbar-item-huabei-bd .huabei-hd .gotoBtn .gotoHuabeiUrl { display: inline-block; margin: 10px auto 0; background-color: #434343; color: #fff; font-size: 14px; padding: 0 10px; line-height: 26px; height: 26px }.tb-toolbar-item-huabei-bd .my-box { background-color: #535353; display: block; text-align: center; text-decoration: none; color: #fff; font-size: 14px; font-family: 'microsoft yahei', 'heiti sc'; line-height: 40px; margin-top: 6px }.tb-toolbar-item-huabei-bd .no-bg { background-color: transparent }.tb-toolbar-item-huabei-bd .text-box { font-family: simsun; font-size: 12px; line-height: 22px; color: #a0a0a0; text-align: left; text-align: center }.tb-toolbar-item-huabei-bd .text-box a { color: #a0a0a0; text-decoration: none }.tb-toolbar-list .tb-toolbar-huabei { height: 64px }.tb-toolbar-list .tb-toolbar-huabei .tb-toolbar-item-hd { height: 60px }.tb-toolbar-list .tb-toolbar-huabei .huabei-font, .tb-toolbar-list .tb-toolbar-huabei .tb-tollbar-icon-huabei { font-family: huabei-pro }.tb-toolbar-list .tb-toolbar-huabei .tb-toolbar-item-hd-active .tb-tollbar-icon-huabei { color: #dec387 }.tb-toolbar-list .tb-toolbar-huabei .tb-toolbar-item-label-huabei { width: 36px }

代码整体结构。

查看效果。