`
jsntghf
  • 浏览: 2542767 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

根据时间段自动切换站点的CSS风格

CSS 
阅读更多

        网站能切换几套CSS风格早已不是什么新鲜事了,大家也都知道怎么去实现。前段时间发现一个有意思的站点http://www.leemunroe.com/

 

  同样是切换风格,不过他做了一点小小的调整。站点会根据当时的时间自动调整站点风格。作者为站点制作了早上、下午、夜晚三套皮肤,主要是分别制作了背景。12点以前系统会使用早上的皮肤,过了12点,站点会自动替换成下午的风格,5点后则替换成夜晚的风格。

 

  主要的功能实现是靠在头部的这段判断代码,很容易理解。有兴趣的朋友不妨试试。

 

<link rel="stylesheet" type="text/css"
      href="<%=
      if Time.now.hour < 12
        'morning.css'
      elsif Time.now.hour < 17
        'afternoon.css'
      else
        'night.css'
      end
    %>"></link>
分享到:
评论

相关推荐

    wp控制主题类夜间日间

    总之,"wp控制主题类夜间日间"是一种提升用户体验的策略,通过智能地切换主题,让网站在不同时间段呈现不同的视觉效果。这个过程涉及到WordPress主题管理、条件标签的使用、用户设置和CSS调整等多个技术层面,通过...

    幻灯片切换

    1. **自动播放**:幻灯片可以设置为自动循环播放,每隔一段时间自动切换到下一张,提供无需用户干预的连续浏览体验。 2. **手动控制**:用户可以通过点击或触摸箭头、指示器等控件来手动切换幻灯片,增加交互性。 ...

    jQuery实现的多图轮播切换相册特效源码.zip

    3. **自动播放**:轮播通常具备自动播放功能,每隔一段时间自动切换图片。这可以通过设置定时器(如`setInterval()`)并在适当时间调用切换函数来实现。 4. **手动控制**:除了自动播放,用户还应能通过点击按钮或...

    IE6无法打开INTERNET站点的解决办法

    2. 切换到“安全”标签页,根据需要调整各区域的安全级别。 3. 尤其需要注意的是,“受信任的站点”区域的设置,可以将目标站点添加到该区域中。 #### 解决方案五:检查网页代码兼容性 对于网站开发者来说,如果...

    HTML5 CSS3网页设计与制作教学导航.pdf

    3. **动态问候语**:根据时间显示不同的欢迎语。 4. **文本大小变化**:动态调整网页局部区域的文本大小。 5. **图片滚动**:实现图片自动滚动效果。 6. **选项卡功能**:创建选项卡式导航,切换显示内容。 7. **...

    mtime时光网宽屏焦点图.zip

    5. 自动播放:设置定时器,每隔一段时间自动切换到下一张图片,增强用户体验。 四、应用背景 在网页设计中,焦点图常用于首页的顶部,用于展示重要的内容或者推广活动。mtime时光网作为一家知名的电影资讯网站,其...

    手机wap源码模板 (587).zip

    这些可能代表不同时间段的服务或活动,例如餐饮服务的不同时间段。在WAP网站中,这些可能被设计为独立的页面或板块,展示相应时间内的特惠、菜单或者活动信息。开发者会根据业务需求,用HTML和CSS来布局这些页面,并...

    jquery精美无比的图片画廊,幻灯片,图片轮播

    1. **设定定时器**:使用`setInterval`创建定时器,每隔一段时间自动切换到下一张图片。 2. **控制按钮**:添加“上一张”和“下一张”按钮,点击后手动触发图片切换。 3. **过渡效果**:添加过渡动画,如淡入淡出,...

    Dreamweaver8视频教程02-03

    4. **站点管理**:教程可能讲解如何设置和管理站点,包括定义本地和远程服务器设置,同步文件,以及如何组织和管理项目文件。 5. **模板与库**:Dreamweaver8的模板功能允许用户创建可重用的设计元素和页面结构。这...

    《程序天下:JavaScript实例自学手册》光盘源码

    13.10 超过时间页面自动跳转 13.11 分时段问候用户 13.12 获取服务器时间 13.13 倒计时显示 13.14 背景时钟 13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期...

    程序天下:JavaScript实例自学手册

    13.10 超过时间页面自动跳转 13.11 分时段问候用户 13.12 获取服务器时间 13.13 倒计时显示 13.14 背景时钟 13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期...

    Dreamweaver实用技巧

    Dreamweaver的查找与替换功能不仅限于当前文档,还可以在整个站点中搜索,这对于修改大量重复代码非常有用。 10. **自定义工作区** 每个人的工作习惯不同,Dreamweaver允许你自定义工作区布局,将常用的面板和...

    400个DreamWeaver插件

    mxp/使窗口过一段时间后自动关闭 mxp/用来做电子商务的插件。不过只停留在表面的html语句和form的action,没有涉及后台程序 mxp/替换Dreamweaver自带的show-hide layer behavior,从而使更好的支持Netscape 6 mxp/...

    JS实现先显示大图后自动收起显示小图的广告代码

    在这个实例中,我们将探讨如何利用JavaScript来创建一个广告展示效果,即网页加载时首先显示大图,然后在一段时间后自动收起并切换为小图。 1. **广告展示效果概述** 这个特效的目的是模拟一种遮屏广告的效果,...

    网趣网上购物系统的部分特点与精华

    文字式采用流行的div+css开发设计,界面新颖美观,采用文字式导航条更有利于搜索引擎抓取页面信息,同时程序还支持原有的图片式菜单效果,后台可轻松切换使用,以上2类导航条菜单均支持模板切换时导航条自动变换颜色...

    34款经典Dreamweaver插件

    插入一个图片序列,每隔一段时间自动随机更换 Authorware 类别:DW Suite 文件格式:mxp 在页面内插入Authorware 作品 Alternate Table Rows 类别:DW Command 文件格式:mxp 使表格中行与行之间的背景色交替...

    网趣网上购物系统时尚版V13.0

    文字式采用流行的div+css开发设计,界面新颖美观,采用文字式导航条更有利于搜索引擎抓取页面信息,同时程序还支持原有的图片式菜单效果,后台可轻松切换使用,以上2类导航条菜单均支持模板切换时导航条自动变换颜色...

    响应式陶瓷研磨盘设备pbootcms网站模板抛光设备网站源码下载.txt

    所谓响应式设计(Responsive Design),是指通过CSS3媒体查询(Media Queries)等技术手段使网页能够根据不同终端屏幕尺寸自动调整布局和显示效果,确保用户无论使用何种设备都能获得良好浏览体验。 #### 四、模板...

    网趣网上购物系统时尚版

    文字式采用流行的div+css开发设计,界面新颖美观,采用文字式导航条更有利于搜索引擎抓取页面信息,同时程序还支持原有的图片式菜单效果,后台可轻松切换使用,以上2类导航条菜单均支持模板切换时导航条自动变换颜色...

    网趣网上购物系统时尚版 V9.0

    文字式采用流行的div+css开发设计,界面新颖美观,采用文字式导航条更有利于搜索引擎抓取页面信息,同时程序还支持原有的图片式菜单效果,后台可轻松切换使用,以上2类导航条菜单均支持模板切换时导航条自动变换颜色...

Global site tag (gtag.js) - Google Analytics