获取当前地区天气情况：

<iframe name=”sinaWeatherTool” src=”http://weather.news.sina.com.cn/chajian/iframe/weatherStyle1.html?city=%E4%BD%9B%E5%B1%B1″ width=”150″ height=”20″ marginwidth=”0″ marginheight=”0″ hspace=”0″ vspace=”0″ frameborder=”0″ scrolling=”no”></iframe>

获取当前时间：

<script type=”text/javascript” language=”javascript”>
function show_cur_times(){
//获取当前日期
var date_time = new Date();
//定义星期
var week;
//switch判断
switch (date_time.getDay()){
case 1: week=”星期一”; break;
case 2: week=”星期二”; break;
case 3: week=”星期三”; break;
case 4: week=”星期四”; break;
case 5: week=”星期五”; break;
case 6: week=”星期六”; break;
default:week=”星期天”; break;
}
//年
var year = date_time.getFullYear();
//判断小于10，前面补0
if(year<10){
year=”0″+year;
}

//月
var month = date_time.getMonth()+1;
//判断小于10，前面补0
if(month<10){
month=”0″+month;
}

//日
var day = date_time.getDate();
//判断小于10，前面补0
if(day<10){
day=”0″+day;
}

//时
var hours =date_time.getHours();
//判断小于10，前面补0
if(hours<10){
hours=”0″+hours;
}

//分
var minutes =date_time.getMinutes();
//判断小于10，前面补0
if(minutes<10){
minutes=”0″+minutes;
}

//秒
var seconds=date_time.getSeconds();
//判断小于10，前面补0
if(seconds<10){
seconds=”0″+seconds;
}

//拼接年月日时分秒
var date_str = year+”年”+month+”月”+day+”日 “+hours+”:”+minutes+”:”+seconds+” “+week;

//显示在id为showtimes的容器里
document.getElementById(“showtimes”).innerHTML= date_str;
}

//设置1秒调用一次show_cur_times函数
setInterval(“show_cur_times()”,100);
</script>

JS代码部分

<script type=”text/javascript”>
//设为首页
function SetHome(obj,url){
try{
obj.style.behavior=’url(#default#homepage)’;
obj.setHomePage(url);
}catch(e){
if(window.netscape){
try{
netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”);
}catch(e){
alert(“抱歉，此操作被浏览器拒绝！\n\n请在浏览器地址栏输入“about:config”并回车然后将[signed.applets.codebase_principal_support]设置为’true'”);
}
}else{
alert(“抱歉，您所使用的浏览器无法完成此操作。\n\n您需要手动将【”+url+”】设置为首页。”);
}
}
}
//收藏本站
function AddFavorite(title, url) {
try {
window.external.addFavorite(url, title);
}
catch (e) {
try {
window.sidebar.addPanel(title, url, “”);
}
catch (e) {
alert(“抱歉，您所使用的浏览器无法完成此操作。\n\n加入收藏失败，请使用Ctrl+D进行添加”);
}
}
}
//保存到桌面
function toDesktop(sUrl,sName){
try {
var WshShell = new ActiveXObject(“WScript.Shell”);
var oUrlLink = WshShell.CreateShortcut(WshShell.SpecialFolders(“Desktop”) + “\\” + sName + “.url”);
oUrlLink.TargetPath = sUrl;
oUrlLink.Save();
}
catch(e) {
alert(“当前IE安全级别不允许操作！”);
}
}
</script>

应用：

<a href=”javascript:void(0);” onclick=”SetHome(this,'{dede:global.cfg_basehost/}’);”>设为首页</a>

<a href=”javascript:void(0);” onclick=”AddFavorite(‘{dede:global.cfg_webname/}’,location.href)”>收藏本站</a>

Copy & Paste

安装 FontAwesome.otf 文件到你的系统中。 然后，拷贝并粘贴图标字体的代码到你的草图或设计中就能看到效果了！

http://www.bootcss.com/p/font-awesome/design.html

主要分为2步来分析…

一、绝对定位元素的居中实现

如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。

兼容性不错的主流用法是：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

但，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。

CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，于是，我们可以：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

于是乎，无论绝对定位元素的尺寸是多少，其都是水平垂直居中显示的。

然，问题很明显，兼容性不好。IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的（手机web开发可忽略）。

实际上，绝对定位元素的居中实现还有另外一种方法，可以说是权衡了上面的尺寸自适应以及兼容性的一个方案，其实现的核心是margin:auto.

二、margin:auto实现绝对定位元素的居中

首先，我们来看下CSS代码：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

代码两个关键点：

1. 上下左右均0位置定位；
2. margin: auto

于是，就居中了。上面代码的width: 600px height: 400px仅是示意，你修改为其他尺寸，或者不设置尺寸（需要是图片这种自身包含尺寸的元素），都是居中显示的。很有意思的~~