使用 CSS 和 JavaScript 的简单 HTML 主页

• 下载源码 - 22.16 KB

引言

这是一个使用 CSS、JavaScript、Yahoo 和 Google API 创建的简单 HTML 首页。 这个想法是为了测试一些 JavaScript 和 API，我可以在我正在进行的其他项目中使用。

背景

如果首页几乎是一个静态页面，并且为了避免设置服务器来抛出服务器端主页的任何问题，使用 CSS、JavaScript 将允许创建一个简单的站点。 Yahoo 和 Google API 也让我简化了很多工作。 网站 A List Apart 在理解和使用 CSS 和 JavaScript 方面为我提供了许多灵感和优秀的信息。

Using the Code

该代码可以按原样运行。 该站点已经在 Firefox、Internet Explorer 和 Chrome 上进行了测试，并且在 Firefox、Internet Explorer 和 Chrome 中显示如下。 Firefox 允许使用 CSS 圆角，这在 Internet Explorer 中不显示。

我还决定添加一个滚动的 RSS 提要（来自 mioplanet 的滚动新闻跑马灯），利用 Google 的 Feed API。 要添加其他提要，请通过添加链接并用逗号分隔每个链接来修改 var rssURL。

var rssURL = new Array
	(http://www.channelnewsasia.com/rss/latest_cna_frontpage_rss.xml,
	http://www.channelnewsasia.com/rss/latest_cna_sg_rss.xml,
	http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml,
	"http://www.nytimes.com/services/xml/rss/nyt/World.xml");

该代码还使用了 Alen Grakalic 的图像预览脚本，该脚本使用 jquery 来实现图像预览（如下）：

要创建一个缩略图库，请更改以下部分，其中 fileDir 是将保存图片的目录名称

var fileDir = 
  "file:///C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/"; 

要添加要显示的图片，请更改以下部分，方法是添加用逗号分隔的图片名称。 如果给定了必要的权限，或者通过使用 FileSystemObject，可以修改此部分以允许直接从目录读取。

var fileName = new Array("Blue hills.jpg","Sunset.jpg","Water lilies.jpg","Winter.jpg");

使用 Yahoo Calendar 和 alert 设置了一个简单的日历。 如果有很多日期和描述需要保留，请相应地更改以下部分，考虑使用 XML 文件来保存所有必要的信息。

var evtdates = "1/15/2009,1/19/2009,2/16/2009"
var evtdate = new Array("1/15/2009","1/19/2009","2/16/2009"); //insert evt dates here
//insert evt desc here
var evtdesc = new Array("Party Time! between 2.00pm-5.00pm",
	"Meeting with Colleague @ 9am","Filming @ Studio between 2.00pm-3.00pm") 

如果设置正确，当用户单击日历中的日期时，Yahoo alert 将显示事件信息，如下所示：

我还使用了 Thang Q. Tran 关于 将 Yahoo Messenger 合并到您的网站的文章。

正如有人向我指出（感谢 denisloto！）似乎该页面未在 Google Chrome 中正确显示某些容器在设置时的位置（如下），RSS 滚动条离日期设置太近，并且 Yahoo 日历在渲染后似乎未对准位置，

 

因此，这里有一个小技巧（基于 Giantisland 的信息），通过包含一个额外的 CSS 元素，成功解决了 RSS 滚动条的问题

html*#RSSContainer {
	[position:absolute; MARGIN: 0px auto; WIDTH: 850px; 
		HEIGHT:20px; border: 0px solid #222;TEXT-ALIGN: right; 
		PADDING: 0px; -moz-border-radius: 8px; border-radius: 8px; 
		Z-INDEX: 1; LEFT:110px; TOP:34px;]
}

似乎通过将样式包含在 [] 中，它成功解决了问题！ 至于 Yahoo 日历，显然在单击事件日期后，问题就消失了！

兴趣点 

有许多很棒的文章和信息可让我们通过使用现有的 API 来创建一个简单的首页。 如果您所需要的只是一个简单的 HTML 页面，用于向您的朋友或员工展示有关事件的信息，但没有设置服务器的知识，那么这可能会对您有所帮助。 不同的浏览器在使用 CSS 时仍然构成挑战，但是通过使用一些可用的技巧，似乎可以按照人们想要的方式渲染页面。

历史

• 首次发布
• 第二次发布（2009 年 2 月 23 日）：包含了一个新的 CSS 元素，以解决 Chrome 中的显示问题。