今天看见一个非常好看的弹窗,果断把这个弹窗代码给他弄出来分享给大家,一起来看看网站首页公告弹窗代码,好看漂亮的网站首页公告弹窗代码大家可以用在自己网站里面,美观加一。
使用方法,用我的这个子比主题来示例
找到自定义代码这块,把这个填进去,把你需要展示的公告写上,然后完成了。
其他主题呢你看看有没有自定义代码的地方,填进去行,如果是其他程序的话找找自定义弹窗代码的板块,把代码填进去即可。
演示图
<span class="prism-token prism-comment" spellcheck="true"><!-- 弹窗开始 --></span> <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><</span>div <span class="prism-token prism-attr-name">class</span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation">=</span><span class="prism-token prism-punctuation">"</span>web_notice<span class="prism-token prism-punctuation">"</span></span><span class="prism-token prism-style-attr language-css"><span class="prism-token prism-attr-name"> style</span><span class="prism-token prism-punctuation">="</span><span class="prism-token prism-attr-value"><span class="prism-token prism-property">position</span><span class="prism-token prism-punctuation">:</span> fixed<span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">top</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-number">0</span><span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">left</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-number">0</span><span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">width</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-number"></span><span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">height</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-number"></span><span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">background</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-function">rgba</span><span class="prism-token prism-punctuation">(</span><span class="prism-token prism-number">0</span>,<span class="prism-token prism-number">0</span>,<span class="prism-token prism-number">0</span>,<span class="prism-token prism-number">0.3</span><span class="prism-token prism-punctuation">)</span><span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">z-index</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-number">99999</span><span class="prism-token prism-punctuation">;</span></span><span class="prism-token prism-punctuation">"</span></span><span class="prism-token prism-punctuation">></span></span> <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><</span>div<span class="prism-token prism-style-attr language-css"><span class="prism-token prism-attr-name"> style</span><span class="prism-token prism-punctuation">="</span><span class="prism-token prism-attr-value"><span class="prism-token prism-property">position</span><span class="prism-token prism-punctuation">:</span> fixed<span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">top</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-number">50%</span><span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">left</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-number">50%</span><span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">width</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-number">550</span>px<span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">background</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-hexcode">#FFF</span><span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">transform</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-function">translate</span><span class="prism-token prism-punctuation">(</span>-<span class="prism-token prism-number">50%</span>, -<span class="prism-token prism-number">50%</span><span class="prism-token prism-punctuation">)</span><span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">border-radius</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-number">40</span>px<span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">padding</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-number">50</span>px <span class="prism-token prism-number">40</span>px<span class="prism-token prism-punctuation">;</span></span><span class="prism-token prism-punctuation">"</span></span><span class="prism-token prism-punctuation">></span></span> <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><</span>h3 <span class="prism-token prism-attr-name">style</span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation">=</span><span class="prism-token prism-punctuation">"</span>font-weight: bold;text-align: center;font-size: 30px; <span class="prism-token prism-punctuation">"</span></span><span class="prism-token prism-punctuation">>幻城云笔记</span></span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"></</span>h3<span class="prism-token prism-punctuation">></span></span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><</span>div <span class="prism-token prism-attr-name">style</span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation">=</span><span class="prism-token prism-punctuation">"</span>font-size: 16px;margin-top: 26px;line-height: 30px;color: #999; <span class="prism-token prism-punctuation">"</span></span><span class="prism-token prism-punctuation">></span></span>百度搜索幻城云笔记,https://hcnote.cn<span class="prism-token prism-tag"><span class="prism-token prism-punctuation"></</span>div<span class="prism-token prism-punctuation">></span></span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><</span>a<span class="prism-token prism-style-attr language-css"><span class="prism-token prism-attr-name"> style</span><span class="prism-token prism-punctuation">="</span><span class="prism-token prism-attr-value"><span class="prism-token prism-property">display</span><span class="prism-token prism-punctuation">:</span> block<span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">background</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-hexcode">#98a3ff</span><span class="prism-token prism-punctuation">;</span><span class="prism-token prism-property">color</span><span class="prism-token prism-punctuation">:</span> <span class="prism-token prism-hexcode">#FFF</span><span class="prism-token prism-pun
大家注意使用之前一定要把里面的内容修改一下,修改成自己的公告,现在上面显示的是我的公告。
© 版权声明
文章全是本幻城写的,尽量别直接复制粘贴
THE END
暂无评论内容