1.什么是网站重构?div+css的布局较table布局有什么优点?
2.如何理解css盒模型?
3.平时做网页经常使用哪些hack?
4.如何理解表现与内容相分离?
5.如何解决ie6的双边距问题?
6.如何定义高度为1px的容器?{heigh:1px;
width:10px; background:#000; overflow:hidden}ie6下这个问题是默认行高造成的,overflow:hidden |
zoom:0.08 |
line-height:1px这样也可以解决
7.如何实现一个层在浏览器中垂直左右居中?margin:auto
8.如何解决ie6的3像素问题?_zoom:1;
margin-left: value; _margin-left:value-3px;
9.为什么FF下文本无法撑开容器的高度?如何解决?
清楚浮动
10.怎么样才能让层显示在FLASH之上呢? 解决的办法是给FLASH设置透明属性<paramname="wmode"
value="transparent" />或者<paramname="wmode" value="opaque" />
1、答:把"未采用CSS,大量使用HTML进行定位、布局,或者虽然已经采用CSS,但是未遵循HTML结构化标准的站点"变成"让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现,使页面的实际内容与它们呈现的格式相分离的站点。"的过程就是网站重构
网站为什么要进行重构(网站重构的好处)
a、使页面加载得更快速;
b、降低带宽带来的费用:节约成本;
c、让你在修改设计时更有效率而代价更低;
d、帮助你的整个站点保持视觉的一致性;
e、更利于搜索引擎的检索(符合SEO的规范);
f、令站点更容易被各种浏览器和用户访问(包括手机、PDA和残障人士使用的文字浏览器);
g、兼容不容忽视的Mozilla系浏览器(Firefox份额);
div+css的布局较table布局有什么优点:
1、改版的时候更方便 只要改css文件。2、页面加载速度更快、结构化清晰、页面显示简洁。3、表现与结构相分离。4、易于优化(seo)搜索引擎更友好,排名更容易靠前。
答:2.如何理解css盒模型 : 每个HTML元素都是长方形盒子 外边局(margin)、内边距(padding)、边框(border);
答:3.平时做网页用的css hack
Ie6* _; ie7 *, *+,!important; ff !important.
答:4.表现与结构相分离简单的说就是HTML中只有标签元素 表现完全是由CSS文件控制的
答:5.解决ie6双边距问题块级元素就加display:inline;行内元素转块级元素display:inline后面再加display:table
6.如何定义高度为1px的容器?
{heigh:1px; width:10px;background:#000;overflow:hidden}ie6下这个问题是默认行高造成的,overflow:hidden | zoom:0.08 | line-height:1px这样也可以解决
7.如何实现一个层在 浏览器中垂直左右居中?
margin:auto
8.如何解决ie6的3像素 问题?
_zoom:1; margin-left: value;_margin-left: value-3px;
9.为什么FF下文本无法撑开容器的高度?如何解决?
清除浮动 .clear{ clear:both;height:0px; overflow:hidden;}
10.怎么样才能让层显示在FLASH之上呢?
解决的办法是给FLASH设置透明属性
<param name="wmode"value="transparent" />或者<param name="wmode" value="opaque"/>
补充:
1、margin-left:10px在FF和IE6下显示问题。IE6显示20px,FF显示10px。
用!important就可以解决了。margin-left:10px!important;margin-left:5px;
2、cursor:hand在FF不显示小手,如何解决?
一句话:cursor;pointer;
3、要求在FF显示height为20px;IE6下显示height为25px;IE7下显示height为30px.
#test{height:20px;} *html#test{height:25px;} *+html #test{height:30px;}
这个以前我们说过,请参考【IE6的疯狂Bug之九】解决CSS兼容性最常用的"Haker" 三个就写上,FF只认识第一个#test,IE6只认识第二个*html #test,IE7只认识第三个*+html#test PS:DTD必须加上<!DOCTYPEHTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“>要不还是不认。
4、在IE中内容会自适应高度,而FF不会自适应高度。
在要自适应高度的层中加一个层,样式为
.clear{clear:both;font-size:0px;height:1px},
这样解决有一个小小的问题,高度会多一个像素。还有一种解决方法,给当前层加上一个伪类 #test:after {content: ".";
display:block; height: 0;clear: both; visibility: hidden;}
1.超链接访问过后hover样式就不出现的问题?
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A
2.IE6的双倍边距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
3.为什么FF下文本无法撑开容器的高度?
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
div { height:auto!important; height:200px; min-height:200px;}
4.为什么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
5.为什么无法定义1px左右高度的容器?
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 |line-height:1px
6.怎么样才能让层显示在FLASH之上呢?
解决的办法是给FLASH设置透明:
<param name="wmode" value="transparent"/>
7.怎样使一个层垂直居中于浏览器中?
<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>
这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
8、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;。
前端工程师面试题
[HTML && CSS]
1.Doctype?
严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
2:行内元素有哪些?块级元素有哪些?CSS的盒模型?
3.CSS引入的方式有哪些?
link和@import的区别是?
4.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
5:前端页面有哪三层构成,分别是什么?作用是什么?
6:css的基本语句构成是?
8:你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
9.如何居中一个浮动元素?
10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况!
11.你怎么来实现下面这个设计图,主要讲述思路
(效果图省略)
13:如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?
14:你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
[Javascript]
1:js是什么,js和html
的开发如何结合?
2.怎样添加、移除、移动、复制、创建和查找节点
3.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
4.面向对象编程:b怎么继承a
5.看看下面alert的结果是什么
view
sourceprint?1.function b(x, y, a) {
.arguments[2] =
10;
.alert(a);
}
b(1, 2, 3);
如果函数体改成下面,结果又会是什么?
a =
10;
alert(arguments[2] );
6.请编写一个JavaScript函数
parseQueryString,它的用途是把URL参数解析为一个对象
var obj =
parseQueryString(url);
alert(obj.key0) //
输出0
7.ajax是什么? ajax的交互模型? 同步和异步的区别?
如何解决跨域问题?
8.什么是闭包?下面这个ul,如何点击每一列的时候alert其index?
<ul
id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
9.最近看的一篇Javascript的文章是?
10.常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
11.说说YSlow(可以详细一点)