跳到主要内容

创建时间敏感的CSS站点

在今天的网页设计环境中,视觉吸引访问者需要越来越多,甚至更多地让他们不断回归。当然,这主要取决于内容,但细微的小细节可以让任何访客变得兴奋。在本教程中,您将创建一个时间敏感的CSS站点,该站点根据用户访问它的时间更改其背景。之后,您应具备使脚本适应您想要使用的任何其他数据所需的知识。

本教程中的所有服务器端示例都将基于PHP,因此请确保您具有启用PHP5的工作测试环境。如果您正在使用任何其他服务器端脚本工具,那么可能会有一个指南来在线完成类似的效果。但是,通过阅读本指南,您可能会识别出类似的语法和功能,使您可以将其转换为您正在使用的语言。

教程文件中包含一个文件夹tut_css,其中包含完成此项目所需的所有基本文件。将文件夹移动到测试服务器的根目录中。在首选IDE中打开它,然后在浏览器中查看index.php。如果您已启用PHP并且所有内容都已成功复制,那么您应该会看到一个带有标题的基本白页,左侧是导航,右侧是lipsum。现在是时候开始动态风格了。

Dynamic CSS

小巧精致的细节可以将网站变为现实。在本教程中,您将创建一个站点,该站点根据用户访问它的时间更改其背景

PHP日落和日出

使用PHP根据时间检索和做出决策有其优点和缺点。最大的缺点是PHP无法访问用户计算机的时间,只能获得服务器的时间。优点是PHP具有大量功能,可以轻松处理时间。在开始之前打开index.php 标记,键入以下PHP。之后,我将解释脚本的关键部分。

 = $ sunrise && $ time <$ sunrise + 2)$ style ='sunrise'; elseif($ time> = $ sunrise + 2 && $ time <$ sunset)$ style ='day'; elseif($ time> = $ sunset && $ time <$ sunset + 2)$ style ='sunset';别的$ style ='night'; ?>

第2-4行设置三个变量。 $ time设置为当前小时。 $ sunrise设置为今天的日出时间。 $ sunset设置为比日落时间晚一个小时。根据我的经验,官方日落时间开始一两个小时之前,大多数人会称之为日落开始。

第5-8行运行一组标准if语句,以确定要显示的样式:日出,日,日落或夜晚。然后将其设置为变量$ Style。现在,无论何时需要参考时间,都可以使用此功能,如下所示。

动态CSS有三种主要方式。您使用哪一个取决于几个因素:每个数据更改的样式数量;加载到页面中的样式表数量,以及服务器上的自定义数量。

1.设置正文ID /类:最流行的使用动态CSS的方法是根据所需的样式设置页面的正文ID或类。这样做的好处是不需要进行服务器更改:您可以在样式表中使用相同的id / class,而无需额外的代码,并且可以轻松快速地进行原型和调试。这样做的缺点是您只能使用预定义的常量。因此,您无法使用此方法随机调色板。

2.包括样式表:第二种最流行的方法是根据您需要的样式添加额外的样式表。当许多款式根据需要改变时,这可能是有益的;这样就可以使样式表必须包含所有其他可能状态的样式。缺点是您必须为每个州创建一个样式表。如果你有很多不同的风格,这可能是一个很大的麻烦。它还继承了无法访问样式表中数据的缺陷。

3.样式表中的PHP:这种方法可以通过多种方式完成。如果成功且适当地使用,它可以创造最大的自由度。由于样式表中可以直接访问数据,因此可能的状态数量没有限制。缺点是,如果您希望样式表仍然具有.css文件扩展名,则需要自定义服务器;这也意味着你失去了样式表的可移植性。另一种选择是使用.php作为CSS扩展。另一个缺点是,您只需将所有规则放在一个文件中,而无需复制和重新处理PHP。

在我们的例子中,每个状态只有少数变化,只有四个状态。基于上面列出的优点和缺点,设置body ID可能是实现效果的最佳方式。

改变标记为以下内容:

/ ********** TIME SENSITIVE CSS ********** / #sunset {background:url(../ images / sunset.jpg;)repeat-x#BE7001; } #sunrise {background:url(../ images / sunrise.jpg;)repeat-x#EFC501; } #day {background:url(../ images / day.jpg)repeat-x#0A6FBF; } #night {background:url(../ images / night.jpg)repeat-x#00123A; }

现在在浏览器中打开您的页面,欣赏风景,具体取决于一天中的什么时间。
包括样式表是另一种简单而有效的方法。这种做法涉及为每个州制定单独的样式表。要使当前站点适应此方法,请创建四个样式表,名为sunset.css,sunrise.css,day.css和night.css。将每个状态的相应代码放在其文件中,然后删除body标签上的id,而不是将以下代码放入标签。



在概述的三种方法中,这一方法是迄今为止最灵活和最强大的方法。但是,它也需要最多的工作,所以如果舞台不适合你,请返回并重复。如果它仍然无法正常工作,那么在线快速搜索通常会引导您解决其他人遇到的同一问题。

将.css设置为以php身份运行

这是个人意见的问题;但是,我觉得拥有.css扩展名有助于定义外部资产正在做什么。此阶段不是必需的,因此如果您不介意使用.php结尾的CSS,或者您的服务器不允许您进行以下更改,则跳过此步骤。

Create time sensitive sites - PHP time coding

PHP无法访问用户的计算机时间,但从好的方面来说,它有一大堆功能,可以减少处理时间的痛苦

在站点的根目录中创建.htaccess文件,并在其中放置以下行:

AddHandler应用程序/ X-httpd-php .css

这将PHP设置为处理扩展名为.css的所有文件,使您可以将php放在.css文件中,就好像它与.php文件完全相同。如果它最初没有做任何事情,请重新启动Apache,看看是否能解决问题。

设置内容类型

使用动态CSS时最重要的事情是停止PHP将内容类型标题设置为text / html。您需要使用内容类型text / css将CSS文件发送到浏览器。为此,请将以下行放在base.css的顶部(如果没有完成上一步,则放在base.php中)。

要立即更改背景,请将其放在刚刚在顶部写入的行下方(您可以从index.php中删除所有PHP)。

 = $ sunrise && $ time <$ sunrise + 2)$ style ='url(../ images / sunrise_bg.jpeg)repeat-x orange'; elseif($ time> = $ sunrise + 2 && $ time <$ sunset)$ style ='url(../ images / day_bg.jpeg)repeat-x blue'; elseif($ time> = $ sunset && $ time <$ sunset + 2)$ style ='url(../ images / sunset_bg.jpeg)repeat-x black'; else $ style ='url(../ images / night_bg.jpeg)repeat-x black'; ?>
身体{背景:  ; }

在浏览器中打开页面现在应该显示模拟户外活动的背景。

Create time sensitive sites - PHP code changes the background according to time

本教程中的代码会根据时间更改背景;相同的技术可用于适应位置或天气

PHP不是在您的网站中添加动态元素的唯一方法:JavaScript多年来一直是网站动态的原始基础。在上面的三种方法中,前两种方法在JavaScript中可以很好地适应。 JavaScript有一些缺点。页面加载和新样式之间存在延迟。 JavaScript也因浏览器差异而臭名昭着,并且它没有与PHP相同的资源,因此无法提供日出和日落时间。因此,在下面的示例中,状态将静态设置为日。

var state ='day'; document.getElementsByTagName('body')[0] .id = state;

上面代码的一般细分是它为变量state赋值为day。第二行然后通过选择文档开始,找到具有标记名称body的所有元素(应该始终只是一个),然后给第一个(第0个元素)状态的id。

var state ='day'; var cssFile ='css /'+ state +'。css'; var link = document.createElement('link'); link.setAttribute('href',cssFile); document.getElementsByTagName( '头')[0] .appendChild(联系);


翻译字数超限