顶级经典常用的CSS属性
作者:dangbao 日期:2008-05-29
div+css命名规则
作者:dangbao 日期:2008-01-13
dom非定位下拉菜单
作者:dangbao 日期:2008-11-20
最近一直很忙，文章也发的少了。进入冬天了，总是感觉有点累，大概是季节变换带来的身体不适吧。下面请看我的一本JS书里面带的关于DOM实现的下拉菜单实例，不象以往发的下拉菜单往往通过相对定位和绝对定位来实现下拉。好了，请点击文章后查看效果。
程序代码
程序代码A DOM drop-down menu
// global variables for timeout and for current menu
var t=false,current;
function SetupMenu() {
if (!document.getElementsByTagName) return;
items=document.getElementsByTagName("li");
for (i=0; i<items.length; i++)
……
// global variables for timeout and for current menu
var t=false,current;
function SetupMenu() {
if (!document.getElementsByTagName) return;
items=document.getElementsByTagName("li");
for (i=0; i<items.length; i++)
……
Tags: DOM下拉菜单
li内图文rollover效果
作者:dangbao 日期:2008-11-12
此效果要实现的是鼠标经过LI出现白背景，而LI内有小图标和文字。呵呵，看上去简单的效果，则有许多思路来实现，我们给每个导航加不同的小图标，就需要单独定义三个CLASS，用来背景来显示几个透明的小图。我们都知道用背景来显示图片可以精确的定位小图位置，和文字协调。在页面里，可以将给LI加CLASS，也可以给A加CLASS。但是这两个效果都不好，不是鼠标经过显示不了小图标，就是图标在背景外。那么就在文字前面加个SPAN标签，用来显示图片。SPAN是行内元素，所以需要使用DISPLAY:BLOCK来使其块状显示。然后左浮动，如果不加浮动文字会回行，因为SPAN已经是块状显示了。OK，效果出来了。查看效果
Tags: 图文rollover效果
CSS实现双边框的图片,鼠标经过背景变色
作者:dangbao 日期:2008-11-11
用border实现图片的一个边框不算难事，如果要是想加双边框并且有间距有背景就值得去探讨了，看看我的例子吧。
点击查看效果
程序代码
点击查看效果
程序代码<style>
*{margin:0;padding:0;list-style:none;}
img{border:1px solid #ccc}
.info li { padding:5px;width:144px;float:left}
.info li .img { padding:5px; border:1px solid #CBCBCB;display:block;}
.info li .img:link,.info li .img:visited {border:1px solid #CBCBCB;}
.info li .img:hover{border:1px solid #CBCBCB;background:#f0f0f0;}
</style>……
*{margin:0;padding:0;list-style:none;}
img{border:1px solid #ccc}
.info li { padding:5px;width:144px;float:left}
.info li .img { padding:5px; border:1px solid #CBCBCB;display:block;}
.info li .img:link,.info li .img:visited {border:1px solid #CBCBCB;}
.info li .img:hover{border:1px solid #CBCBCB;background:#f0f0f0;}
</style>……
Tags: 图片双边框
CSS代码横竖格式化工具
作者:dangbao 日期:2008-11-10
添加一行声明代码-兼容IE8
作者:dangbao 日期:2008-11-06
无意打开IETester在IE8下测试了一个页面，突然发现一个父级position:relative;子级position:absolute;的样式焦点轮播的时候在IE8下居然是错位的。仔细看了一下，发现IE8居然不认父级的相对定位，直接就是在屏幕上显示绝对定位。初步判断是IE8对JS的解释变化了。但是我之前在各个浏览器都测试过了，没问题。
本着学习的态度，我开始查看一些知名站点在IE8下的显示情况，当然过程是疑惑+漫无目的的。直接奉上我最后得到的结果吧。在HEAD里面多了一些代码。很疑惑，搜索一下，找到了微软的MSDN,在IE8的问题下面有一条“如何立即修复我的站点？”，看完了文章，恍然大悟，原来代码是强制将IE8以类似IE7的方式来呈现页面。
程序代码
原文：
快速短期修复措施
您维护的现有网页可以在 Windows Internet Explorer 7 中正常显示，但您希望通过极少的修改进行更新后，它能够在 Windows Internet Explorer 8 中正常显示。有两种方法。您可以在每个页面中添加兼容性模式 META 标记，强制 Windows Internet Explorer 8 以类似 Windows Internet Explorer 7 呈现页面的方式来呈现页面。如果您控制 Web 服务器，还可以将服务器配置为发送与每个网页的 META 标记等效的自定义 HTTP 响应标头，以使服务器自动添加兼容性。
如何修改每个页面
将以下 HTML META 标记放置到每个网页的 HEAD 元素中（在除 TITLE 或 META 外的标记之前）：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
通过以上方式修复您的网站后，将强制 Windows Internet Explorer 8 以类似 Windows Internet Explorer 7 呈现页面的方式来呈现页面。
如何将服务器配置为自动修改每个页面
若要在每个页面中自动添加等效于 HTML META 标记的兼容性，请将服务器配置为发送以下标头：
X-UA-Compatible:IE=EmulateIE7
若要配置 Microsoft Internet Information Services (IIS) 7.0，请按以下方式配置 Web.config 文件： 程序代码
本着学习的态度，我开始查看一些知名站点在IE8下的显示情况，当然过程是疑惑+漫无目的的。直接奉上我最后得到的结果吧。在HEAD里面多了一些代码。很疑惑，搜索一下，找到了微软的MSDN,在IE8的问题下面有一条“如何立即修复我的站点？”，看完了文章，恍然大悟，原来代码是强制将IE8以类似IE7的方式来呈现页面。
程序代码<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
原文：
快速短期修复措施
您维护的现有网页可以在 Windows Internet Explorer 7 中正常显示，但您希望通过极少的修改进行更新后，它能够在 Windows Internet Explorer 8 中正常显示。有两种方法。您可以在每个页面中添加兼容性模式 META 标记，强制 Windows Internet Explorer 8 以类似 Windows Internet Explorer 7 呈现页面的方式来呈现页面。如果您控制 Web 服务器，还可以将服务器配置为发送与每个网页的 META 标记等效的自定义 HTTP 响应标头，以使服务器自动添加兼容性。
如何修改每个页面
将以下 HTML META 标记放置到每个网页的 HEAD 元素中（在除 TITLE 或 META 外的标记之前）：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
通过以上方式修复您的网站后，将强制 Windows Internet Explorer 8 以类似 Windows Internet Explorer 7 呈现页面的方式来呈现页面。
如何将服务器配置为自动修改每个页面
若要在每个页面中自动添加等效于 HTML META 标记的兼容性，请将服务器配置为发送以下标头：
X-UA-Compatible:IE=EmulateIE7
若要配置 Microsoft Internet Information Services (IIS) 7.0，请按以下方式配置 Web.config 文件：
程序代码<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Tags: 兼容IE8
