右侧悬浮导航代码及教程

你是否想要一个右侧悬浮的导航，你的顶部是否无法满足你的多导航，那么你的参试着做一个右侧悬浮导航，来呈现你的小导航，一来提高用户体验，并且还能为网站添加不一样的色彩哦。

• 博客
• SEO优化
• *** 营销
• 网站建设
• SEO指导中心

 

<style type="text/css">

*{margin:0px; padding:0px; }

body{background:#000;}

#NavTop{width:140px;height:270px; margin:100px auto;

position:fixed; right:0px; top:150px;}

#NavTop #NavCon{width:140px; background:url("images/d.png") repeat-y;

position:relative;}

#NavTop #NavCon img.banner{position:absolute;

left:15px; top:-40px;}

#NavTop #NavCon ul{padding-left:15px;color:#fff; padding-top:40px;}

#NavTop #NavCon ul li{height:32px;}

#NavTop #NavCon ul li a{color:#fff; text-decoration:none; width:101px; height:30px; display:block; background:#333;

font-size:14px;font-family:"微软雅黑"; padding-left:15px;

line-height:30px;}

#NavTop #NavCon ul li a:hover{background:#cc0066;}

 

</style>

 

<!--Div 盒子模型，宽度 高度 放内容-->

<div id="NavTop"><div id="NavCon">

<img src="images/banner.png" class="banner"/>

<ul>

<li><a target="_blank" href="https://www.ssffx.com/">博客</a></li>

<li><a target="_blank" href="https://www.ssffx.com/SEOjishu/">SEO优化</a></li>

<li><a target="_blank" href="https://www.ssffx.com/wangluoyingxiao/"> *** 营销</a></li>

<li><a target="_blank" href="https://www.ssffx.com/wangzhanjianshe/">网站建设</a></li>

<li><a target="_blank" href="https://wenda.ssffx.com/">SEO指导中心</a></li>

</ul>

<img src="images/top.png" />

</div></div>

 

来源：博客，欢迎分享本文！