`

[轉載] 根据时段自动切换你的站点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样式表(style sheets)来实现。这种功能为网站增加了动态感和用户体验的多样性,使用户在不同的...

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

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

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

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

    背景自动切换css模板

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

    css控制图片切换

    使用纯CSS时,我们可以创建一个包含所有图片的容器,并设置定时器改变其子元素(图片)的`display`属性,从而实现自动切换。例如: ```css .slideshow { position: relative; width: 100%; height: 400px; } ....

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

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

    jQuery+CSS3一天时段动画场景切换特效

    在本项目中,“jQuery+CSS3一天时段动画场景切换特效”是一个利用JavaScript库jQuery和CSS3技术构建的交互式网页特效。这个特效旨在通过动态视觉表现,模拟一天中不同时间段的场景变化,如黄昏、白天、日落和夜晚,...

    Web站点风格切换

    在Web开发中,网站风格切换是一项重要的功能,它允许用户根据个人喜好或设备特性选择不同的界面展示。"Web站点风格切换"是一个项目,通过使用MasterPage和Theme技术,实现了这一功能。MasterPage是ASP.NET中用于创建...

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

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

    视频背景切换 html+css

    视频背景切换 html+css

    用CSS3滑动图像面板图片切换特效多种css3图片切换演示

    本文将详细讲解如何利用CSS3实现滑动图像面板的图片切换特效,以及多种不同的CSS3图片切换演示。同时,我们也会探讨与JQuery库的结合,以增强这种动态效果。 首先,CSS3中的关键帧动画(@keyframes)是创建滑动图像...

    css实现图片切换

    在实践中,你可能还会遇到一些进阶问题,如无限循环轮播、分页指示器、自动播放暂停等,这些都可以通过更复杂的CSS和JavaScript逻辑来实现。同时,也可以借助现有的库或框架,如Bootstrap的Carousel组件,来快速构建...

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

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

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

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

    Web站点风格切换的实现

    【标题】: "深入理解Web站点风格切换的实现与扩展" 【描述】: 在Web开发中,用户界面的个性化和多样性已经成为提升用户体验的关键因素之一。Asp.Net框架为我们提供了通过模板页(Master Page)和主题(Theme)实现...

    js+css实现焦点图切换

    js+css实现的焦点图切换功能 简单易改

    css3实现幻灯片切换.zip

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

    css+js网页颜色、皮肤多风格切换演示

    在网页设计中,提供多种颜色或皮肤风格切换的能力可以极大地提升用户体验,使用户可以根据个人喜好定制界面。"css+js网页颜色、皮肤多风格切换演示"这个主题涉及到两个主要技术:CSS(层叠样式表)和JavaScript。接...

    css 幻灯切换效果菜单

    1. **选择器与布局**:首先,需要使用CSS选择器(如class、id、伪类等)对菜单元素进行精准定位和风格设置。布局上通常采用绝对定位或者相对定位,结合z-index属性控制各元素的层叠关系。 2. **过渡与动画**:CSS3...

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

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

Global site tag (gtag.js) - Google Analytics