【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮
博客园美化相关文章目录:
1.页首添加HTML代码
进入自己的博客园->设置,将以下html代码添加到“页首Html代码”
1 2 3 4 | < div id="divExpandViewArea" onclick="$('#mainContent').css({'margin-left':'0'});$('#sideBar').css({'display':'none'});">扩大</ div > < div id="divCollapseViewArea" onclick="$('#mainContent').css({'margin-left':'300px'});$('#sideBar').css({'display':'block'});">缩小</ div > |
2.添加定制CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #divExpandViewArea{ position : fixed ; color : white ; /* border-radius: 10px; */ padding : 2.5px 10px ; right : 5px ; top : 390px ; cursor : pointer ; opacity: 0.9 ; background-color : gray ; } #divCollapseViewArea{ position : fixed ; color : white ; /* border-radius: 10px; */ padding : 2.5px 10px ; right : 5px ; top : 420px ; cursor : pointer ; opacity: 0.9 ; background-color : gray ; } |
3.效果
作 者:
Jackson0714
出 处:http://www.cnblogs.com/jackson0714/
关于作者:专注于微软平台的项目开发。如有问题或建议,请多多赐教!
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信我
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?