`

[轉載] 根据时段自动切换你的站点CSS风格

阅读更多
轉載於  http://www.lanrentuku.com/tech/cssdiv/20071018/cssdiv131617.shtml

网站能切换几套CSS风格早已不是什么新鲜事了。大家也都知道怎么去弄。早上发现一个有意思得站点 http://www.leemunroe.com/
  同样是切换风格。不过他做了点小小的调整。站点会根据当时的时间自动调整站点风格。作者为站点制作了早上、下午、夜晚三套皮肤,主要是分别制作了背景。12点以前系统会使用早上的皮肤,过了12点,站点会自动替换成下午的风格,5点后则替换成夜晚的风格。

  主要的功能实现是靠在头部的这段判断代码,很容易理解。有兴趣可以自己试试。

CSS版代码如下:

<link rel="stylesheet" type="text/css" 
href="<?php $hour = date("H"); if ($hour < 12) echo "morning.css"; elseif ($hour < 17) echo "day.css"; else echo "night.css"; ?>
" /> 


ASP版代码如下:

<link rel="stylesheet" type="text/css" href="<%
if hour(now)<12 then 
  response.write "a.css"
else 
  if hour(now)<17 then
    response.write "b.css"
  else
    response.write "c.css"
  end if
end if
%> " />
分享到:
评论

相关推荐

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

    【根据时段自动切换网站的CSS风格】是一种网页设计技术,它允许网站根据一天中的不同时间自动改变其样式,为用户提供更贴合环境的视觉体验。这种功能通常通过检测当前时间并加载相应的CSS样式表来实现。例如,早晨、...

    实时切换css风格、皮肤并保存

    "实时切换CSS风格、皮肤并保存"是一项功能,它允许用户在浏览网站时自由选择不同的主题或皮肤,同时将用户的偏好存储下来,以便他们在下次访问时自动应用。这个功能可以通过JavaScript和CSS的巧妙结合来实现,提高...

    ASP、PHP与javascript根据时段自动切换CSS皮肤的代码

    标题中的“ASP、PHP与javascript根据时段自动切换CSS皮肤的代码”是指在网站设计中,通过编程语言(ASP、PHP)或客户端脚本(JavaScript)根据当前时间动态地更改页面的CSS样式表,以实现不同时间段网站显示不同主题...

    css实现的图片自动切换

    本话题主要探讨如何利用CSS实现图片的自动切换效果,这对于创建动态、吸引人的用户界面至关重要。 一、CSS图片切换基础 在CSS中,我们可以利用`@keyframes`规则来创建动画,通过改变元素在一段时间内的样式,实现...

    背景自动切换css模板

    【标题】:“背景自动切换css模板” 在网页设计中,背景自动切换是一种常见的动态效果,可以为用户带来更丰富的视觉体验。"背景自动切换css模板"是专门针对这一需求设计的,它允许网页的背景图像按照预设的时间间隔...

    css自动换行 css自动换行 css自动换行

    css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行

    12种炫酷CSS3图片切换过渡效果

    【CSS3图片切换过渡效果详解】 CSS3是 Cascading Style Sheets 的第三个主要版本,它引入了许多新特性,其中最引人注目的就是丰富的动画和过渡效果。这些效果为网页设计带来了前所未有的动态视觉体验,特别是在图片...

    纯css半圆角tab标签切换代码

    纯CSS实现的Tab标签切换可以提供更加高效、简洁的交互体验,而无需依赖JavaScript等编程语言。本项目名为“纯css半圆角tab标签切换代码”,它包含了六个HTML文件,每个文件代表一种不同的Tab状态或布局,用于实现...

    适时切换CSS实现无刷新变换风格(Cookie保存)

    适时切换CSS实现无刷新变换风格(Cookie保存) 实用的一个JavaScript+CSS实现的效果,适时切换网页的CSS文件,在线无刷新切换网页风格,使用了JavaScript的Cookie技术,保存CSS切换设置,当再次打开网站的时候不会...

    视频背景切换 html+css

    视频背景切换 html+css

    网站风格适时随意切换JS+CSS高级版

    网站风格适时随意切换是网页设计中的一个重要特性,它允许用户根据个人喜好或特定场景选择不同的界面样式。在本文中,我们将深入探讨如何利用JavaScript(JS)和层叠样式表(CSS)来实现这一功能,特别是在高级应用...

    轮播图的实现(自动轮播+左右按钮切换和点选切换)

    可以使用CSS样式为轮播图添加指示点和切换按钮,并设置它们的样式和位置。 3. JavaScript逻辑:使用JavaScript来实现轮播图的自动切换和交互功能。以下是一种常见的实现方式: - 图片数据:定义一个数组,包含所有...

    Jquery+div/css 鼠标经过内容切换实例

    在实际项目中,你可能需要根据具体需求调整样式、事件处理和动画效果。此外,考虑到不同浏览器的兼容性问题,记得在编写 CSS 和 JavaScript 代码时,遵循最佳实践并进行充分的测试。 总之,通过结合使用 jQuery 和 ...

    jQuery+CSS3苹果产品介绍自动切换展示动画特效

    本项目“jQuery+CSS3苹果产品介绍自动切换展示动画特效”充分利用了这两者的强大功能,为苹果产品的展示提供了一个极具吸引力的平台。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画...

    一个基于JS+CSS+DOM+COOKIE无刷新更换网页风格并保存例子代码

    下次用户再次访问网站时,JavaScript会检查Cookie,如果发现有保存的风格选择,就会自动应用该风格,从而提供个性化的用户体验。 实现这个功能的步骤大致如下: 1. **创建CSS文件**:每个主题对应一个CSS文件,...

    基于jquery的css切换插件

    通过调用jQuery方法,我们可以轻松地切换不同的CSS文件,从而改变网页的整体视觉风格。这在用户自定义主题或提供多语言版本的网站中尤其有用,因为它允许用户根据个人喜好或地区设置调整页面外观。 `styleswitch.js...

    css3实现幻灯片切换.zip

    "css3实现幻灯片切换"是利用CSS3的特性来构建一种常见的网页元素——幻灯片展示,常用于网站的首页或产品介绍,以吸引用户的注意力并展示信息。 幻灯片切换通常由多个图像或内容面板组成,它们按照设定的时间间隔或...

    纯div+css轮播图片切换图片

    下面将详细讲解这个主题,包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏,实现图片的动态变化。这通常涉及到CSS的`display`属性,通过改变...

    css广告特效(电视背投效果图片切换)

    在实际应用中,我们通常会结合JavaScript来控制这些CSS效果的触发时机,例如,当用户点击按钮或达到一定时间间隔时自动切换图片。同时,为了确保兼容性,可能还需要引入前缀(如-webkit-)来支持不同浏览器的CSS3...

Global site tag (gtag.js) - Google Analytics