十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
一.单选题(共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设置失败,请说出三种解决方案:
最大(最小)高度、宽度
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属性: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希望对你有所帮助。
overflow: hidden; 设置元素内容溢出隐藏。
overflow-y: hidden; 设置垂直溢出隐藏。
overflow-x: hidden; 设置水平溢出隐藏
子元素默认是存在于父元素的内容区中,
理论上讲子元素的最大可以等于父元素内容区大小
如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容!
父元素默认是将溢出内容,在父元素外边显示,
通过overflow可以设置父元素如何处理溢出内容:
可选值:
该属性不论内容是否溢出,都会添加水平和垂直双方向的滚动条
需要水平就添加水平
需要垂直就添加垂直
都不需要就都不加
解决这个问题的方法如下:
1、先在html里添加一个img图片标签。
2、运行页面后,这是完整显示图片大小的。图片大概是400x260左右的大小。
3、要进入图片缩放,可以在css样式里设置图片的宽度和高度,但不要宽和高都设置了,比如这里都设置为100px。
4、设置后,看下页面可以看到图片现在变形了。
5、正确的方法应该是只设置其中一个,比如设置宽度为100px,高度设置为自动就行了。
6、这里设置后的效果,图片并没有变形。
7、同样,如果是限定高度的大小,就设置宽度为自动,图片同样不会变形,这样问题就解决了。