底部吸底导航 · 河马编辑器建站手册

#### 此处为字体图标代码列表，可以将需要的进行替换和添加 ``` 短信代码  首页  QQ  拨打电话  返回顶部  需求中心  在线客服  取消百度商桥吸底 #newBridge #nb_toolbar_wrap{opacity: 0!important} ``` ``` <style> /* 手机端返回顶部上移+去掉自带吸底+底部footer撑高*/ @media only screen and (max-width:640px){ .do-gotop{bottom:60px;} .do-online-service { display: none; } #footer_0{padding-bottom:50px;} } /*手机端显示电脑端隐藏*/ @media only screen and (max-width: 640px){section{display:block}} @media only screen and (min-width: 640px){section{display:none}} /* 阿里字体图标库 */ @font-face { font-family: 'iconfont'; /* project id 373198 */ src: url('//at.alicdn.com/t/font_373198_zoag1w36yf.eot'); src: url('//at.alicdn.com/t/font_373198_zoag1w36yf.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_373198_zoag1w36yf.woff') format('woff'), url('//at.alicdn.com/t/font_373198_zoag1w36yf.ttf') format('truetype'), url('//at.alicdn.com/t/font_373198_zoag1w36yf.svg#iconfont') format('svg'); } .iconfont{ font-family:"iconfont" !important; font-size:20px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } section .tabs { margin: 0 auto; width: 100%; font-weight: 300; font-size: 1.25em; } /* Nav */ .tabs nav { text-align: center; } .tabs nav ul { position: relative; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; margin: 0 auto; padding: 0; max-width: 1200px; list-style: none; -ms-box-orient: horizontal; -ms-box-pack: center; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .tabs nav ul li { position: relative; z-index: 1; display: block; margin: 0; text-align: center; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; box-shadow:rgba(74, 73, 73, 0.51)9px -7px 30px; } .tabs nav a { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; text-decoration: none; } .tabs nav a span { vertical-align: middle; font-size: 14px!important; } .tabs nav li.tab-current a { color: #74777b; } .tabs nav a:focus { outline: none; } /*****************************/ /* Top Line */ /*****************************/ .tabs-style-topline { max-width: 1200px; } .tabs-style-topline nav li { } .tabs-style-topline nav li:not(:last-child) { border-right: none; } .tabs-style-topline nav li.tab-current { border-top-color: #2CC185; border-bottom: none; } .tabs-style-topline nav a { padding: 0.75em 0 0.75em; background: #f9f9f9; color: #fff; -webkit-transition: color 0.2s; transition: color 0.2s; } .tabs-style-topline nav a:hover, .tabs-style-topline nav a:focus { } .tabs-style-topline nav li.tab-current a { background: none; box-shadow: inset 0 3px 0 #2CC185; color: #2CC185; } .tabs-style-topline .icon::before { display: block; margin: 0; } .tabs-style-topline nav a span { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 0.5em;margin: 12px; } </style>  <section style="position: fixed; bottom: 0; width: 100%;z-index:999;left:0"> <div class="tabs tabs-style-topline"> <nav> <ul> <li><a href="tel:手机号" style="background:#背景色号" ><i class="iconfont"></i><span>点击免费通话</span></a></li>  <li><a target="_blank" href="沟通链接" style="color: #文字色号;" onclick="" ><i class="iconfont"></i><span>在线咨询</span></a></li> </ul> </nav> </div> </section> ```