轉載於
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)来实现。这种功能为网站增加了动态感和用户体验的多样性,使用户在不同的...
标题中的“ASP、PHP与javascript根据时段自动切换CSS皮肤的代码”是指在网站设计中,通过编程语言(ASP、PHP)或客户端脚本(JavaScript)根据当前时间动态地更改页面的CSS样式表,以实现不同时间段网站显示不同主题...
本话题主要探讨如何利用CSS实现图片的自动切换效果,这对于创建动态、吸引人的用户界面至关重要。 一、CSS图片切换基础 在CSS中,我们可以利用`@keyframes`规则来创建动画,通过改变元素在一段时间内的样式,实现...
【标题】:“背景自动切换css模板” 在网页设计中,背景自动切换是一种常见的动态效果,可以为用户带来更丰富的视觉体验。"背景自动切换css模板"是专门针对这一需求设计的,它允许网页的背景图像按照预设的时间间隔...
使用纯CSS时,我们可以创建一个包含所有图片的容器,并设置定时器改变其子元素(图片)的`display`属性,从而实现自动切换。例如: ```css .slideshow { position: relative; width: 100%; height: 400px; } ....
【CSS3图片切换过渡效果详解】 CSS3是 Cascading Style Sheets 的第三个主要版本,它引入了许多新特性,其中最引人注目的就是丰富的动画和过渡效果。这些效果为网页设计带来了前所未有的动态视觉体验,特别是在图片...
**CSS轮播图片百叶窗切换详解** 在网页设计中,动态效果的使用可以极大地提升用户体验,其中轮播图(Slider)是一种常见的展示方式,它能够以优雅的方式展示多张图片或内容。而“百叶窗”切换效果则是轮播图动画中...
在Web开发中,网站风格切换是一项重要的功能,它允许用户根据个人喜好或设备特性选择不同的界面展示。"Web站点风格切换"是一个项目,通过使用MasterPage和Theme技术,实现了这一功能。MasterPage是ASP.NET中用于创建...
可以使用CSS样式为轮播图添加指示点和切换按钮,并设置它们的样式和位置。 3. JavaScript逻辑:使用JavaScript来实现轮播图的自动切换和交互功能。以下是一种常见的实现方式: - 图片数据:定义一个数组,包含所有...
你可以通过修改CSS中的`background-image`属性来更换背景图片,并通过媒体查询或伪类选择器为每张图片设置不同的动画延迟,以实现自动切换效果。 总结来说,CSS3的全屏背景图片缩小渐变自动切换代码是利用了CSS3的...
适时切换CSS实现无刷新变换风格(Cookie保存) 实用的一个JavaScript+CSS实现的效果,适时切换网页的CSS文件,在线无刷新切换网页风格,使用了JavaScript的Cookie技术,保存CSS切换设置,当再次打开网站的时候不会...
视频背景切换 html+css
在实践中,你可能还会遇到一些进阶问题,如无限循环轮播、分页指示器、自动播放暂停等,这些都可以通过更复杂的CSS和JavaScript逻辑来实现。同时,也可以借助现有的库或框架,如Bootstrap的Carousel组件,来快速构建...
网站风格适时随意切换是网页设计中的一个重要特性,它允许用户根据个人喜好或特定场景选择不同的界面样式。在本文中,我们将深入探讨如何利用JavaScript(JS)和层叠样式表(CSS)来实现这一功能,特别是在高级应用...
在网页设计中,提供多种颜色或皮肤的选择是提升用户...通过研究这些文件,你可以深入理解如何结合使用CSS和JS来实现网页的多风格切换。这是一个非常实用的技巧,对于想要提升网站互动性的开发者来说,值得学习和掌握。
在实际项目中,你可能需要根据具体需求调整样式、事件处理和动画效果。此外,考虑到不同浏览器的兼容性问题,记得在编写 CSS 和 JavaScript 代码时,遵循最佳实践并进行充分的测试。 总之,通过结合使用 jQuery 和 ...
本项目“jQuery+CSS3苹果产品介绍自动切换展示动画特效”充分利用了这两者的强大功能,为苹果产品的展示提供了一个极具吸引力的平台。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画...
在本项目中,"jquery+css3实现图片3D切换效果"是一个利用现代Web技术创建交互式用户体验的实例。这个项目结合了JavaScript库jQuery和CSS3的强大功能,为用户提供了一种创新的方式来展示和切换图片,特别是在网页设计...
通过调用jQuery方法,我们可以轻松地切换不同的CSS文件,从而改变网页的整体视觉风格。这在用户自定义主题或提供多语言版本的网站中尤其有用,因为它允许用户根据个人喜好或地区设置调整页面外观。 `styleswitch.js...
js+css实现的焦点图切换功能 简单易改