一个可关闭的,可用于显示活动、通知、广告等的HTML

简介: 这段内容包含了一段HTML和JavaScript代码,用于创建一个可关闭的横幅提示。横幅有庆贺国庆的语句和优惠信息,并在用户聚焦关闭按钮时切换显示状态。样式定义了横幅的外观,包括颜色、字体和布局。JavaScript代码在页面加载完成后监听关闭按钮的焦点事件,以控制横幅的显示与隐藏。

这是在一个网站上看到的,感觉不错,以后可能有用,就扒下来了,就一个横幅显示。已经被我扒到一个静态html文件中了。示例如下:

代码如下:

<style>

.sitetips-default{background: #fff3e9;border: 1px solid #fcecdf;position: fixed;bottom: 20px;left:0;right: 0;z-index: 1000;width: 70%;max-width:1000px;border-radius: 3px;font-size: 15px;display: none;padding:14px 35px 12px;color:#f58b36;margin:0 auto;}

.sitetips-default .close{position:absolute;top:calc(50% - 12px);right:15px;color:#FF7C3C !important;text-decoration: none;height: 24px;line-height: 24px;}

.sitetips-default .close .icon{font-size:24px;top:-1px;}

.sitetips-default a{padding:0 !important;background:transparent !important;color:var(--theme-color) !important;text-decoration: underline;}

.sitetips-default .btn{padding:6px 12px !important;background: var(--theme-color) !important;color:#fff !important;border-radius: 20px;font-size:12px;display: inline-block;text-decoration: none;line-height: 1;}

.sitetips-default{width: 90%;text-align: left;font-size: 14px;padding:15px;right: 0;left: 0;bottom: 50px;}

.sitetips-default .close{right:calc(50% - 12px);bottom:-30px;top:inherit;font-size:28px;}

</style>

<div class="sitetips sitetips-default" style="display: block;" id="sitetips">

<span style="font-family: Arial, sans-serif; font-size: 14px; text-align: justify;">为祖国庆生,为今朝华夏喝彩,愿祖国国泰民安,愿全球华人幸福安康!</span>

<strong><span style="font-family: Arial, sans-serif; font-size: 14px; text-align: justify;">国庆节10月1日-7日限时优惠,全站八五折(包括VIP),优惠码:</span>dt85</strong><a href="javascript:;" class="close" id="close">×</i></a>

</div>

<script type="text/javascript">

window.onload=function(){

   var wenzi=document.getElementById('close');

   var div=document.getElementById('sitetips');

   wenzi.onfocus=function(){

           if(div.style.display=='block'){ // == 判断div.display是否为显示

                   div.style.display='none'; //= 赋值也可了解成改变

               }

               else{

                   div.style.display='block';

               }

       }

};

</script>

目录
相关文章
|
5月前
|
前端开发
HTML+CSS基础知识(4)简单的广告界面
这篇文章通过代码示例演示了如何使用CSS样式来美化网页布局,包括清除默认样式、设置页面字体、调整标题和内容的样式,以及为超链接添加悬停效果。
HTML+CSS基础知识(4)简单的广告界面
【HTML】制作一个简单的浮动广告页面
【HTML】制作一个简单的浮动广告页面
314 1
|
8月前
|
编解码 前端开发 JavaScript
11.使用HTML制作滑动广告
11.使用HTML制作滑动广告
168 0
|
Web App开发 移动开发 HTML5
|
6天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
79 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
68 7
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
43 6
|
2月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
50 1