此文写的是所有控制栏的效果。
一、顶部的菜单栏;
顶部菜单栏的HTML代码,见页首HTML代码的定义里。
二、右侧控制栏,包括一个提示栏和一个操作栏;
<!--右侧的触发栏-->
<div class="rightTrigger">
</div>
<!--右侧的菜单控制栏-->
<div id="divrightControl" class="rightControl">
<div class="iCtrlTop">
<a id="aGoTop" title="返回顶部" href="#gotop"><img width="50px" height="50px" src="https://images.cnblogs.com/cnblogs_com/lzhdim/202430/o_220321131941_goTop.png"></a>
</div>
<div class="iCtrlCenter">
<a id="aGoCenter" onclick="$.FN_LightTime.LightTimes($($('#rightLogo')),2)" href="javascript:void(0)"><img id="rightLogo" width="50px" height="50px" src="https://images.cnblogs.com/cnblogs_com/lzhdim/202430/o_220322130416_eye.jpg"></a>
</div>
<div class="iCtrlBottom">
<a id="aGoBottom" title="转到底部" href="#gobottom"><img width="50px" height="50px" src="https://images.cnblogs.com/cnblogs_com/lzhdim/202430/o_220321131951_goBottom.png"></a>
</div>
</div>
三、底部的版权栏。
底部的版权栏,见页脚的HTML代码定义。
三个控制栏的效果见页面的效果。
https://files.cnblogs.com/files/lzhdim/jquery.lighttime.js?t=1648030653
https://files.cnblogs.com/files/lzhdim/BlogFrame.js?t=1648104915
https://files.cnblogs.com/files/lzhdim/TopMenu.css?t=1648103468
https://files.cnblogs.com/files/lzhdim/RightControlTrigger.css?t=1648103520
https://files.cnblogs.com/files/lzhdim/BottomMenu.css?t=1648129134
CSS直接放在页面HTML代码中文件链接即可。JS也直接放到文件中,然后在页面加载完成时中进行设置。
![]() |
Austin Liu 刘恒辉
Project Manager and Software Designer E-Mail:lzhdim@163.com Blog:https://lzhdim.cnblogs.com 欢迎收藏和转载此博客中的博文,但是请注明出处,给笔者一个与大家交流的空间。谢谢大家。 |