web前端笔试题(HTMLCSS篇).docx

web前端笔试题(HTMLCSS篇)

web前端笔试题集锦(HTML/CSS篇) 导读：网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以下是由小编J.L为您整理推荐的前端开发笔试题目，欢迎参考阅读。 一、HTML/CSS 1，让一个input的背景颜色变成红色 2，p的高宽等于浏览器可见区域的高宽，浏览器滚动，p始终覆盖浏览器的整个可见区域 思路： (1)先放置一个p1，浮动：position:absolute;top:0px;left:0px; (2)再放置一个p2，浮动：position:absolute;top:0px;left:0px;width:100%;height:100%; (3)在p2中放置一个p3，令其高度超过浏览器高度，使p2产生滚动条 (4)对html,body进行样式设置：width:100%;height:100%;overflow:hidden->不让浏览器产生滚动条，避免页面出现两个滚动条 (5)编写JavaScript，另p2的高度等于页面可见高度，宽度等于页面可见宽度，注意，在计算完可见高度height和可见宽度width后，要对这两个值做处理，可见宽度-p2的滚动条的宽度，滚动条的宽度我这里假设是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可以用cssexpression来替代 (5)CssExpression 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:0auto(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 HTML: left right (2)使用float HTML: 固定宽度 自适应 二者的CSS公用，如下： html,body{width:100%;height:100%;margin:0px;padding:0px;} .container{width:100%;height:400px;position:relative;} .fl1{float:left;} .left{width:100%;height:400px;background:#AFFFD0;position:absolute;} .right{width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;} .clear{clear:both;overflow:hidden;height:0px;} .container2{width:100%;height:400px;margin-top:100px;} .left2{background:#afffd