日志
网页设计师常见面试题集
||
面试题类型一：
一、 填空题（40分）
1、目前常用的WEB标准静态页面语言是________。（4分）
2、改变元素的外边距用________，改变元素的内填充用________。（6分）
3、在Table中，TR是________，TD是________。（6分）
4、如果给一行两列的表格（table）定义高度样式，在________标签中定义最合理，最能减少代码的臃肿。（5分）
5、对ul li的样式设成无，应该是用什么属性________。（6分）
6、在新窗口打开链接的方法是________。（4分）
7、Color:#666666;可缩写为________。（2分）
8、合理的页面布局中常听过结构与表现分离，那么结构是________，表现是________。（9分）
二、选择题（20分）
1、在下面的 XHTML 中，哪个可以正确地标记折行？（5分）
A：<br /> B：<break/> C：<br>
2、下列哪些是格式良好的 XHTML？（5分）
A：<p>A <b><i>short</b></i> paragraph</p>
B：<p>A <b><i>short</i></b> paragraph</p>
C：<p>A <b><i>short</i></b> paragraph
3、在以下的 HTML 中，哪个是正确引用外部样式表的方法？（5分）
A：<style src="mystyle.css">
B：<link rel="stylesheet" type="text/css" href="mystyle.css">
C：<stylesheet>mystyle.css</stylesheet>
4、在 HTML 文档中，引用外部样式表的正确位置是？（5分）
A：文档的末尾 B：文档的顶部
C：<body> 部分 D：<head> 部分
三、问答题（40分）
1、请写出超链接的顺序或者你在初始样式中的链接方法。（要求默认无下线，鼠标经过有下划线）（10分）
2、当float和margin同时使用时， IE6的双倍边距BUG如何解决？（6分）
3、为什么无法定义1px左右高度的容器？（7分）
4、Firefox中标签的居中问题的解决方法？（5分）
5、请写出XHTML和CSS如何注释？（5分）
6、请以缩写方法写出1px直线（实线）灰色（任意灰色代码值），上面无边框的矩形边框样式。（7分）
面试题类型二：
一、网页设计分析能力
1．购物网站的主色调应该是什么样色？交友网站？体育网站？软件网站？年轻的互联网？搜索引擎？
2．一个网站最多有几种色彩
3．百度和google，你看哪个觉得更舒服一点？
4．列出你所知道的几种图像格式，并说出它们之间的不同点和大部分的用途
5．一般网站的版式有哪几种？
6．如果背景是黑色，那么字体用什么颜色能突出字体，且不显得刺眼？
7．在在红色中加入少量的黑色，你觉得应该是种什么感觉？
二、网页制作能力
1．用div设计一个三行三列的网页（头部,身体,底部;身体部分为三列）
2．列出你所用过的Html元素
3．用li做一个横向的导航菜单，不少于三个菜单
4．背景的哪个属性来确定背景图像是否固定？
三、高级应用能力（选做）
1．用js代码写出一个页面加载后能不断变换背景的效果
2．利用DOM知识是列出一个ul中li的总数，li中的内容
3．写出你会用的兼容个中不同浏览器的hack css代码，如IE7 FF
4．说出你所知道的web标准方面的知识
5．高级图像处理（可网上查询教程）：模仿例图
6．Form表单的哪个属性是表单数据的传送方式？
7．/images/123.jpg 与 images/123.jpg,那种写法是相对根目录的？
四、软件应用能力(选2题)：
1．Ps或者其他图像处理软件做一个如图的渐变按钮
2．Flash做一个简单的图形遮罩效果
3．把网站童车列表页的结构美感重新设计
4．用ps或者Fw等图像处理软件对一个网页平面图做切片
常见面试题及解答：
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里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉he ight设置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;。
9、HTML的含义是什么?其主体部分由什么标记构成?
HTML即Hyper Text Markup Language超文本标记语言，是构成网页最基本的元素。标记和之间的内容构成了HTML的主体部分，网页中的所有内容，包括文字、图形、链接以及其他页面元素都包含在该标记符内。
10、标记br和p有什么区别?
标 记br和p都可以用来换行，但是二者是有区别的。<br>标记使当前行强行中断而另起一行，但是新行与原来的行保持相同的属性，即新行与原来 的行属于同一段落，而<p>标记在换行的时候另起了一新的段落；<br>标记无对应的结束标记</br>， 而<p>标记必须和</p>配合使用，不能省略</p>。
11、 URL指的是什么?有何作用?分为几种?有什么区别?
URL是统一资源定位符，用于定位Web上的文件信息。
URL 有绝对和相对之分。绝对URL就是指完整的资源地址，具体形式为：协议名称://计算机域名/路径和文件名。一般情况下，在指定外部Internet资源 时应使用绝对URL。相对URL指资源相对于当前页面的路径。使用相对URL时，一般使用点“.”和双点“..”表示当前目录和上一级目录(父目录)。在 制作网站的时候，只要站点各资源的相对位置不变，就使用相对URL。
12、说明在网页设计中层的作用
层，也就是DIV标记，是一个区块级的HTML标记，在该标记之间可以添加段落、表格、图片等内容，使同一个DIV标记中的元素具有相同的样式，并可在页面显示时同时出现、移动以及隐藏。
它的主要作用有以下两点：(1) 将一些标记元素组织起来，应用DIV的属性为这些标记元素定义统一的样式;(2) 利用其z-index属性，实现页面内各元素的重叠显示效果;(3) 使页面上显示更多的特效功能。
13、CSS指的是什么?在网页制作中为什么要使用CSS技术?
CSS(Cascading Style Sheets)也叫层叠样式表，它是用来控制网页中一个或多个元素的外观。在网页制作中，使用样式表可以减少很多具有相同外观元素的重复设置工作，从而给 网页的设计和维护带来了很大的方便;具体应用是：改变样式表中元素显示样式的定义，则在使用该样式表的所有网页中相应元素的显示样式都会自动发生改变。
14、网页制作中有哪几种样式设置方法?各有何特点?
网页制作中有：内联式样式设置、直接嵌入式样式设置和外部链接式样式设置三种方式。
(1) 内联式样式设置：
设置方法：直接在要设置样式的各标记元素中修改style属性;
优点：直观、方便;
缺点：不易于维护和修改;
适用于：网页中个别需要修改的元素的样式定义;
(2) 直接嵌入式样式设置：
设置方法：在HTML文档的<head></head>之间添加<style></style>定义，<style></style> 部分是所有需要设置样式的元素的属性定义。
优点：对当前页面内的所有元素的样式修改、维护比较方便;
缺点：对于网站建设，要采用相同的样式设置则比较麻烦;
适用于：单独网页的样式定义;
(3) 外部链接式样式设置：
设 置方法：把所有样式定义放在一个独立的文件中，凡是需要使用该文件中规定样式的网页，只要在其<head>与</head>之间 添加一个对该样式文件的链接：<link type="text/css" href="MyStyle1.css" rel="Stylesheet" />即可;
适用于：需要统一显示样式的网站建设。
15、用户自定义的类和ID在定义和使用时有什么区别?
定义时，类以英文形式的句点“.”为起始标志，ID以“#”为起始标志;使用时，类可以在一个页面中被多个不同的元素引用，而ID在一个页面中只能被引用一次。
16、为什么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
17、 样式定义如下，试说明显示结果，并做相应解释
样式表文件StyleExercise.css：
body{background-color:#ccccff;}
p{color:Blue;font-size:30px; }
h1{color:Yellow;font-size:medium;}
p a{color :Orange;font-size:40px; }
HTML文件：
<head>
<title>样式作业练习</title>
<link type="text/css" rel=Stylesheet href=StyleExercise.css />
<style>
h1{color:red;}
.first{background-color:black;}
</style>
</head>
<body>
<h1 style="color:brown;">标题1</h1>
<h1 class=first>标题2</h1>
<p style="font-size:20px;">文本</p>
<p>这是一个<a href="http://www.baidu.com">链接</a>演示。</p>
<a href="http://www.baidu.com">另一个链接</a>
</body>
(1) 第一次使用的P、H1~H6标记均以红色的“40px”大小的字体显示;
(2) 超链接未选中时，以蓝色字体显示;当鼠标移动到上方时，以原字体大小的1.5倍的橙色字体显示;当超链接被点击之后，以暗红色字体显示;
(3) 所有P标记的内容都以列表的形式显示;
(4) 所插入图片的左右两侧都允许有文字出现;
(5) 使用背景图片，并使其在整个页面的两个方向平铺。
该HTML页面与样式表文件建立了链接，显示时以“#ccccff”色为背景色;
“标题1”：三种样式定义方式都使用了，最终按照就近原则，以内联式样式定义的颜色“brown”、外部链接的样式表文件定义的字体大小“medium”显示;
“标题2”：使用了外部链接和直接嵌入的样式定义，以直接嵌入式定义的颜色“red”、类.first定义的背景色“black”、 外部链接的样式定义的字体大小“medium”显示;
“文本”：使用了外部链接和内联式的样式定义，以内联式定义的字体大小“20px”、外部链接的样式定义的颜色“blue”显示;
“这是一个……演示”：使用了外部链接的样式定义，以颜色“blue”、 字体大小“30px”显示;其中“链接”二字，使用了包含选择符的样式定义，以样式表定义的颜色“orange”、字体大小“40px”显示;
“另一个链接”：没有样式定义，按默认方式显示。
18、什么是脚本语言?目前流行的有哪些脚本语言?主要区别是什么?
脚 本语言是一种介于HTML语言和C++、Visual Basic等程序设计语言之间的语言，它在形式和功能上可能更接近后者，但它并不是应用程序开发语言，所以语法规则没有那么严格和复杂，也无需编译。目前 流行的浏览器脚本语言主要有：ECMAScript、Jscript、JavaScript、VBScript等。
VBScript是 Visual Basic的子集，是特意为在浏览器中进行工作而设计的，它不包括一些在脚本这个范围以外的特性，如文件访问和打印等等。它是基于Microsoft的 Visual Basic语言。目前只有Microsoft Internet Explore版本3或更高的版本支持VBScript，Netscape的浏览器并不支持VBScript。
JScript从一组编程语言如 C, C++以及Java等之中脱离出来的，是Microsoft公司在其Internet Explore 3.0浏览器中开始实现的解释性脚本语言。Jscript来源于Netscape公司出版的JavaScript文档，但是并不具有JavaScript 的全部特性。
JavaScript是基于SUN公司的JAVA语言，用于创建动态的联机应用程序，这些程序能够将客户端和服务器端的对象和资源连接在一起。Microsoft Internet Explore和Netscape Navigator均支持JavaScript。
19、设计一个ASP.NET Web应用程序，要求从下向上滚动显示一行信息
(1)建立一个新的Web应用程序，在Default.aspx页面的【源】视图中加入<MARQUEE></MARQUEE>。
(2)切换到【设计】视图，调整控件大小和位置，然后在控件中输入显示内容，例如“欢迎参加MARQUEE控件练习”。
(3)修改该控件的【behavior】属性为【scroll】。
(4)修改该控件的【direction】属性为【up】。
20、查找资料，学习掌握如何使用背景音乐、模式对话框和非模式对话框?模式对话框和非模式对话框的区别是什么?
可以用bgsound播放背景音乐，例如,当音乐文件个数较多时，可以把音乐名保存到数据库中，然后根据具体情况灵活地选择要播放的乐曲。
模式对话框的格式为：
window.showModalDialog(sURL[,vArguments][,sFeatures])
用来创建一个展示指定HTML文档的模式对话框。sURL是字符串，用来指定HTML文档;vArguments指定展示文档时使用的参数;sFeatures用来指定窗体的参数值。例如：
<script>window.showModalDialog('test1.htm','Dialog Arguments Value', 'dialogHeight: 341px; dialogWidth: 656px; dialogTop: 86px; dialogLeft: 100px; edge: Raised;
center: Yes; help: Yes; resizable: Yes; status: Yes;');</script>
非模式对话框的格式为：
window.showModelessDialog(sURL[,vArguments][,sFeatures])
参数含义同模式对话框。例如：
<script>window.showModelssDialog('test1.htm','Dialog Arguments Value',
'dialogHeight: 341px; dialogWidth: 656px; dialogTop: 86px; dialogLeft: 100px; edge: Raised;
center: Yes; help: Yes; resizable: Yes; status: Yes;');</script>
21、请设计一个类似XX站点首页的web 页面：
1．页面为典型的header, footer加3栏的结构；
2．页面在800x600以上显示分辨率下是自动适应浏览器宽度的（自动变宽）；
3．Header区域有站点logo, 和主菜单，主菜单采用tab风格横向排列；
4．样式表中应该至少定义<h1>, <h2>, <h2>, <p>, <a> 等标签，使得这些标签可以在页面上显示美观。
您可以分析和研究XX站点目前的页面和css, 但绝对不要抄袭XX站点的页面结构和css, 也不要复制目前的页面的设计，这个考试不但考您的html, css知识，而且考您的基本构图和美感，因此您可以在上述基本要求满足的情况下，任意自由发挥。
注意事项：
1．使用CSS + DIV来组织页面结构，不允许使用<Table>来组织；主菜单的tab请用<UL>来实现，通过css控制其样式
2．手写代码，不允许使用可视化网页编辑工具
3．请把CSS单独文件存放，如果需要使用Javascript, js文件也单独存放，注意文件命名和class, id的命名规范
4．尽可能少使用图片，而多依靠css来控制颜色
