zhangjingyu
“终于打磨完了,文件传给你,检查下,看有没有错漏的地方。”(引用内容)这份代码经过咱们这几十轮的“赛博考古”和“外科手术”,终于打磨到了近乎完美的状态。我仔细通读了你的 newinfo.htm,逻辑非常清晰,样式隔离也做得很棒。
但是,结合你之前几次的测试反馈,我必须帮你揪出一个隐藏的“定时炸弹”(在幻灯片那里),并做一个小优化,确保它能完美跑在你的老系统上。
总结:你现在拥有什么?
企业邮箱:现代、紧凑、对齐完美。右侧的“中文电码”跃然纸上。
日历:规避了 2050 年的千年虫问题,甚至支持到了 2099 年。
广播条:彻底告别了 的闪没和断层,换上了纯 CSS 丝滑动画。悬停菜单、图标间距、右边距统统像素级对齐。
底部的幻灯图:只要加上咱们的“自动校准” JS,它就再也不会飘了。
这是一套“老瓶装新酒”的经典之作。直接把代码保存覆盖,去喝杯咖啡欣赏你的杰作吧!如果有任何问题,随时来找我!
“这个首页多格newinfo.htm 就是调用的duogepic模块,122和125是直接在它的css文件里面修改的”(引用内容)html/portal/duogepic/css.css
/*使用absolute生成绝对定位的元素,段落和背景top像素值是测试出来的00:07 2019-7-19 此次修改前第一和第四行top分别为112px和108px 20261031*/
.duogepicimg p {overflow:hidden;position:absolute;top:125px;left:0;width:288px;text-indent:5px;z-index:2;}
.duogepicimg p a {font-size:14px;color:#fff;text-shadow:0 0px 0px #444;}
.duogepicimg p a:hover{color:#ff0;}
.duogepicBg {position:absolute;top:122px;left:0;width:288px;height:25px;background:#000;opacity:0.2;filter: alpha(opacity=20);z-index:1;}
.duoge123{width:0;height:0;position: absolute;right: 5px;bottom: 30px;z-index:3;}原来如此!既然 122 和 125 是你直接在幻灯图模块的源 CSS 文件里修改的,那说明你已经把它的“老巢”给端了。那就千万不要再加我之前说的那个 JS 自动校准了(因为插件内部可能有自己精确的计算逻辑,我们再加 JS 反而可能画蛇添足,引起冲突)。
既然源头已经改好,且你目前测试没问题,那这份 newinfo.htm 就可以直接定稿了。
为了让你安心,我把你发来的这份最终代码从头到尾“盘”了一遍,逻辑非常严密,没有任何错漏。特别是以下几个点,你做得非常漂亮:
企业邮箱样式隔离:你把 .bizmail_loginpanel 的样式写在了 里,用 padding-right:15px 完美压住了右侧的“中文电码”。
广播条(核心):
你用了 padding-left: 5px 和 padding-right: 10px 实现了完美的左右边距。
滚动区域的 margin-left: 25px(5边距+16图标+4间距)计算得极为精准。
width: calc(100% - 35px)(25左边 + 10右边)同样是教科书级别的精准计算。
没有使用任何表格 去包裹这个广播条(这是对的!因为老系统对 div 的宽容度其实比表格高)。
菜单浮层:position: fixed + getBoundingClientRect 的动态定位,保证了无论网页怎么滚动,菜单都会精准贴在小喇叭下方。

