需要了解的DIVCSS面试题目

CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。今天52CSS.com收集了常见的8条面试题目,希望对您有所帮助。
一、超链接点击过后hover样式就不出现的问题?

  被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A

二、IE6的margin双倍边距bug问题

  例如:

<style type=”text/css”> 
    body {margin:0;} 
    div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;} 
</style> 
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
 
三、为什么中火狐浏览器下文本无法撑开容器的高度?

  标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

div { height:auto!important; height:200px; min-height:200px; } 
四、为什么web标准中无法设置IE浏览器滚动条颜色了?

  原来样式设置:

<style type=”text/css”>  
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }   
</style>
解决办法是将body换成html
 
五、如何定义1px左右高度的容器?
  
  IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
 
六、怎么样才能让层显示在FLASH之上呢?
  
  解决的办法是给FLASH设置透明:
<a href=”http://www.csschina.net/”>:</a> 
<pre lang=”html” line=”1″> 
<param name=”wmode” value=”transparent” /> 
七、怎样使一个div层居中于浏览器中? 
<style type=”text/css”> 
<!–   
div {   
position:absolute;   
top:50%;   
left:50%;   
margin:-100px 0 0 -100px;   
width:200px;   
height:200px;   
border:1px solid red;   
}   
–>  
</style> 
这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

八、firefox浏览器中嵌套div标签的居中问题的解决方法

  假定有如下情况:

<div id=”a”>  
       <div id=”b”> </div>  
</div>
如果要实现b在a中居中放置,一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常;但是在Firefox中b却会是居左的。
  解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为:margin: 0 auto;。

转自:我爱CSS(http://www.52css.com)

网站上线必做的SEO优化

1、创建站点地图

  有两种类型的站点地图:传统站点地图和搜索引擎站点地图。两者都很容易加入到Web站点中。传统站点地图可以作为其他HTML网页创建,而搜索引擎站点地图根据搜索引擎的规范而格式化。创建它们一般会使得内容被索引的比率和深度增加,否则未引用的内容将不被索引。前者是重要的,因为它不但可以使得索引更快,而且可以减少内容盗窃。一个良好组织的传统站点地图对访问者也是很有用的。

2、修复重复的标题和Meta标签

  在Web站点中的很多页面上使用相同的标题或Meta标签,对排名有害。实际上,这可能是因为搜索引擎不希望这种冗余的结果出现在它的SERP中显示,如果那样读者的兴趣就会降低。另外,千篇一律的标题通常也让读者没有兴趣去单击。通常需要对编程人员的这个疏忽进行修补。

3、请求并交换相关链接

  发送一个友好的电子邮件给邻居索要链接,可能会获得一个高质量的链接。适当地交换相关Web站点的链接,有利于搜索引擎的排名。“适当地”很难定义。但是,一个比较好的尺度是这个链接是否出现在你所希望它出现的位置。如果不是,或者它只在某个目录页面底部,混在一堆其他链接当中,那还是别去了!

4、创建链接诱饵

  虽然链接诱饵很难确定单击或丢失的结果,但是它不失为一种构建链接的经济途径。它可能根据有用信息和兴趣而不同,以复杂的站点工具或浏览器工具栏出现。

转自:标准之路(http://www.aa25.cn)

雅虎面试题-你真的了解HTML吗?

有这么一段HTML,请挑毛病:

<P>&nbsp;&nbsp;哥写的不是HTML,是寂寞。<br><br>&nbsp;&nbsp;我说:<br>不要迷恋哥,哥只是一个传说

这是原来雅虎一道笔试题(文字变了变),用了很多年了,还没有一个人完全答对过。
============== 解答部分 ==============

出这道题的动机是,太多人觉得HTML太简单,但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理,直接影响到代码易不易维护,灵不灵活,同时事关网页性能,协作效率。碰到不少人认为前端开发就是javascript开发,大错特错啊。javascript, html, css这三个前端开发的基础支柱,性质完全不同又紧密关联,对它们的正确理解,合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS,但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握,不像学一般的编程语言那样,而是建立在丰富实践经验和体会的基础上,是前端的工程师的基本功。

这不是一道较真题或是装逼题,正经一道“画鸡蛋”的题,考的是基本功。代码如其人,对一行代码的理解足以反映出他的前端开发素养。

言归正传。这道题的考点:

考点1:html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的,在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的,p,br需要闭合, 标签不允许大写,P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签,是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点,答对,你能拿到60分。

考点2:考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

考点3:合理使用标签
br是强制折行标签,p是段落。原题用连续的br制造两个段落的效果,效果是达到了,但显然用的不合理,段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对,你就能拿到100分。

对原题改进的结果:
html 4.01:

<p>哥写的不是HTML,是寂寞。<p>我说:<br> 不要迷恋哥,哥只是一个传说

xhtml 1.0:

<p>哥写的不是HTML,是寂寞。</p><p>我说:<br /> 不要迷恋哥,哥只是一个传说</p>

加分:合理的用语义化标签
在前面的基础上合理的用语义化标签,对内容进行必要的标记,是加分的。但过度的使用标签,就画蛇添足了。如“我说”的话,可以用q标签标注。

<p>哥写的不是HTML,是寂寞。
<p>我说:<br> <q>不要迷恋哥,哥只是一个传说</q>

我觉得这就够了,如果再进一步,“我”用cite标注,“HTML” 用abbr或acronym标注(至于再讨论abbr和acronym的区别就太较真了),也OK。再复杂就没必要了。

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>,是寂寞。
<p><cite> 我</cite>说:<br> <q>不要迷恋哥,哥只是一个传说</q>

转自:标准之路(http://www.aa25.cn)

全面兼容IE6/IE7/IE8/FF的CSS HACK

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie7的方法又不能用了,怎么办呢?

第一种方法:

<meta http-equiv=”x-ua-compatible” content=”ie=7″ />

把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了,所以,基本上可以无视ie8,剩下的代码只需要这样写就可以了。

background:#ffc; /*  对firefox有效*/
*background:#ccc; /* 对ie7有效 */
_background:#000; /* 只对ie6有效 */

解释一下吧:

firefox能解析第一段,后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了,所以只认background:#ffc,看到的是黄色;

ie7前两短都能认,以最后的为准,所以最后解析是background:#ccc,看到的是灰色;

ie6三段都能认,而且“_”这个只有ie6能认,所以最后解析是_background:#000,看到的是黑色

阿门!已经是最简单和最好理解的写法了,如果你是google进来的,我可以很负责任的告诉你,这种方法是ok的,我测试过。

ie8的那段兼容7的代码我也测试过了,在我现在的windos 7 测试版所带的ie8是没问题的,以后ie8正式版出来还管不管用就不知道了。

ps:如果你发现按我这样写还是有问题的话,请查看一下你的html头,看看<head>之前的内容是不是这样的标准写法

<!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“>

这个是现在比较规范的写法,如果你是用dreamweaver做页面的话,默认也是这种规范的,切记,非这种规范写法的,兼容性不能保证

第二种方法:

要求苛刻的朋友是不愿意在页面头部增加<meta http-equiv=”x-ua-compatible” content=”ie=7″ />这样一句代码的,因为这样的结果是每个页面都得加。那么要想兼容这几个浏览器还真得想别的办法了。早些天本站发布了一篇《完美兼容ie6,ie7,ie8以及firefox的css透明滤镜》,可能当时测试的疏忽,IE8的兼容性没有解决好,好多朋友回复说用不了。今天抽出些时间,查阅大量资料,终于解决了这个问题了。

以下是兼容IE6/IE7/IE8/FF的写法,注意下面的顺序不可颠倒

margin-bottom:40px;       /*ff的属性*/
margin-bottom:140px\9;    /* IE6/7/8的属性 */
color:red\0;              /* IE8支持 */
*margin-bottom:450px;     /*IE6/7的属性*/