网站首页公告弹窗代码，好看漂亮的网站首页公告弹窗代码

今天看见一个非常好看的弹窗，果断把这个弹窗代码给他弄出来分享给大家，一起来看看网站首页公告弹窗代码，好看漂亮的网站首页公告弹窗代码大家可以用在自己网站里面，美观加一。

使用方法，用我的这个子比主题来示例

找到自定义代码这块，把这个填进去，把你需要展示的公告写上，然后完成了。

其他主题呢你看看有没有自定义代码的地方，填进去行，如果是其他程序的话找找自定义弹窗代码的板块，把代码填进去即可。

演示图

<span class="prism-token prism-comment" spellcheck="true">&lt;!-- 弹窗开始  --&gt;</span>
<span class="prism-token prism-tag"><span class="prism-token prism-punctuation">&lt;</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">100%</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">100%</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">&gt;</span></span>
<span class="prism-token prism-tag"><span class="prism-token prism-punctuation">&lt;</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">&gt;</span></span>
<span class="prism-token prism-tag"><span class="prism-token prism-punctuation">&lt;</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">&gt;幻城云笔记</span></span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation">&lt;/</span>h3<span class="prism-token prism-punctuation">&gt;</span></span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation">&lt;</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">&gt;</span></span>百度搜索幻城云笔记，https://hcnote.cn<span class="prism-token prism-tag"><span class="prism-token prism-punctuation">&lt;/</span>div<span class="prism-token prism-punctuation">&gt;</span></span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation">&lt;</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

大家注意使用之前一定要把里面的内容修改一下，修改成自己的公告，现在上面显示的是我的公告。