主题添加左下角悬浮图片广告

网站建设2年前发布 电商目录
4,591 0
主题添加左下角悬浮图片广告

复制下方代码添加在页脚footer.php文件</body>前

<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mophp_ad_left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://www.mophp.cn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>img<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">max-width</span><span class="token punctuation">:</span><span class="token number">100%</span><span class="token punctuation">;</span><span class="token property">max-height</span><span class="token punctuation">:</span><span class="token number">100%</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdn.mophp.cn/wp-content/uploads/2020/07/1595052372-94ddba6a4e605fb.gif<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>

复制下方css样式添加在主题css文件或主题自定义样式中

<span class="token comment">/*左侧悬浮广告*/</span>
<span class="token selector"><span class="token class">.mophp_ad_left</span> </span><span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">50%</span><span class="token punctuation">;</span>
    <span class="token property">margin-left</span><span class="token punctuation">:</span> -<span class="token number">840</span>px<span class="token punctuation">;</span>
    <span class="token property">bottom</span><span class="token punctuation">:</span> -<span class="token number">70</span>px<span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">137</span>px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">325</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> screen and <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span><span class="token number">1490</span>px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector"><span class="token class">.mophp_ad_left</span></span><span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> screen and <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span><span class="token number">768</span>px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector"><span class="token class">.mophp_ad_left</span></span><span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span><span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">5</span>px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">80</span>px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span>px<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">99</span><span class="token punctuation">;</span><span class="token property">left</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">70</span>px<span class="token punctuation">;</span><span class="token property">top</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span><span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">/*左侧悬浮广告结束*/</span>

 

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
none
暂无评论...