轉載於
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样式表(style sheets)来实现。这种功能为网站增加了动态感和用户体验的多样性,使用户在不同的...
"实时切换CSS风格、皮肤并保存"是一项功能,它允许用户在浏览网站时自由选择不同的主题或皮肤,同时将用户的偏好存储下来,以便他们在下次访问时自动应用。这个功能可以通过JavaScript和CSS的巧妙结合来实现,提高...
标题中的“ASP、PHP与javascript根据时段自动切换CSS皮肤的代码”是指在网站设计中,通过编程语言(ASP、PHP)或客户端脚本(JavaScript)根据当前时间动态地更改页面的CSS样式表,以实现不同时间段网站显示不同主题...
【标题】:“背景自动切换css模板” 在网页设计中,背景自动切换是一种常见的动态效果,可以为用户带来更丰富的视觉体验。"背景自动切换css模板"是专门针对这一需求设计的,它允许网页的背景图像按照预设的时间间隔...
使用纯CSS时,我们可以创建一个包含所有图片的容器,并设置定时器改变其子元素(图片)的`display`属性,从而实现自动切换。例如: ```css .slideshow { position: relative; width: 100%; height: 400px; } ....
【CSS3图片切换过渡效果详解】 CSS3是 Cascading Style Sheets 的第三个主要版本,它引入了许多新特性,其中最引人注目的就是丰富的动画和过渡效果。这些效果为网页设计带来了前所未有的动态视觉体验,特别是在图片...
在本项目中,“jQuery+CSS3一天时段动画场景切换特效”是一个利用JavaScript库jQuery和CSS3技术构建的交互式网页特效。这个特效旨在通过动态视觉表现,模拟一天中不同时间段的场景变化,如黄昏、白天、日落和夜晚,...
在Web开发中,网站风格切换是一项重要的功能,它允许用户根据个人喜好或设备特性选择不同的界面展示。"Web站点风格切换"是一个项目,通过使用MasterPage和Theme技术,实现了这一功能。MasterPage是ASP.NET中用于创建...
可以使用CSS样式为轮播图添加指示点和切换按钮,并设置它们的样式和位置。 3. JavaScript逻辑:使用JavaScript来实现轮播图的自动切换和交互功能。以下是一种常见的实现方式: - 图片数据:定义一个数组,包含所有...
视频背景切换 html+css
本文将详细讲解如何利用CSS3实现滑动图像面板的图片切换特效,以及多种不同的CSS3图片切换演示。同时,我们也会探讨与JQuery库的结合,以增强这种动态效果。 首先,CSS3中的关键帧动画(@keyframes)是创建滑动图像...
在实践中,你可能还会遇到一些进阶问题,如无限循环轮播、分页指示器、自动播放暂停等,这些都可以通过更复杂的CSS和JavaScript逻辑来实现。同时,也可以借助现有的库或框架,如Bootstrap的Carousel组件,来快速构建...
在实际项目中,你可能需要根据具体需求调整样式、事件处理和动画效果。此外,考虑到不同浏览器的兼容性问题,记得在编写 CSS 和 JavaScript 代码时,遵循最佳实践并进行充分的测试。 总之,通过结合使用 jQuery 和 ...
本项目“jQuery+CSS3苹果产品介绍自动切换展示动画特效”充分利用了这两者的强大功能,为苹果产品的展示提供了一个极具吸引力的平台。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画...
【标题】: "深入理解Web站点风格切换的实现与扩展" 【描述】: 在Web开发中,用户界面的个性化和多样性已经成为提升用户体验的关键因素之一。Asp.Net框架为我们提供了通过模板页(Master Page)和主题(Theme)实现...
js+css实现的焦点图切换功能 简单易改
"css3实现幻灯片切换"是利用CSS3的特性来构建一种常见的网页元素——幻灯片展示,常用于网站的首页或产品介绍,以吸引用户的注意力并展示信息。 幻灯片切换通常由多个图像或内容面板组成,它们按照设定的时间间隔或...
在网页设计中,提供多种颜色或皮肤风格切换的能力可以极大地提升用户体验,使用户可以根据个人喜好定制界面。"css+js网页颜色、皮肤多风格切换演示"这个主题涉及到两个主要技术:CSS(层叠样式表)和JavaScript。接...
1. **选择器与布局**:首先,需要使用CSS选择器(如class、id、伪类等)对菜单元素进行精准定位和风格设置。布局上通常采用绝对定位或者相对定位,结合z-index属性控制各元素的层叠关系。 2. **过渡与动画**:CSS3...
下面将详细讲解这个主题,包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏,实现图片的动态变化。这通常涉及到CSS的`display`属性,通过改变...