一个用div写成的表单

一个用div写成的表单

代码:<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>表单设计实战—易用性表单设计</title>
<style type=”text/css”>
body {
   background-color:#F7F7F7;
}
fieldset {
   border:1px dashed #CCC;
   padding:10px;
}
legend {
   font-family:Arial, Helvetica, sans-serif;
   color:#fff;
   background: #666;
   border: 1px solid #333;
   padding: 2px 6px;
}
label {
   width:142px;
   height:32px;
   margin:3px 2px 0 0;
   padding:11px 0 0 6px;
   background-color:#CCCCCC;
   float:left;
   color:#666;
}
.form {
   margin:0;
   padding:0;
}
#leftSide {
   width:530px;
   padding-top:30px;
   float:left;
}
.div_texbox {
   width:347px;
   float:right;
   background-color:#E6E6E6;
   height:35px;
   margin-top:3px;
   padding-top:5px;
   padding-bottom:3px;
   padding-left:5px;
}
.textbox {
   background-image: url(images/16t.gif);
   background-repeat: no-repeat;
   background-position:left;
   width:285px;
   font:normal 18px Arial;
   color: #999999;
   padding:3px 5px 3px 19px;
}
input:focus, input:hover {
   background-color:#F0FFE6;
}
.button_div {
   width:287px;
   float:right;
   text-align:right;
   height:35px;
   margin-top:3px;
   padding:5px 32px 3px;
}
.buttons {
   padding:6px 14px;
   border:2px solid;
   border-color: #fff #d8d8d0 #d8d8d0 #fff;
   background: #e3e3db;
   color: #989070;
   font-weight:bold;
}
</style>
</head>
<body>
<div id=”leftSide”>
   <fieldset>
   <legend>易用性表单设计</legend>
   <form action=”” method=”POST” class=”form”>
       <label for=”name”>Name</label>
       <div class=”div_texbox”>
           <input name=”name” type=”text” class=”textbox” id=”name” value=”” />
       </div>
       <label for=”address”>Adress</label>
       <div class=”div_texbox”>
           <input name=”address” type=”text” class=”textbox” id=”address” value=”” />
       </div>
       <label for=”city”>City</label>
       <div class=”div_texbox”>
           <input name=”city” type=”text” class=”textbox” id=”city” value=”” />
       </div>
       <label for=”country”>Cuntry</label>
       <div class=”div_texbox”>
           <input name=”country” type=”text” class=”textbox” id=”country” value=”” />
       </div>
       <div class=”button_div”>
           <input name=”Submit” type=”button” value=”Submit” class=”buttons” />
       </div>
   </form>
   </fieldset>
</div>
</body>
</html>
在把这个代码熟悉后,我有一些收获,和大家分享一下:
第一:用一个div控制整个页面。
(#leftSide {
   width:530px;
   padding-top:30px;
   float:left;})
运用<fieldset></fieldset>来控制标题和表单。利用<legend></legend>来控制标题。
第二:表单中利用了<label></label>和<div><input></div>来控制文本框。
(
.div_texbox {
   width:347px;
   float:right;
   background-color:#E6E6E6;
   height:35px;
   margin-top:3px;
   padding-top:5px;
   padding-bottom:3px;
   padding-left:5px;
}
.textbox {
   background-image: url(images/16t.gif);
   background-repeat: no-repeat;
   background-position:left;
   width:285px;
   font:normal 18px Arial;
   color: #999999;
   padding:3px 5px 3px 19px;
}
)
第三:当鼠标滑过或者聚焦时的动态颜色效果。(input:hover,input:focus{background-color:#0000FF;})
第四:提交按钮的阴影效果:(   
   padding:6px 14px;
   border:2px solid;
   border-color: #fff #d8d8d0 #d8d8d0 #fff;

第五:fieldset可以在padding:10px 5px;这种控制整体的效果。这个是很重要的哦!!!

微信网页中长按二维码图片能弹出收藏、保存、识别图中二维码的菜单

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>test</title>
<meta name=”viewport” content=”width=640,target-densitydpi=device-dpi,user-scalable=no” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”format-detection”content=”telephone=no, email=no” />
</head>
<body>
<div><img src=”img/qr.jpg” alt=”二维码图片” /></div>
<div style=”position:absolute; top:660px; left:225px; z-index:1000;”><img src=”img/qr.jpg” alt=”二维码图片” /></div>
</body>
</html>

SHOPEX挂件<{widgets id="sf"}>在可视编辑中不显示的原因

昨晚弄了好久,一直没解决.也没查到什么资料,之前听说是JS的原因,但试了,还是一样.今天早上总算弄明白了.自己研究果然很花时间的.原因如下:

第一,一定要引用<{header}>和<{footer}>标签;

第二.暂时先去掉HTML中引用的JS

有了以上二步,应该就可以了,新自试过的,有效.

第八天 下拉及多级弹出菜单

今天我们开始学习《十天学会web标准(div+css)》的下拉及多级弹出菜单,包含以下内容和知识点:

  • 带下拉子菜单的导航菜单
  • 绝对定位和浮动的区别和运用
  • css自适应宽度滑动门菜单

一、带下拉子菜单的导航菜单

下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点。之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改。

091722_2010-08-15_214741

先在html代码增加二级菜单的代码:

<div id=”menu”>
<ul>
<li><a id=”current” href=”#”>首页</a></li>
<li><a href=”#”>网页版式</a>
<ul>
<li><a href=”#”>自适应宽度</a></li>
<li><a href=”#”>固定宽度</a></li>
</ul>
</li>
<li><a href=”#”>web教程</a>
<ul>
<li><a href=”#”>新手入门</a></li>
<li><a href=”#”>视频教程</a></li>
<li><a href=”#”>常见问题</a></li>
</ul>
</li>
<li><a href=”#”>web实例</a></li>
<li><a href=”#”>常用代码</a></li>
</ul>
</div>

增加完代码后,在浏览器里预览一下:

091722_2010-08-15_214905

是不是一看头都大了,怎么变成这样了。别懵,我们分析一下错乱的原因。首先我们看下“自适应宽度”和“固定宽度”两个二级菜单也继承了一级菜单的背景和横向排列,所以我们先把二级菜单的背景和浮动清除掉,增加以下css代码:

#menu ul li ul li { float:none;}
#menu ul li ul li a { background:none;}

现在预览看下,二级菜单是不是已经归位了,但鼠标划过时还继承了一级菜单的样式,所以也改为最终效果上的黑色背景白色文字,还有下拉菜单的灰色边框和灰色背景也一并加上,修改并增加如下代码:

091722_2010-08-15_215511

#menu ul li ul { border:1px solid #ccc;}
#menu ul li ul li { float:none; width:85px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}

第一行设置二级菜单的灰色边框;为了美观,我们把下拉菜单的宽度设置成和一级菜单宽度相同,第二行的width:85px再加上第一行上设置的边框 左右各1px后正好是87px,和一级菜单宽度相同。margin:0是为了清除掉继承一级菜单中margin-left:2px;最后一行设置鼠标划过 时的样式。

再预览一下,是不是基本的样式已实现了。

091722_2010-08-15_220630

下一步就该把二级菜单隐藏,当鼠标划过时显示出来了。增加如下代码:

#menu ul li ul { display:none; border:1px solid #ccc;}
#menu ul li:hover ul { display:block;}

注意第二行的写法,#menu ul li:hover ul这个样比较难理解,它的意思是定义当鼠标划过#menu下ul下li时,li下的ul的样式(有点饶舌),这里设置为display:block,意 思是鼠标划过时显示这块内容。开始隐藏,鼠标划过时显示, 这就实现了我们想要的效果。目前IE6只支持a的伪类,其它标签的伪类不支持,所以要想在IE6下也显示正确,需要借助js来实现。我们定义一个 类.sfhover(自己命名,需和JS中相同)的属性为display:block;然后当鼠标划过后,用JS给当前li添加上这个样式上,根据css 的优先级:指定的高于继承的原则,就实现了IE6下的正确显示。所以增加如下代码:

#menu ul li.sfhover ul { display:block;}

认真跟着教程制作的朋友可能已经发现,现在应用的JS和纵向导航时应用的不样,但最终实现的效果是一样的。同理css在布局网站时,也是可以多种方 法的,正所谓条条大道通罗马,希望大家举一反三,加深前面教程的掌握。JS部分本例不做讲解,如果你想弄清楚JS是如何实现的,请学习js相关内容。到这 里,本例就基本完成了,还有一个问题是当前导航下有内容的话,如果二级菜单显示,将会把下边的内容挤跑,所以需要给#menu ul li ul增加position:absolute;属性,当其绝对定位后,它将脱离原来文档流,不再占据空间,因此也不会再把下边内容挤跑了(欲更多了解绝对 定位,请查看之前教程或http://www.aa25.cn/div_css/899.shtml)。完整的预览代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<script type=text/javascript><!–//–><![CDATA[//><!–
function menuFix() {
var sfEls = document.getElementById(“menu”).getElementsByTagName(“li”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? ” “: “”) + “sfhover”;
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? ” “: “”) + “sfhover”;
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? ” “: “”) + “sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(“( ?|^)sfhover\\b”),
“”);
}
}
}
window.onload=menuFix;
//–><!]]></script>
<style type=”text/css”>
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg2.gif) 0 0 no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
#menu ul li:hover ul { display:block;}
#menu ul li.sfhover ul { display:block;}
</style>
</head>
<body>
<div id=”menu”>
<ul>
<li><a id=”current” href=”#”>首页</a></li>
<li><a href=”#”>网页版式</a>
<ul>
<li><a href=”#”>自适应宽度</a></li>
<li><a href=”#”>固定宽度</a></li>
</ul>
</li>
<li><a href=”#”>web教程</a>
<ul>
<li><a href=”#”>新手入门</a></li>
<li><a href=”#”>视频教程</a></li>
<li><a href=”#”>常见问题</a></li>
</ul>
</li>
<li><a href=”#”>web实例</a></li>
<li><a href=”#”>常用代码</a></li>
</ul>
</div>
</body>
</html>
提示:可以先修改部分代码后再运行

二、绝对定位和浮动的区别和运用

学习到现在,定位和浮动也都涉及到了,但有些朋友可能还在迷惑,两者都可以分栏布局,到底什么时候用浮动,什么时候用定位呢?

当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时)。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关,所以它们可以覆盖页 面上的其他元素。

而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档 流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示,而没有脱离文档流,理解了这一点,就很容易弄明白什么 时候用定位,什么时候用浮动了。

一个元素浮动或绝对定位后,它将自动转换为块级元素,而不论该元素本身是什么类型。有关定位的视频教程请参看:http://www.aa25.cn/div_css/899.shtml

三、 css自适应宽度滑动门菜单

CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿上边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不 下了。那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单。下面我们讲一下自适应宽度按钮,和菜单原理是一样,因为自适应宽 度菜单在《新手常见问题》中已经讲过了,如果学会自适应按钮,你还不会制作自适应菜单的话,请阅读http://www.aa25.cn/div_css/898.shtml。

你是否还记得在第五章时学习的css按钮实例(如下图),当时只做了一个按钮,它这里是三个按钮,而且宽度不一样,今天我们还以这个按钮为基础,制作宽度自应适应的按钮。

091722_014304_2010-08-14_125920

那么它的实现原来是什么?我们看下边一张图。要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一个左侧对齐,一个右侧对齐,如下的原理图,

091722_2010-08-16_203002

四条辅助线内为一个按钮元素,绿色部分为span,然后定义它的背景图片靠右侧对齐,而左侧的部分为a的背景图片,定义靠左侧对齐。当文字多时,会 把span撑开,这实现了自适应宽度的按钮了。这里需要一张如下的图片,它的宽度要宽于你所应用的最宽宽度,这样才能显示正常,同时根据以前学习的css Sprites技术,把背景图片和鼠标经过图片放到一张图片上。

091722_btn_bg

拿第五章css按钮的例子代码进行修改,先改为背景图片使用上图,再增加两个字数不等按钮,并在文字上增加span标签

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }
a:hover { background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;}
</style>
</head>
<body>
<p><a href=”#”><span>免费注册</span></a><a href=”#”><span>登录</span></a><a href=”#”><span>在淘宝网上开店</span></a></p>
</body>
</html>
提示:可以先修改部分代码后再运行

预览显示效果如下所示,因背景图片比较长,所以右侧显示不太友好,下一步就需要把a的宽度给去掉,设置span的背景,使右侧显示正常,另外把三个按钮横向排列

091722_2010-08-16_204650

在a上增加如下代码:

float:left; margin:5px;

横向排列,并增加5px的外边距,现在看下效果吧。为了美观,下一步需要a的左侧增加填充,使文字不死贴左侧,同理span右侧需要增加一个同样的填充。

a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }
a span { display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px;}
a:hover { background: url(btn_bg.gif) no-repeat 0px -37px;}
a:hover span{ background: url(btn_bg.gif) no-repeat right -37px;}

对比以上代码,可能你已经发现,原来a顶部的3px给去掉了,把高度改为37px了,行高也改为37px了,为什么这么做,大家动手试下就明白了。 然后设置a下span的背景图片,span默认是内联元素,所以需先转换为块级元素;另外需增加鼠标经过时span的样式。显示效果如下,对比一下实例 图,是不是实现了这样的效果。

091722_2010-08-16_210224

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }
a span { display:block; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat right 0px; padding-right:20px;}
a:hover { background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;}
a:hover span{ background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat right -37px;}
</style>
</head>
<body>
<p><a href=”#”><span>免费注册</span></a><a href=”#”><span>登录</span></a><a href=”#”><span>在淘宝网上开店</span></a></p>
</body>
</html>

网站建设DIV+CSS教程_IE和Firefox的区别

网站建设DIV+CSS教程_IE和Firefox的区别:

浏览器Firefox与IE在CSS样式表中的差异
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致 页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。 内容来自织梦模板团
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3  盒模型不同解释.
#box{
width:600px;
//for   ie6.0-   w/idth:500px;
//for  ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for  ff+ie6.0
width /**/:500px;
//for   ie6.0-
}
4 浮动ie产生的双倍距离
#box{   float:left;   width:100px;   margin:0 0 0 100px;  //这种情况之下IE会产生200px的距离   display:inline;   //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{   display:block; //可以为内嵌元素模拟为块元素   display:inline; //实现同一行排列的的效果   diplay:table;
5 IE与宽度和高度的问题
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里 这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重 要的。要解决这个问题,可以这样:
#box{    width: 80px;    height: 35px;}html>body #box{    width: auto;    height: auto;    min-width: 80px;    min-height: 35px;} DEDE模板
6 页面的最小宽度
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个 放到 <body> 标签下,然后为div指定一个类:
然后CSS这样设计:
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{
display:table;
//将对象作为块元素级的表格显示
}
或者
.hackbox{
clear:both;
}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的
……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{

float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码 DEDE模板

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用
margin 或paddign 时。例:

<p>p对象中的内容</p>

CSS:
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
IE vs FF
CSS 兼容要点:
DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 DEDECMS模板

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 织梦模板

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格

XHTML+CSS兼容性解决方案小集
使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:

div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

div{width:300px!important;width   /**/:340px;margin:0   10px   0   10px},关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:) 本文来自织梦模板团

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 内容来自织梦模板团

ul{margin:0;padding:0;}就能解决大部分问题

4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为

<script   type=”text/javascript”>就可以了

1、IE6.0的div的内嵌div可以把父级的高度撑大,而FireFox不可以,要自己设置高度。 织梦模板

2、当设置为三列布局时,IE6.0的float宽度不能达到100%,而FireFox可以。当设置为两列布局时,两种浏览器都可以。 DEDECMS模板

3、在FireFox中,非float的div前面有同一父级的float的div,此div若有背景图,要使用clear:both,才能显示背景图,而IE6.0中不用使用clear:both。

4、在[text-decoration:underline]的属性下,IE6.0显示的下划线会比FireFox低一点。在FireFox中,部分笔画会在下划线的下面1个象素左右。

使用DIV+CSS布局的时候如何正确的使用 id 和 class等参数

今天有点闲,想向大家请教一下id和class的使用。

按照字面的意思,id是指一个元素在整个文档中的“唯一标志”,而class则是它所属的“类别”。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。

但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单:

那些只会在页面中出现一次的元素应该用id来表示。比如页头(header) 页尾(footer),导航菜单(main-menu)等。但是真的这么简单么?

我先举几个例子来说明我所遇到的尴尬:

大多数的页面都是两栏布局的:一个主栏(main column),一个侧栏(side column)。就像这样:

1187188947

OK,我们会用两个div来表示它们。问题来了,应该使用id还是class?按照常规的理解,一个页面只会有一个主栏,一个侧栏咯,所以当然应该用id。文档写成这:

<div id=”main-col”></div><div id=”side-col”></div> #main-col { float: left; width: 700px;}#side-col { float: right; width: 200px; }

也是很赏心悦目的,不是么?所以我决定用id。

于是页面做好了,网站做好了,上线了,运营了,访问量大了。这时候公司决定,嗯,我们应该在一些页面中加几个通栏广告。“通栏”哦!这就意味着它必须横跨主栏和侧栏,把它们俩拦腰截断。于是我们重新“发明”一个样式:banner,让banner来一个clear:both; 然后放到页面中间去阻止掉两个栏的浮动。然后再在banner的后面继续分两栏。下面是示意图:

1187188948

所以HTML应该是这样:

<div id=”main-col”></div><div id=”side-col”></div> <divmain-col”></div> <div id=”side-col”></div>

问题轻松解决(多亏偶经验丰富啊,表扬一下自己,咔咔。)。唯独只有一个问题:main-col和side-col这两个id重复了。这个问题其实也不麻烦,把它们全部改成class不就好啦(甚至,不去改它,我就不信浏览器会给我报错,哼)。

但是,我这不是自己给了自己一个嘴巴么?当初还信誓旦旦的说,main-col只会出现一次,所以用id……。所以教训就是,main-col和side-col,或是left-col, right-col ,extra-col, xxx-col,这些用来分栏布局的样式,都给我用class。嗯,记在本本上。 设计页面的时候,在页头和主菜单之间放了一个搜索框(search-box)。既然我们的页头(header),导航栏(main-menu),登录框(login-box)都用的是id,和它们在一起的search-box也应该用id咯?呃,小心啊,老板很可能会让你在页尾也放一个搜索框的,你用id你就死定了。所以search-box应该用class。不过这样怪怪的,凭什么login-box用id,而search-box却用class呢? 慢着,你以为导航栏就可以保证唯一了么?我来讲一个例子:

1187188949

喏,老板要来一点不同的,让把导航栏放在左侧。这个没问题,用一个ul就搞定拉。我把它的id设置成main-menu但是过了一会儿,他说,嗯,为了可用性(咳咳。。),我们需要把菜单分成两部分。就像:

1187188950

呃。。好说,分成两个ul就好了。但是,它们的id都叫main-menu么??哎,老问题又来了。

例子举了这么多,你可看得出,仅仅因为“只出现一次的元素”这个理由,就决定给它用id而不是class,这是绝对行不通的。因为你几乎很难判断某个元素是不是一定只出现一次。但是,这样的分析会得出一个可怕的结论:所有的样式都应该用class。

 

对此,我其实并不怀疑。事实上,以我的看法,95%以上的样式,都应该通过class而不是id来设置。或者说,除非是一些很细微很特殊的位置,可以使用id来设置样式,其他的样式都应该用class来设置。这个结论似乎和WaSP的圣经书《网页重构》里讲的矛盾,因为他老人家是专门批评了所谓的classitis(class麻疹,见该书148页)。但是很抱歉,铁证如山的事实底下,我不得不否定他那句“热爱id”(见该书150页)。

当然,我很希望我是错的,毕竟背叛经典是一件很让人不舒服的事情。所以欢迎大家来讨论,指出我的错误。更重要的是,对于我举出的哪些尴尬的例子给出一个更好的解决方案。

总结:尽量用class而不是id来控制样式的理由:

可维护性。你不能保证你用id的元素只在页面中出现一次,即使在网页设计初稿中确实是只有一次。 id可能被Ajax程序员使用。如果页面要用ajax的话,某些元素的id值应该由Ajax程序员而不是页面设计师来决定,至少应该是双方共同商定。那么,你怎么能放心你的id值既用来设置CSS样式,又用来供JS调用呢? 同一个元素可以定义多个class,却只能有一个id。你明白我的意思了吧? id的优先级高于class。所以如果对于某个特定的元素,我们想赋予特定的样式,可以给它加id。但是反过来,如果我们一开始就是用id,你去加class是没有效果的啦。

最后,关于Zeldman老先生讲的classitis。我的理解是不要为了某个特定的样式置顶一个特定的class。尽量创造一些能够重复使用的class。而id由于不能重复,反而才容易造成iditis呢。到时候我们的网站会出现search-box-top, search-box-bottom,甚至search-box-under-the-header-but-above-the-main-menu,哈哈。更可怕的是,它们的属性定义其实都一模一样。

DIV+CSS自学日记2

自己正在自学,看着视频倒是简单,写的很快,自己写起来,就一点一点的调试,然后改错。

今天发现一个问题,就是写的一个导航菜单根本不会左对齐,总是会有点距离。

如下图所示

网站首页前面总是有一段空白了。从中午发现这问题,然后测试了很多次,还是这样。于是加QQ群去问,后来在一位热心的QQ群友 ①埘の羙恏 的指点下,成功解决了这个问题。他说:

 你不管在写哪个页面之前
都要全局定义个Padding:0;margin:0
这样所有的页面都不会出现这个情况了
所以写CSS的时候,首先写一个* {Padding:0;margin:0;}  这个问题就可以解决了,如下图。

这个代码在很多CSS中可以看到,而且里面定义了很多其它的。所以学习别人的经验很重要,多看代码,理解了,才能很好,很有效的学会。

这就是我遇到的问题,我现在边学边慢慢尝试小站,其中遇到的问题,都会记载下来和大家分享。

自学DIV+CSS笔记

没有图片,只是用想做个导航菜单的效果。发现导航菜单每个链接的块都没有达到要求。应该是行高的问题。直接加在Li标签那里设置 line-height:30px; 这里要用line-height,而不能用height,用height,文字会顶部对齐。   还有一个问题就是,转换为块的时候,将A标签转行就可以了。display:block;

写DIV+CSS的时候,为了方便网页整体居中对齐,所以需要在最外屋加一个DIV标签,然后这样就方便设置。

li的样式,去除前面的圆点,就要在ul使用  list-style:none    li标签横排,就要使用左浮动 float:left

代码发下。

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>首页</title>
<link href=”CSS.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”com”>
<div id=”top”>
<div id=”logo”>logo
</div>
<div id=”banner”>banner
</div>
<div id=”topmenu”>
<ul>
<li><a href=”#”>首页</a></li>
<li><a href=”#”>时光爱客</a></li>
<li><a href=”#”>批发专属平台</a></li>
<li><a href=”#”>商品橱窗</a></li>
<li><a href=”#”>批发商权益说明</a></li>
<li><a href=”#”>售后服务</a></li>
<li><a href=”#”>认证查询</a></li>
<li><a href=”#”>联系邮件</a></li>
</ul>
</div>
</div>
<div id=”swf”>
swf
</div>
<div id=”main”>
<div id=”left”>left
</div>
<div id=”right”>right
</div>
</div>
<div id=”bottom”>尾</div>
</div>

</body>
</html>

CSS+JS实现兼容性很好的无限级下拉菜单

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>CSS+JS实现兼容性很好的无限级下拉菜单</title>
<style type=”text/css”>
*{ margin:0; padding:0; border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
.clearfix:after{content:” “;display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }
.menu{ width:778px; height:26px; background:#fff; margin:0 auto;}
.menusel{ float:left;width:100px; position:relative; height:25px; background:#ddd; line-height: 25px; margin-left: 1px; *margin-left: 0px;_margin-left: -1px;}
.menusel h2{ font-size:12px; }
.menusel a{ display: block;text-align:center; width:100px;border:1px solid #a4a4a4; height:25px; border-bottom:1px solid #a4a4a4; position:relative; z-index:2;}
.menusel a:hover{ border:1px solid #a4a4a4; border-bottom:1px dashed #eeeeee; position:relative; z-index:2; height:25px;}
.ahover a{border-bottom:1px dashed #eeeeee; background:#eeeeee; }
.position{ position:absolute; z-index:1;}
.menusel ul{width:125px; background:#eee; border:1px solid #a4a4a4; margin-top: -1px; position:relative; z-index:1; display:none;}
.menusel .block{ display:block;}
.typeul li{border-bottom:1px dashed #a4a4a4;width:125px; position:relative; float:left; }
.typeul li a{ border:none;width:125px; }
.typeul li a:hover{ border:none; background:#ddd;}
.typeul{ margin-left:0; }
.typeul ul{left:125px; top:0; position:absolute;}
.fli{ margin-left: -1px; border-left:#eeeeee solid 1px;}
.menusel .lli{ border:none; }
</style>
<script type=”text/javascript”>document.execCommand(“BackgroundImageCache”, false, true);</script><!– IE6背景图片闪烁问题 –>
</head>
<body>
<div class=”menu”>
<div id=”menu1″ class=”menusel”>
<h2><a href=”/”>菜单1</a></h2>
<div class=”position”>
<ul class=”clearfix typeul”>
<li><a href=”http://www.33567.cn”>菜单选项1-2</a></li>
<li>
<a href=”#”>菜单选项1-2</a>
<ul>
<li class=”fli”><a href=”#”>菜单选项1-2-1</a></li>
<li class=”lli”><a href=”#”>菜单选项1-2-2</a></li>
</ul>
</li>
<li><a href=”http://www.7caidy.com”>菜单选项1-2</a></li>
<li class=”lli”><a href=”#”>菜单选项1-2</a></li>
</ul>
</div><!– position –>
</div><!– menusel –>
<div id=”menu2″ class=”menusel”>
<h2><a href=”#”>菜单2</a></h2>
<div class=”position”>
<ul class=”clearfix typeul”>
<li><a href=”#”>菜单选项2-2</a></li>
<li><a href=”#”>菜单选项2-2</a>
<ul>
<li class=”fli”><a href=”#”>菜单选项2-2-1</a></li>
<li class=”lli”><a href=”#”>菜单选项2-2-2</a>
<ul>
<li class=”fli”><a href=”#”>菜单选项2-2-1</a></li>
<li class=”lli”><a href=”#”>菜单选项2-2-2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href=”#”>菜单选项2-2</a></li>
<li class=”lli”><a href=”#”>菜单选项2-2</a></li>
</ul>
</div><!– position –>
</div><!– menusel –>
<div id=”menu3″ class=”menusel”>
<h2><a href=”#”>菜单3</a></h2>
<div class=”position”>
<ul class=”clearfix typeul”>
<li><a href=”#”>菜单选项3-2</a></li>
<li><a href=”#”>菜单选项3-2</a>
<ul>
<li class=”fli”><a href=”#”>菜单选项3-2-1</a></li>
<li class=”lli”><a href=”#”>菜单选项3-2-2</a>
<ul>
<li class=”fli”><a href=”#”>菜单选项3-2-1</a></li>
<li class=”lli”><a href=”#”>菜单选项3-2-2</a>
<ul>
<li class=”fli”><a href=”#”>菜单选项3-2-1</a></li>
<li class=”lli”><a href=”#”>菜单选项3-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href=”#”>菜单选项3-2</a></li>
<li class=”lli”><a href=”#”>菜单选项3-2</a></li>
</ul>
</div><!– position –>
</div><!– menusel –>
</div><!– menu –>
<script type=”text/javascript”>
for(var x = 1; x < 4; x++)
{
var menuid = document.getElementById(“menu”+x);
menuid.num = x;
type();
}
function type()
{
var menuh2 = menuid.getElementsByTagName(“h2”);
var menuul = menuid.getElementsByTagName(“ul”);
var menuli = menuul[0].getElementsByTagName(“li”);
menuh2[0].onmouseover = show;
menuh2[0].onmouseout = unshow;
menuul[0].onmouseover = show;
menuul[0].onmouseout = unshow;
function show()
{
menuul[0].className = “clearfix typeul block”
}
function unshow()
{
menuul[0].className = “typeul”
}
for(var i = 0; i < menuli.length; i++)
{
menuli[i].num = i;
var liul = menuli[i].getElementsByTagName(“ul”)[0];
if(liul)
{
typeshow()
}
}
function typeshow()
{
menuli[i].onmouseover = showul;
menuli[i].onmouseout = unshowul;
}
function showul()
{
menuli[this.num].getElementsByTagName(“ul”)[0].className = “block”;
}
function unshowul()
{
menuli[this.num].getElementsByTagName(“ul”)[0].className = “”;
}
}
</script>
</body>
</html>

CSS中怎么让DIV居中

CSS 如何使DIV层水平居中
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
可是事实上这样的方法科学吗?
经过网络搜索和亲自实验得出以下结论:
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的DIV层添加以下属性:

margin-left: auto;
margin-right: auto;

经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!
郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.
问题到底出在哪里呢?
感谢网友乐天无用帮忙找出了这个邪门问题的原因.
原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.
问题并不在CSS而在XHTML网页本身.
需要加上这样的代码才能使得上述设置有效果:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 

如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档.
以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版.

 

如何使DIV居中

 

主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只
要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

如何使图片在DIV 中垂直居中,用背景的方法。举例:
body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}

 

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者”bottom right”等,也可以直接写数值”50 30″

如何使文本在DIV中垂直居中
如果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下:
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body >
<div id=”center”><p>test content</p></div>
</body>
</html>

 

说明:
vertical-align:middle;表示行内垂直居中,我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了。

CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中

 

<style type=”text/css” media=screen>
body
{
text-align: center;
}
#a
{
width: 200px;
height: 400px;
background: #000;
}
#b
{
margin-top: expression((a.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #FFF;
}
#c
{
position: absolute;
left: expression((body.clientWidth-50)/2);
top: expression((body.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #F00;
}
</style>
<div id=”a”>
<div id=”b”></div>
</div>
<div id=”c”></div>
另一方法:
<div style=”background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50″></div>

3.ff下为什么父容器的高度不能自适应

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh” lang=”zh”>
<head profile=”http://www.w3.org/2000/08/w3c-synd/#”>
<meta http-equiv=”content-language” content=”zh-cn” />
<meta http-equiv=”content-type” content=”text/html;charset=gb2312″ />
<title>blueidea</title>
<style type=”text/css”>
/*<![CDATA[*/
div {
width:200px;
border:1px solid red
}
p {
float:left;
width:100px;
}
/*]]>*/
</style>
</head>
<body>
<div><p>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全</p></div>
</body>
</html>

为什么这个P撑不开DIV呢?解决的办法是在div 与 p 之间插入<div style=”clear:both”></div>清除掉这个p的浮动.
什么?你在IE下也碰到过类似问题!

2.firefox下如何使连续长字段自动换行

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh” lang=”zh”>
<head profile=”http://www.w3.org/2000/08/w3c-synd/#”>
<meta http-equiv=”content-language” content=”zh-cn” />
<meta http-equiv=”content-type” content=”text/html;charset=gb2312″ />
<title>blueidea</title>
<style type=”text/css”>
/*<![CDATA[*/
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
/*]]>*/
</style>
</head>
<body>
<div id=”ff”>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script type=”text/javascript”>
// <![CDATA[
function toBreakWord(intLen){
var obj=document.getElementById(“ff”);
var strContent=obj.innerHTML;
var strTemp=””;
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+”
“;
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=”
“+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord(37)
// ]]>
</script>
</body>
</html>

众所周知IE中直接使用    word-wrap:break-word 就可以了, 这里FF中我们使用JS插入的方法来解决

1.超链接访问过后hover样式就不出现的问题

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh” lang=”zh”>
<head profile=”http://www.w3.org/2000/08/w3c-synd/#”>
<meta http-equiv=”content-language” content=”zh-cn” />
<meta http-equiv=”content-type” content=”text/html;charset=gb2312″ />
<title>blueidea</title>
<style type=”text/css”>
/*<![CDATA[*/
a:link {
color:red
}
a:hover {
color:blue
}
a:visited {
color:green
}
a:active {
color:orange
}
/*]]>*/
</style>
</head>
<body>
<a href=”#”>
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
</a>
</body>
</html>

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A