右侧悬浮导航代码及教程

- 编辑:冯耀宗 -

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

 
<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>
 

来源:,欢迎分享本文,转载请保留出处!(QQ/微信号:394062665)

你会喜欢下面的文章? You'll like the following article.