导读：网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以下是由本站小编J.L为您整理推荐的前端开发笔试题目，欢迎参考阅读。
一、HTML/CSS
1，让一个input的背景颜色变成红色
2，div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域
思路：
(1)先放置一个div1，浮动：position:absolute;top:0px;left:0px;
(2)再放置一个div2，浮动：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一个div3，令其高度超过浏览器高度，使div2产生滚动条
(4)对html,body进行样式设置：width:100%;height:100%;overflow:hidden->不让浏览器产生滚动条，避免页面出现两个滚动条
(5)编写JavaScript，另div2的高度等于页面可见高度，宽度等于页面可见宽度，注意，在计算完可见高度height和可见宽度width后，要对这两个值做处理，可见宽度-div2的滚动条的宽度，滚动条的宽度我这里假设是20px
这样题目基本就完成了，不过浏览器的兼容性还不是很好。
3，IE、FF下面CSS的解释区别
(1) 让页面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的设置+text-align:center
(2) ff：不支持滤镜
ie：支持滤镜
(3) ff：支持!important
ie支持*，ie6支持_
(4) min-width,min-height
FF支持，IE不支持，IE可以用css expression来替代
(5) Css Expression
FF不支持，IE支持
(6) cursor：hand
IE下可以显示手指状，FF下不行
(7) UL的默认padding和margin
IE下ul默认有margin，FF下ul默认有padding
(8) FORM的默认margin
IE下FORM有默认margin，FF下margin默认为0
4，一个定宽元素在浏览器(IE6，IE7，Firefox)中横向居中对齐的布局，请写出主要的HTML标签及CSS
思路：
IE6/7：text-align:center
Firefox：margin:0 auto(margin-top和margin-bottom也可以为其他数字，关键是margin-left,margin-right为auto)
5，CSS中margin和padding的区别
margin是元素的外边框，是元素边框和相邻元素的距离
Padding是元素的内边框，是元素边框和子元素的距离
6，最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。
思路：
(1)布局select和input，让input覆盖select，除了select的下拉图标，以方便select选择
(2)编写JS，为select添加onchange事件，onchange时将input的value置成select选中的指
7，
中alt和tittle的区别
alt：图片显示不出来了就提示alt
title：鼠标划过图片显示的提示
8，用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。
在这里我使用了两种方式：
(1)使用position