网页设计面试题目.docx
- 文档编号:4127213
- 上传时间:2022-11-28
- 格式:DOCX
- 页数:16
- 大小:35.31KB
网页设计面试题目.docx
《网页设计面试题目.docx》由会员分享,可在线阅读,更多相关《网页设计面试题目.docx(16页珍藏版)》请在冰豆网上搜索。
网页设计面试题目
一.HTML常用的标签
1、文本标签
加粗
打印机字体标签
原样输出强调输出斜体显示
加粗
字体标签color:
控制字体的颜色size:
控制字体的大小
斜体显示
下划线
上标
下标
2、段落标签(自动换行)
属性:
align=left|center|right
3、换行标签
属性:
color='';width=npx;size=npx(不是height);
4、列表标签
a)普通列表
- 列表标题
- 列表项
b)无序列表//ultype=circlediscsquare
- 列表项
- 列表项
- 列表项
c)有序列表type=aAIi1circlediscsquare
- 列表项
- 列表项
- 列表项
5、图片和链接标签
图片:
width=''height=''border='设置图片的边框'/> 链接: target: 链接打开的位置_blanck_self_parent_top 6、地图标签 地图标签是基于图片的 7、行内修饰符标签 8、实体字符 在html中具有特殊含义的字符,例如常见的空格,<>& 数字;或者&实体字符名称的; 例如: 空格 " # '"<>&空格 9、html注释 --注释的html内容--> 10、绝对路径与相对路径 绝对路径: 文件的物理路径(即资源管理器上的路径) 相对路径: 相对于本页面的路径 /代表根目录 ./代表当前目录 ../代表父级目录 ./../../代表当前目录的父目录的父目录 11、布局标签 1、table 2、iframe 3、frameset、noframeset 4、div(专门学习) 表格标签显示的内容
属性:
border边框
bgcolor表格的背景颜色
bordercolor边框的颜色
cellspacing单元格之间的距离
cellpaddig单元格内容与边框之间的距离
width表格的宽度
height表格的高度
valign垂直位置top|bottom|middle
align水平位置right|left|center
colspan和并列
rowspan合并行
frameset标签
您的浏览器不支持框架,请更新您的浏览器
iframe标签
12、居中标签
13、表单标签
enctype:
3中形式
a)multipart/form-data文件上传必须的
b)text/plain纯文本形式上传
c)application/x-www-form-urlencoded经过url编码后上传
method:
2中方法
get:
我所有数据通过地址栏
post:
表单数据通过协议传递
1、
type:
password:
密码框
file:
文件上传
submit:
确定按钮
button:
按钮
reset:
重置按钮
radio:
当选按钮
checkbox:
复选按钮
image:
图片按钮(同时传递XY轴坐标)
hidden:
隐藏域,通常用于传递默认值
2、下拉列表
(位于select标签中间)
(位于select标签中间)
属性:
size下拉框的大小
multiple:
是否可以多选
option的属性:
selected(下拉列表的默认值)
value:
下拉表的实际值\
3、文本标签
4、
属性:
cols代表列
rows:
代表行
5、fieldset标签(写在form标签的外部)
二。
DOCTYPE>标签的定义与用法
DOCTYPEhtml>
作用就是加了这行网页按xhtml解析,不加则是按html解析。
三。
块级元素和行内元素都有哪些
块级元素(blockelement)
div-最常用的块级元素
dl-和dtdd搭配使用的块级元素
form-交互表单
h1-大标题
hr-水平分隔线
ol-排序表单
p-段落
ul-非排序列表
内联元素(inlineelement)
a-锚点
b-粗体(不推荐)
br-换行
em-强调
font-字体设定(不推荐)
i-斜体
img-图片
input-输入框
label-表格标签
select-项目选择
small-小字体文本
span-常用内联容器,定义文本内区块
strike-中划线
strong-粗体强调
sub-下标
sup-上标
textarea-多行文本输入框
tt-电传文本
u-下划线
四。
你真的了解HTML吗
有这么一段HTML,请挑毛病:
哥写的不是HTML,是寂寞。
我说:
不要迷恋哥,哥只是一个传说
对原题改进的结果:
html4.01:
哥写的不是HTML,是寂寞。
我说:
不要迷恋哥,哥只是一个传说
xhtml1.0:
哥写的不是HTML,是寂寞。
我说:
不要迷恋哥,哥只是一个传说
加分:
哥写的不是HTML,是寂寞。
我说:
不要迷恋哥,哥只是一个传说
五。
介绍所知道的CSShack技巧(如:
_,*,+,\9,!
important之类)
1.区别IE6与Firefox
程序代码
background:
orange;
*background:
blue;
2.区别IE6与IE7
程序代码
background:
green!
important;
background:
blue;
3.区别IE7与Firefox
程序代码
background:
orange;
*background:
green;
4.区别Firefox、IE7、IE6
程序代码
background:
orange;
*background:
green!
important;
*background:
blue;
5.分别针对Firefox、IE8、IE7和IE6显示值
程序代码
selector{
property:
value;/*所有浏览器*/
property:
value\9;/*所有IE浏览器*/
+property:
value;/*IE7*/
_property:
value;/*IE6*/
}
IE都能识别*,标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别!
important;
IE7能识别*,也能识别!
important;
FF不能识别*,但能识别!
important;
于是大家还可以这样来区分IE6,IE7,Firefox:
程序代码
background:
orange;
*background:
green;
_background:
blue;
不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
以下两种方法几乎能解决现今所有HACK
1-!
important
随着IE7对!
important的支持,!
important方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
程序代码
#wrapper
{
width:
100px!
important;/*IE7+FF*/
width:
80px;/*IE6*/
}
2-IE6/IE77对FireFox
*+html与*html是IE特有的标签,Firefox暂不支持。
而*+html又为IE7特有标签。
注意:
*+html对IE7的HACK必须保证HTML顶部有如下声明:
程序代码
!
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" "http:
//www.w3.org/TR/html4/loose.dtd"
其他兼容技巧
1-Firefox下给DIV设置padding后会导致width和height增加,但IE不会(可用!
important解决)。
2-居中问题
1)垂直居中:
将line-height设置为当前DIV相同的高度,再通过vertical-align:
middle。
2)水平居中:
margin:
0auto;(当然不是万能);
3)若需给a标签内内容加上样式,需要设置display:
block;(常见于导航标签);
4)Firefox和IE对BOX理解的差异导致相差2px,还有设为float的DIV在IE下margin加倍等问题;
5)ul标签在Firefox下面默认有list-style和padding.,最好事先声明,以避免不必要的麻烦;
6)作为外部wrapper的DIV不要定死高度,最好还加上overflow:
hidden;以达到高度自适应;
针对FirefoxIE6IE7的CSS样式
现在大部分都是用!
important来Hack,对于IE6和Firefox测试可以正常显示,但是IE7对!
important可以正确解释,会导致页面没按要求显示!
找到一个针对IE7不错的Hack方式就是使用*+html,应该没有问题了。
程序代码
#kyogo{color:
#333;}/*Moz*/
*html#kyogo{color:
#666;}/*IE6*/
*+html#kyogo{color:
#999;}/*IE7*/
那么在Firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
CSS布局中的居中问题
主要的样式定义如下:
程序代码
body{
text-align:
center;
}
#center{
margin:
0auto;
}
首先在父级元素定义text-align:
center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在Mozilla中不能居中。
解决办法就是在子元素定义时候设定时再加上margin:
0auto;来实现兼容。
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个DIV,只要在每个拆出的DIV里定义margin:
0auto;就可以了。
浮动IE产生的双倍距离
程序代码
#box{
float:
left;width:
100px;
margin:
000100px;//这种情况之下IE会产生200px的距离
display:
inline;//使浮动忽略
}
这里细说一下block和inline两个元素,Block元素的特点是:
总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:
和其他元素在同一行上;
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;
}
DIV浮动IE文本产生3象素的BUG
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距。
程序代码
#box{
float:
left;
width:
800px;
}
#left{
float:
left;
width:
50%;
}
#right{
width:
50%;
}
*html#left{
margin-right:
-3px;//这句是关键
}
属性选择器(这个不能算是兼容,是隐藏CSS的一个BUG)
程序代码
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的。
IE捉迷藏的问题
当DIV应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:
对#layout使用line-height属性或者给#layout使用固定高和宽。
页面结构尽量简单。
六。
介绍CSS盒模型
什么是CSS的盒子模式呢?
为什么叫它是盒子?
先说说我们在网页设计中常听的属性名:
内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。
那么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。
在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。
填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。
七。
CSS层叠是什么?
介绍一下
我们知道文档中的一个元素可能同时被多个CSS选择器选中,每个选择器都有一些CSS规则,这就是CSS层叠。
这些规则有可能不矛盾的,自然这些规则将会同时起效,然而有些规则是相互冲突的。
样式表的顺序:
1,浏览器默认(browserdefault)(优先级最低)
2,外部样式表(externalstylesheet)
3,内部样式表(internalstylesheet)
4,内嵌样式表(inlinestyle)(优先级最高)
八。
都知道哪些CSS浏览器兼容性问题
兼容性处理要点
1、DOCTYPE影响CSS处理
2、FF:
设置padding后,div会增加height和width,但IE不会,故需要用!
important多设一个height和width
3、FF:
支持!
important,IE则忽略,可用!
important为FF特别设置样式
4、div的垂直居中问题:
vertical-align:
middle;将行距增加到和整个DIV一样高line-height:
200px;然后插入文字,就垂直居中了。
缺点是要控制内容不要换行
5、在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:
30px!
important;margin:
28px;}
注意这两个margin的顺序一定不能写反,!
important这个属性IE不能识别,但别的浏览器可以识别。
所以在IE下其实解释成这样:
div{maring:
30px;margin:
28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:
XXpx!
important;
浏览器差异
1、ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:
list-style:
none;margin:
0px;padding:
0px;
其中margin属性对IE有效,padding属性对FireFox有效。
[注]经验证,在IE中,设置margin:
0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在Firefox中,设置margin:
0px仅仅可以去除上下的空白,设置padding:
0px后仅仅可以去掉左右缩进,还必须设置list-style:
none才能去除列表编号或圆点。
也就是说,在IE中仅仅设置margin:
0px即可达到最终效果,而在Firefox中必须同时设置margin:
0px、padding:
0px以及list-style:
none三项才能达到最终效果。
2、CSS透明问题
IE:
filter:
progid:
DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:
opacity:
0.6。
[注]最好两个都写,并将opacity属性放在下面。
3、CSS圆角问题
IE:
ie7以下版本不支持圆角。
FF:
-moz-border-radius:
4px,或者-moz-border-radius-topleft:
4px;-moz-border-radius-topright:
4px;-moz-border-radius-bottomleft:
4px;-moz-border-radius-bottomright:
4px;。
[注]圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧。
不过jQuery的圆角只看到支持整个区域的圆角,没有支持边框的圆角,不过这个边框的圆角可以通过一些简单的手段来实现,下次有机会介绍下。
4、cursor:
handVScursor:
pointer
问题说明:
firefox不支持hand,但ie支持pointer,两者都是手形指示。
解决方法:
统一使用pointer。
5、字体大小定义不同
对字体大小small的定义不同,Firefox中为13px,而IE中为16px,差别挺大。
解决方法:
使用指定的字体大小如14px。
并列排列的多个元素(图片或者链接)的div和div之间,代码中的空格和回车在firefox中都会被忽略,而IE中却默认显示为空格(约3px)。
6、CSS双线凹凸边框
IE:
border:
2pxoutset;。
FF:
-moz-border-top-colors:
#d4d0c8white;-moz-border-left-colors:
#d4d0c8white;-moz-border-right-colors:
#404040#808080;-moz-border-bottom-colors:
#404040#808080;
浏览器bug
1、IE的双边距bug
设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案:
在这个div里面加上display:
inline;
九。
CSS3都有哪些新内容
第1选择器
第2RGBA和透明度
第3多栏布局
第4多背景图
第5WordWrap
第6文字阴影
第7@font-face属性
第8圆角(边框半径)
第9边框图片
第10盒阴影
第11盒子大小
第12
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 面试 题目