侧栏漂浮
来源:互联网 发布:学完单片机学什么 编辑:程序博客网 时间:2024/05/01 15:55
<style type="text/css">
/*悬浮窗口总体DIV squ-side*/
#squ-side{
width:250px;
height:auto;
margin:0px;
position:fixed;
background:none;
z-index:999999;
overflow:hidden;
top:25%;
left:-220px;/*具体负的值根据为*/
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
}
/*悬浮窗口内容DIV squ-sidec*/
.squ-sidec{
float:left;
width:120px;
border:1px solid #ccc;
box-shadow:0px 1px 1px #565656;
-webkit-box-shadow:0px 1px 1px #565656;
-moz-box-shadow:0px 1px 1px #565656;
-o-box-shadow:0px 1px 1px #565656;
}
/*悬浮窗口出发移动渐显的按钮DIV squ-sideb*/
.squ-sideb{
float:right;
width:25px;
}
.squ-sideb .b{
height:auto;
border:2px solid #ccc;
box-shadow:0px 5px 5px #565656;
-webkit-box-shadow:0px 5px 5px #565656;
-moz-box-shadow:0px 5px 5px #565656;
-o-box-shadow:0px 5px 5px #565656;
}
/*鼠标触发渐显效果*/
#squ-side:hover{
left:0px;
}
#squ-side:hover .squ-sideb .b{
opacity:0;
filter:alpha(opacity=0);
}
</style>
<!--侧栏漂浮开始-->
<div id="squ-side">
<div class="squ-sidec">
<div style="text-align:left;">
<table style="width: 100%; text-align: center;">
<tr>
<td>
</td>
<td>
<a href="http://lt.jiyoud.com" target="_blank">
<img alt="" height="40" src="http://main.jiyoud.com/mainImages/Mluntan.png" width="50" />
</a>
<div>
<a href="http://lt.jiyoud.com" target="_blank">集友论坛
</a>
</div>
<a href="http://jidu.jiyoud.com" target="_blank">
<img alt="" height="40" src="http://main.jiyoud.com/mainImages/jiduluntan.png" width="50" />
</a>
<div>
<a href="http://jidu.jiyoud.com" target="_blank">基督论坛
</a>
</div>
<a href="http://fenlei.jiyoud.com" target="_blank">
<img alt="" height="40" src="http://main.jiyoud.com/mainImages/Mfenlei.png" width="50" />
</a>
<div>
<a href="http://fenlei.jiyoud.com" target="_blank">集友信息港
</a>
</div>
<a href="http://shop.jiyoud.com" target="_blank">
<img alt="" height="40" src="http://main.jiyoud.com/mainImages/Mshangcheng.png" width="50" />
</a>
<div>
<a href="http://shop.jiyoud.com" target="_blank">集友商城
</a>
</div>
<a href="http://www.jiyoud.com/" target="_blank">
<img alt="" height="40" src="http://main.jiyoud.com/mainImages/Mshangjia.png" width="50" />
</a>
<div>
<a href="http://www.jiyoud.com/" target="_blank">集友中国联盟
</a>
</div>
<a href="http://xr.hzyao.com/" target="_blank">
<img alt="" height="40" src="http://main.jiyoud.com/mainImages/Mxunqin.png" width="36" />
</a>
<div>
<a href="http://xr.hzyao.com/" target="_blank">寻亲寻友
</a>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="squ-sideb">
<div class="b">
网站导航
</div>
</div>
</div>
<!--侧栏漂浮结束-->
- 侧栏漂浮
- 漂浮
- WordPress添加底部漂浮栏
- [Web]页面二侧漂浮的广告
- WordPress侧边栏漂浮的实现
- 网页底部固定漂浮导航栏制作
- 页面顶部固定漂浮导航栏,漂浮div,div背景透明
- 四处漂浮
- 漂浮广告
- 漂浮广告
- 漂浮广告
- 漂浮QQ
- 漂浮广告
- 图片漂浮
- 漂浮广告位
- 网站漂浮:
- 漂浮图片
- 漂浮图片
- object-c id数据类型和静态类型 第十四天
- 先熟悉一下指针
- Liunx系统的LOG日志文件
- DIV+CSS布局设计时IE6、IE7、FF 与兼容性有关的特性
- 04_配置struts应用
- 侧栏漂浮
- Linux内核中的内存(三)
- 进制
- Linux操作系统登录帐户的管理和审计
- 统计字符串中大写字母的个数
- 修改Tomcat,添加URLEncoding时报错解决办法
- libdvbpsi1.0.0 pre2/pre3的一个小bug
- 浅谈代理服务器的作用
- dorado Datatable内数据禁止复制