html周考题2

一．单选题（共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 40px; D.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

lia href = ‘ ’target=’_blank’top1:百度/a/li

lia href = ‘ ’target=’_blank’top2:淘宝/a/li

lia href = ‘ ’target=’_blank’top3:新浪/a/li

lia href = ‘ ’target=’_blank’top4:网易/a/li

lia href = ‘ ’target=’_blank’top5:搜狐/a/li

/ul

/div

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

List-style:none;}

Width:30px; color: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设置失败，请说出三种解决方案：

css 限制图片最大尺寸 要兼容IE6

最大（最小）高度、宽度

1、IE6支持max-height解决方法

IE6支持最大高度解决CSS代码：

.yangshi{max-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":"");overflow:hidden;}

说明：max-height:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围高度。而_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":"");overflow:hidden;则是让IE6支持max-height替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持max-height的CSS样式代码，完整：

max-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":""); overflow:hidden;

说明：这里的1000和1000px是你需要的数值，注意3个数值的相同。

让IE6支持最大高度max-height的时候别忘记加上overflow:hidden;

2、IE6支持min-height解决方法

IE6支持最小高度解决CSS代码：

.yangshi{min-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":"");}

说明：min-height:1000px; 这个是IE6以上级其它品牌浏览器支持最小范围高度。而_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":"");则是让IE6支持min-height替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持min-height的CSS样式代码，完整：

min-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":"");

说明：这里的1000和1000px是你需要的数值，注意3个数值的相同。

3、IE6支持max-height又支持min-height方法

让所有浏览器包括IE6即支持最大高度又支持最小高度：

.yangshi{Max-Height:620px;Min-Height:40px;_height:expression(this.scrollHeight 620 ? "620px" : (this.scrollHeight 40 ? "40px" : "auto"));}

IE6支持Max-Height和支持Min-Height CSS代码

_height:expression(this.scrollHeight 620 ? "620px" : (this.scrollHeight 40 ? "40px" : "auto"));

说明：以上代码作用是让对象的最小高度为40px，最大高度为620px的CSS样式属性。

4、IE6支持max-width解决方法

IE6支持最大宽度，解决CSS代码：

.yangshi{max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)1000?"1000px":"");overflow:hidden;}

说明：max-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而_width:expression((document.documentElement.clientWidth||document.body.clientWidth)1000?"1000px":"");overflow:hidden;则是让IE6支持max-width替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持max-width的CSS样式代码，完整：

max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)1000?"1000px":"");overflow:hidden;

说明：这里的1000和1000px是你需要的数值，注意3个数值的相同。设置最大max-width的时候别忘记加上overflow:hidden;

5、IE6支持min-width解决方法

IE6支持最小宽度，解决CSS代码：

.yangshi{min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)1000?"1000px":"");}

说明：min-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而_width:expression((document.documentElement.clientWidth||document.body.clientWidth)1000?"1000px":"");则是让IE6支持min-width替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持min-width的CSS样式代码，完整：

min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)1000?"1000px":"");

说明：这里的1000和1000px是你需要的数值，注意3个数值的相同。

6、让IE6支持min-width同时又支持max-width解决方法

让IE6即支持最小宽度又支持最大宽度限制设置。这种情况我们常常碰到对图片控制，让不确定大小的图片，如果太宽，不能超出一定范围值，小的时候不控制他的方法，用到CSS代码：

_width:expression(this.scrollWidth 620 ? "620px" : (this.scrollWidth 1? "1px" : "auto"));

对图片控制CSS完整代码：

img{max-width:620px;_width:expression(this.scrollWidth 620 ? "620px" : (this.scrollWidth 1? "1px" : "auto"));}

说明：图片不能超出大于620px的宽度，又不小于1像素的宽度。

让所有浏览器包括IE6浏览器支持最大宽度又支持最小宽度DIV CSS代码：

.yangshi{max-width:620px;min-width:1px;_width:expression(this.scrollWidth 620 ? "620px" : (this.scrollWidth 1? "1px" : "auto"));}

用css怎么设置div滚动条的样式，可改变大小的

滚动条样式主要涉及到如下CSS属性：overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容

overflow: auto; 在需要时内容会自动添加滚动条

overflow: scroll; 总是显示滚动条

overflow-x: hidden; 禁止横向的滚动条

overflow-y: scroll; 总是显示纵向滚动条width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]height: 120px; 设置区域的高度[像素/百分比等等]STYLE

BODY {

SCROLLBAR-FACE-COLOR: #f892cc;

SCROLLBAR-HIGHLIGHT-COLOR: #f256c6;

SCROLLBAR-SHADOW-COLOR: #fd76c2;

SCROLLBAR-3DLIGHT-COLOR: #fd76c2;

SCROLLBAR-ARROW-COLOR: #fd76c2;

SCROLLBAR-TRACK-COLOR: #fd76c2;

SCROLLBAR-DARKSHADOW-COLOR: #f629b9;

SCROLLBAR-BASE-COLOR: #e9cfe0

}

/STYLESCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色

SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色

SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色

SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色

SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色

SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色

SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色

SCROLLBAR-BASE-COLOR: 滚动条的基本颜色自己定义滚动条的颜色。一般默认的滚动条样式如下左图,右图是放大了1600倍的样子，我们可以看到滚动条有几种言责组合的,我给他们标了7个号，分别注释在下面的css代码的后面了，注意css的注释代码是放在两个斜杠内的两个星号之间。如:/*这里放注释的代码*/Body {

scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/

scrollbar-face-color: #333; /*立体滚动条的颜色*/

scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/

scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/

scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/

scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/

scrollbar-track-color: #666; /*立体滚动条背景颜色*/scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/

Cursor:url(mouse.cur); /*自定义个性鼠标*/

}以上2项适用与body、div、textarea、iframe希望对你有所帮助。

若某个标签里的内容超过标签的尺寸,则超出的内容自动隐藏的CSS样式是什么？

overflow: hidden; 设置元素内容溢出隐藏。

overflow-y: hidden; 设置垂直溢出隐藏。

overflow-x: hidden; 设置水平溢出隐藏

16.css: overflow使用 例: 固定div大小,不让内容超出div

子元素默认是存在于父元素的内容区中，

理论上讲子元素的最大可以等于父元素内容区大小

如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容!

父元素默认是将溢出内容，在父元素外边显示，

通过overflow可以设置父元素如何处理溢出内容：

可选值：

该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条

需要水平就添加水平

需要垂直就添加垂直

都不需要就都不加

css 可以按比例缩放图片吗？

解决这个问题的方法如下：

1、先在html里添加一个img图片标签。

2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。

3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。

4、设置后，看下页面可以看到图片现在变形了。

5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。

6、这里设置后的效果，图片并没有变形。

7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。

当前文章：则超出的尺寸css样式是,css超出显示
标题来源：http://ybzwz.com/article/dsddjje.html