HTML试题:操作题:编写一个用户登录的界面,要求排版争取。

html-css010

HTML试题:操作题:编写一个用户登录的界面,要求排版争取。,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<title>登录界面</title>

</head>

<body>

<form>

用户名:<input id="loginName" value="" type="text"><br>

密  码:<input id="password" value="" type="password"><br>

<input type="submit" id="btnlogin" value="登录">&nbsp&nbsp&nbsp&nbsp<input type="reset" id="btnreset" value="取消">

</form>

</body>

</html>

大概就是这样了, 你说的要求排版争取什么意思不明白

一.单选题(共41小题,每题1.5分,共61.5分)

13、下面有关表格的说法正确的是( C )。

16、大多数表单元素都是使用( A )标签,然后通过type属性指定表单类型。

17、下面表单元素中,有value属性的是( D )。

18、单行文本框使用( C )实现,密码文本框使用( D )实现,多行文本框使用( A )实现。

19、如果想要定义单选框默认选中效果,可以使用( A )属性来实现。

20、在表单中,input元素的type属性取值为( A )时,用于创建重置按钮。

21、下面有关表单的说法,正确的是( D )。

22、下面对于按钮的说法,不正确的是( D )。

29、如果想要实现字体颜色为白色,可以使用定义color属性值为( B )。

30、下面有关字体样式,说法正确的是( C )。

31、下面选项中,属于CSS正确注释方式是( B )。

32、CSS使用( C )属性来定义段落的行高。

33、CSS使用( A )属性来定义字体下划线、删除线以及顶划线效果。

34、如果想要实现下图14-12所示的效果,我们可以使用( C )来实现。

[图片上传失败...(image-6c8f86-1537317883054)]

35、下面有关文本样式的说法中,正确的是( B )。

36、如果我们想要定义某一个元素的右边框,宽度为1px,外观为实线,颜色为红色,正确写法应该是( C )。

37、如果我们想要去掉某一个元素的上边框,下面写法中不正确的是( A )。

38、在真正实战开发中,对于下图所示的列表项符号,最佳实现方法是(C )。

[图片上传失败...(image-862242-1537317883054)]

39、下面对于列表说法中,叙述错误的是( A )。

40、CSS可以使用( C )属性来合并表格边框。

41、下面有关表格样式,说法不正确的是( C )。

42、CSS可以使用( B )属性来实现图片水平居中。

43、下面有关图片样式,说法正确的是( C )。

44、CSS可以使用(A )属性来设置文本颜色。

45、下面有关背景样式,说法不正确的是( A )。

46、下面哪一个伪类选择器是用于定义鼠标经过元素时样式的?( C )

47、在实际开发中,如果想要定义超链接未访问时的样式,可以使用( A )。

48、我们可以使用( D )来实现鼠标悬停在超链接上时为无下划线效果。

49、下面有关超链接样式说法中,正确的是( A )。

50、下面哪个属性用于定义外边距?( D )

51、下面有关CSS盒子模型的说法中,正确的是( D )。

52、如果一个div元素的上内边距和下内边距都是20px,左内边距是30px,右内边距是40px,正确的写法是( B )。

C. padding:20px 30px 40pxD.padding:40px 20px 30px 20px

53、对于“margin:20px 40px”,下面说法正确的是( C )。

54、默认情况下,( A )元素设置width和height可以生效。

55、如果想要实现文本环绕着图片,最好的解决方法是( A )。

56、在CSS中,“clear:both”的作用是( C )。

57、下面有关浮动的说法中,不正确的是( B )。

58、我们可以定义position属性值为(B ),从而来实现元素的相对定位。

59、下面哪个属性不会让div元素脱离文档流?( B )

60、默认情况下,以下关于定位布局的说法不正确的是( C )。

61、下面有关定位布局,说法不正确的是( D )。

D. 在实际开发中,优先使用定位布局。如果实现不了,再考虑浮动布局

三、判断题(每题1.5分,共7.5分)

12.若某个标签里的内容超过标签的尺寸,则超出的内容自动隐藏的CSS样式是visibility:hidden ( 错 )

13.在HTML中,将表单中input元素的type属性值设置为set时,用于创建重置按钮 ( 错 )

14.在 HTML中,action属性用于设置表单要提交的地址 (对 )

16.在HTML中创建一个隐藏域可以<input name="hidden" value="hidden" text="111"> (错 )

18.transition-property 设置过渡的时间,transition-duration 设置过渡的属性(错 )

四、简答题(4-6题6分,7题7分,共25分)

4 1、定义一个列表,每一个列表项都是一个超链接,并且要求去除列表项符号以及超链接下划线,超链接文本颜色为粉红色,并且点击某一个列表项会以新窗口的形式打开。

[图片上传失败...(image-aabb7b-1537317883044)]

<div class =’title’ >

<ul>

<li><a href = ‘ http://www.baidu.com ’target=’_blank’>top1:百度</a></li>

<li><a href = ‘ http://www.baidu.com ’target=’_blank’>top2:淘宝</a></li>

<li><a href = ‘ http://www.baidu.com ’target=’_blank’>top3:新浪</a></li>

<li><a href = ‘ http://www.baidu.com ’target=’_blank’>top4:网易</a></li>

<li><a href = ‘ http://www.baidu.com ’target=’_blank’>top5:搜狐</a></li>

</ul>

</div>

.total{ .total ul{ .total ul a{text-decorati0n:none

List-style:none}

Width:30pxcolor:pink}

Height:400px

Text-alian:center

}

5请将下图所示的图片当做背景图,要求铺满整个页面,不允许有空隙。

[图片上传失败...(image-2d6d42-1537317883042)]

Body{

Background-image:url(../image/1.png)

Background-repeat:repet

}

6在网页中添加一段文本链接,并且设置其在不同的状态下显示不同的效果。要求:

(1)未访问时:没有下划线,颜色为红色

(2)鼠标经过时:有下划线,颜色为蓝色

A:link{

Text-decoration:none

Color:red

}

A:hover{

Color:blue

Text-decoration:underline

}

7 使用浮动布局来实现下图所示的页面布局效果,其中各个元素之间的间距是10px。下面只给出必要的尺寸,也就是说有些尺寸需要我们自己计算的。在实际开发中,计算尺寸是家常便饭,所以这里我们自己试一下。

[图片上传失败...(image-8d0a1c-1537317883041)]

<div class=’total’>

<div class=’box1’></div>

<div class=’box2’></div>

<div class=’box3’></div>

<div class=’box4’></div>

</div>

.total{

Width:800px

Height:800px

Overflow:hidden

}

.box1{

Width:800px

Height:100px

}

.box2{

Width:595px

Height:38-px

Float:left

}

.box3{

Width:195px

Height:380px

Float:left

}

.box1{

Width:800px

Height:100px

}

五、论述题(每题6分,共6分)

1、在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,请说出三种解决方案:

1. Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

1.声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。

2.严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。

3.在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

2.