HTML5考试试卷

阅读: 评论:0

2024年2月8日发(作者:)

HTML5考试试卷

考试试卷(1卷)

一.单选题(共20题,20.0分)

1、内联元素:请选择产生加粗字体的HTML标签:()

A、strong

B、hh

C、em

D、hr

正确答案: A

2、下列不属于HTML5表单新增元素的是( ) 。

A、number

B、range

C、email

D、nav

正确答案: D

3、超链接:如果在中包含如下代码,则该HTML文档IE浏览器中打开后,用户单击此链接将( )。 小说

A、使页面跳转到同一文件夹下名为“”的HTML文档

B、使页面跳转到同一文件夹下名为“小说.html”的HTML文档

C、使页面跳转到页面,包含名为“novel”的锚记处

D、使页面跳转到同一文件夹下名为“小说.html”的HTML文档中名为“novel”的锚记处

正确答案: C

4、表单:在HTML中,

,method表示( )。

A、提交的方式

B、表单所用的脚本语言

C、提交的URL地址

D、表单的形式

正确答案: A

5、用于控制网页样式并允许样式信息与网页内容分离的技术是( )?

A、HTML

B、CSS

C、JavaScript

D、DIV

正确答案: B

6、下列CSS基本选择器定义中不正确的是( )。

A、h1{color:red;}

B、.title{color:blue;}

C、#top{width:800px;}

D、div{width=800px;}

正确答案: D

7、将样式单独放在一个或多个.css文件中,在HTML文档中使用标记引用样式文件的方式是( )?

A、内联式

B、内嵌式

C、链接式

D、导入式

正确答案: C

8、对于代码:

你好

,运行后显示的“你好”文字是什么颜色( )?

A、蓝色

B、红色

C、黑色

D、不确定

正确答案: B

9、CSS中的盒子模型中不包含下列( )?

A、margin

B、border

C、padding

D、align

正确答案: D

10、如果要使用CSS将文本样式定义为粗体,需要设置( )文本属性。

A、font-family

B、font-style

C、font-weight

D、font-size

正确答案: C

11、下面那个语句是把段落的字体设置为黑体、18像素、红色字体显示( )

A、p{font-family:黑体;font-size:18pc; font-color:red}

B、p{font-family:黑体;font-size:18px; font-color:#ff0000}

C、p{font:黑体 18px #00ff00}

D、以上都不对

正确答案: B

12、表示字体大小的单位有很多,下面不属于正确单位的是(

A、px

B、em

C、pt

D、pp

正确答案: D

13、关于样式表的优先级说法不正确的是( )。

A、直接定义在HTML标记上的CSS样式级别比文档样式表高。

B、文档样式表的优先级比外部样式表高。

C、当样式中属性值重复时,先设的属性起作用。

D、样式表的优先级是用来解决样式表冲突的依据。

正确答案: C

14、下列设置颜色值的方法哪种是错误的( )?

A、red

B、#FF00FF

C、rgb(255,0,255)

D、F0F

正确答案: D

。)

15、如果想对一个div块元素的宽度属性设置一个2s的过渡效果,相应的CSS属性应该如何写( )。

A、animation: width 2s;

B、transition: width 2s;

C、transition: 2s width;

D、transition: div width 2s;

正确答案: B

16、正确给文本添加阴影的是( )。

A、box-shadow

B、border

C、margin

D、text-shadow

正确答案: D

17、以下关于相对定位说法正确的是()。

A、相对定位指的是相对于浏览器窗体的左上角进行位置偏移。

B、相对定位的元素不会脱离标准文档流,所以会影响其它同级元素的定位。

C、相对定位是相对于父级容器进行位置偏移。

D、相对定位是相对于元素自身的位置进行偏移。

正确答案: D

18、在CSS中,下面不属于盒子模型属性的是( )

A、font

B、margin

C、padding

D、border

正确答案: A

19、代码border:5px blue solid表示( )?

A、上边框设置为5像素宽的蓝色单实线

B、右边框设置为5像素宽的蓝色单实线

C、下边框设置为5像素宽的蓝色单实线

D、四个边框设置为5像素宽的蓝色单实线

正确答案: D

20、在CSS中,欲通过伪类为未访问过的链接设置样式(蓝色,无下划线),下列正确的是

( )?

A、link{color:blue;text-decoration:none;}

B、a link{color:blue;text-decoration:none;}

C、a:link{color:blue;text-decoration:none;}

D、vlink{color:blue;text-decoration:none;}

正确答案: C

二.判断题(共10题,10.0分)

1、万维网联盟外文名是Web Three Consortium。

正确答案: 错误

2、标签中的文字显示为斜体。

正确答案: 错误

3、浏览器对于不同级别的标题标签使用不同的字号。

正确答案: 正确

4、HTML中,表示空格的特殊字符是 

正确答案: 正确

5、相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。

正确答案: 正确

6、

标签定义 HTML 表格。

正确答案: 正确

7、 标签定义超链接,用于从一张页面链接到另一张页面。

正确答案: 正确

8、 标签可以用于为用户输入创建 HTML 表单。

正确答案: 正确

9、将input标记的type属性设置为radio可以生成单选按钮控件,一组单选按钮一次只允许选择其中一个。

正确答案: 正确

10、通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。

正确答案: 正确

三.程序题(共4题,70.0分)

1、局部布局:(20分)

请实现下图布局,要求:

(1) 适当定义图片宽高

(2) 不能使用表格布局

(3) “体育”文字和边框颜色均为#00ced1,请适当定义其字号;

(4) “11分钟前”颜色为sliver。

2、CSS3实现下列效果(10分)

请利用圆角矩形实现下图效果,注意:

(1)年代前的图片在附件images文件夹中

(2)矩形底色为浅灰色。

3、 完成如图所示的列表(10分)

4、表单(30分)

请完成下图表单效果,要求:

(1) 利用表格进行表单布局;

(2) 文本框中有图示的输入提示;

(3) 对EMAIL的文本框要有校验;

(4) 密码框中不能直接显示用户输入的内容;

(5) “获取短信验证码”是按钮控件;

(6) “《百度用户协议》”“百度隐私权保护声明”均为超链接。

考试试卷(2卷)

考试试卷(B卷)

题量:34 满分:100.0 分 显示答案

________________________________________

一.单选题(共20题,20.0分)

1、块级元素:下列哪个标记不属于常用的块级标记( )

A、div

B、span

C、ol

D、hr

正确答案: B

2、在 HTML5 中,哪个属性用于规定输入字段是必填的? ( )

A、required

B、formvalidate

C、validate

D、placeholder

正确答案: A

3、超链接:想要使用户在单击超链接时,弹出一个新的网页窗口,代码是( )。

A、新闻1

B、新闻2

C、新闻3

D、新闻4

正确答案: A

4、表单:要使单选框或复选框默认为已选定,要在input标签中加( )属性。

A、selected

B、disabled

C、type

D、checked

正确答案: D

5、在下面关于CSS样式的说明,其中( )不是CSS的优势。

A、Web页面样式与结构分离

B、页面下载时间更快

C、轻松创建及编辑

D、使用CSS增加了维护成本

正确答案: D

6、在规则 #intro{color: green;}中,使用的选择器是( )A、标签选择器

B、

元素选择器

C、类选择器

D、ID选择器

正确答案: D

7、下面( )不是正确的样式表附件方式。

A、附加样式表

B、行内样式表

C、文档样式表

D、外部样式表

正确答案: A

8、对于代码:

你好

,运行后显示的“你好”文字是什么颜色( )?

A、蓝色

B、红色

C、黑色

D、绿色

正确答案: A

9、盒子的定位不包含下列( )?

A、static(静态定位)

B、dynamic(动态定位)

C、relative(相对定位)

D、absolute(绝对定位)

正确答案: B

10、下列选项中,不属于设置字体大小的相对单位的是(A、px

B、mm

C、em

D、%

正确答案: B

11、( )可以将所有的

标签添加背景颜色。

A、.h1 {background-color:#FFFFFF}

。 )

B、h1 {background-color:#FFFFFF;}

C、 {background-color:#FFFFFF}

D、#h1 {background-color:#FFFFFF}

正确答案: B

12、标签

的对齐属性是( )。

A、style

B、text-align

C、angle

D、padding

正确答案: B

13、以下选择器中,优先级最高的是( )。

A、元素选择器

B、ID选择器

C、类选择器

正确答案: B

14、WWW服务器和WWW客户机之间传递信息使用的协议是(A、FTP

B、SMTP

C、HTTP

D、UDP

正确答案: C

15、下列说法错误的是( )

A、transition、transform和animation均是css3属性。

B、transition用来设置过渡效果

)?

C、animation用来设置过渡效果

D、transform用来设置旋转、平移等效果

正确答案: C

16、下列那个属性可以为div元素添加阴影边框( )。

A、border-radius

B、box-shadow

C、border-image

D、border-style

正确答案: B

17、以下代码片断中,属于绝对定位的是( )。

A、#box{width:100px;height:50px;}

B、#box{width:100px;height:50px;position:absolute;}

C、#box{width:100px;height:50px; position:static;}

D、#box{width:100px;height:50px; position:relative;}

正确答案: B

18、对于样式#box{padding:5px 10px;},表示盒子的内边距的值是(

A、上下是5px,左右是10px

B、上右是5px,下左是10px

C、左上是5px,右下是10px

D、上是5px,左是10px

正确答案: A

19、给边框加1px蓝色实线的是( )。

A、border:1px dashed blue

)?

B、padding:1px solid blue

C、border: 1px solid blue

D、padding: 1px dashed blue

正确答案: C

20、在HTML中,通过( )可以实现鼠标悬停在超链接上时,为无下划线的效果。

A、a{text-decoration:underline}

B、a{text-decoration:none}

C、a:hover{text-decoration:none}

D、a:link{text-decoration:underline}

正确答案: C

二.判断题(共10题,10.0分)

1、HTML标记符通常不区分大小写。

正确答案: 正确

2、网站就是一个链接的页面集合。

正确答案: 正确

3、标题标记hn,n可以取1到6之间的整数,n越小,文字越小。

正确答案: 正确

4、HTML的标记ol用于创建无序列表。

正确答案: 错误

5、id属性和class属性可以用于大多数HTML标记,两者的用法完全相同。

正确答案: 错误

6、在HTML表格中,表格的行数等于TR标记符的个数。

正确答案: 正确

7、video是html5中用于插入音频的标记。

正确答案: 错误

8、表示表单提交方式的属性是action,它可以取post或get,取post时可以提交大量数据且保密性好。

正确答案: 错误

9、将input标记的type属性设置为checkbox可以生成复选框控件,一组复选框允许同时选多个。

正确答案: 正确

10、通过 translate() 方法,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数,元素从其当前位置移动。

正确答案: 正确

三.程序题(共4题,70.0分)

1、局部布局(20分),要求:

(1)适当定义图片宽高

(2)不能使用表格布局

(3)“旅游”文字和边框颜色均为#00ced1,请适当定义其字号;

(4)“11分钟前”颜色为sliver。

2、利用CSS3属性,实现下列效果(10分)

将左图彩色图片设置如右图所示效果。

(1)边框:浅灰色8px直线边框。

(2)适当设置图片的宽高。

(3)将其灰度grayscale设为100%。

3、完成右图所示列表(10分)

4、表单(30分)

请完成下图表单效果,要求:

(1)利用表格进行表单布局;

(2)文本框中有图示的输入提示;

(3)对EMAIL的文本框要有校验;

(4)密码框中不能直接显示用户输入的内容;

(5)“获取手机验证码”是按钮控件;

(6)“《服务条款》”为超链接。

三.程序题(共4题,70.0分)

1、局部布局(20分),要求:

(1)适当定义图片宽高

(2)不能使用表格布局

(3)“旅游”文字和边框颜色均为#00ced1,请适当定义其字号;

(4)“11分钟前”颜色为sliver。

2、利用CSS3属性,实现下列效果(10分)

将左图彩色图片设置如右图所示效果。

(1)边框:浅灰色8px直线边框。

(2)适当设置图片的宽高。

(3)将其灰度grayscale设为100%。

3、完成右图所示列表(10分)

4、表单(30分)

请完成下图表单效果,要求:

(1)利用表格进行表单布局;

(2)文本框中有图示的输入提示;

(3)对EMAIL的文本框要有校验;

(4)密码框中不能直接显示用户输入的内容;

(5)“获取手机验证码”是按钮控件;

(6)“《服务条款》”为超链接。

考试试卷(3卷)

一.单选题(共25题,50.0分)

1、在下列选项中()选项最符合HTTP代表的含义。

A、高级程序设计语言

B、网域

C、域名

D、超文本传输协议

正确答案: D

2、HTML 指的是()

A、超文本标记语言(Hyper Text Markup Language)

B、家庭工具标记语言(Home Tool Markup Language)

C、超链接和文本标记语言(Hyperlinks and Text Markup Language)

正确答案: A

3、()标签用于产生无序列表。

A、dd

B、ol

C、li

D、ul

正确答案: D

4、以下选项中属于行内标签的是( )

A、span

B、p

C、div

D、hr

正确答案: A

5、我们想要在HTML文档中加入图像,可以使用()标记来达到要求。

A、picture

B、source

C、img

D、pic

正确答案: C

6、我们想要为网页中的文字加上超链接,可以采用()标记达到要求。

A、 source

B、lj

C、a

D、link

正确答案: C

7、以下选项中,哪个全部都是表格标签?

A、

B、

C、

D、

正确答案: B

8、HTML中哪个可以产生文本框?

A、

B、

C、

D、

正确答案: C

9、下列不属于HTML5表单新增元素的是()

A、number

B、range

C、email

D、nav

正确答案: D

10、HTML5 中,哪个属性用于规定输入字段是必填的?

A、required

B、formvalidate

C、validate

D、placeholder

正确答案: A

11、下列那项技术可以用于帮助网页设计时使页面具有统一、专业的外观?

A、HTML

B、DHTML

C、CSS

D、URL

正确答案: C

12、在HTML文档中,引用外部样式表的正确位置是?

A、文档的末尾

B、部分

C、文档的顶部

D、部分

正确答案: B

13、有一样式表规则:H3 {color : blue ;font-size : 10pt},以下说法正确的是( )

A、H3是选择器

B、blue属性,color是属性值

C、样式表中的冒号(:)可以用 = 替代

D、这个样式表属于类样式表

正确答案: A

14、下列选项中可以用来设置字体大小的是( )

A、font-weight:bold

B、style:bold

C、font:12px

D、font:bold

正确答案: C

15、能够设置文本加粗的样式属性是( )

A、font-weight:bold

B、style:bold

C、font:b

D、fontstyle:bold

正确答案: A

16、CSS通过css的()属性改变某个元素的文本颜色。

A、text-color

B、color

C、fgcolor

D、text-color=

正确答案: B

17、下列说法正确的是( )。

A、*是通用选择器

B、如果ghgh是id的值,那么将其前景色设为黄色的css规则是#ghgh{background-color:yellow;}

C、如果ghgh是class的值,那么将其前景色设为黄色的css规则是.ghgh{background-color:yellow;}

D、设置h3标签的字号是14px,css规则是#h3{font-size:14px;}

正确答案: A

18、在规则 #intro{color: green;}中,使用的选择器是( )。

A、标签选择器

B、元素选择器

C、类选择器

D、ID选择器

正确答案: D

19、background-repeat,默认效果是( )

A、背景图不平铺

B、背景图横向平铺

C、背景图纵向平铺

D、背景纵向和横向上平铺

正确答案: D

20、下列css语句功能是将前景色设为白色,()表述是错误的。

A、p { color: #fff; }

B、p { color: white; }

C、p { color: rgb(255,255,255); }

D、p { color:rgb(0,0,0); }

正确答案: D

21、以下哪一项不是WEB前端开发工具?

A、HBuilder

B、DEV C++

C、Sublime text

D、dreamwaver

正确答案: B

22、下列说法不正确的是( ) 。

A、块级元素在浏览器中显示时,都是从新行开始。如段落元素。

B、内联元素在浏览器中显示时,不会创建新行,仍然在文本流中,如加粗元素。

C、块级元素和内联元素可以相互转换。

D、span不是块级元素

正确答案: D

难度:难,理由,c选择的迷惑性较强,display标签可以达到此功能。

23、HTML5 之前的 HTML 版本是?

A、HTML 4.01

B、HTML 4

C、HTML 4.1

D、HTML 4.9

正确答案: A

24、下列不属于html5中语义元素的是()

A、nav

B、section

C、div

D、header

正确答案: C

25、在 HTML5 中,()属性用于规定输入字段是必填的。

A、required

B、formvalidate

C、validate

D、placeholder

正确答案: A

二.判断题(共10题,20.0分)

1、HTML标记符通常不区分大小写。

正确答案: 正确

2、网站就是一个链接的页面集合。

正确答案: 正确

3、标题标记hn,n可以取1到6之间的整数,n越小,文字越小。

正确答案: 错误

4、HTML的标记ol用于创建无序列表。

正确答案: 错误

5、id属性和class属性可以用于大多数HTML标记,两者的用法完全相同。

正确答案: 错误

6、HTML中,表示空格的特殊字符是 

正确答案: 正确

7、在HTML表格中,表格的行数等于TR标记符的个数。

正确答案: 正确

8、video是html5中用于插入音频的标记。

正确答案: 错误

9、表示表单提交方式的属性是action,它可以取post或get,取post时可以提交大量数据且保密性好。

正确答案: 错误

10、将input标记的type属性设置为checkbox可以生成复选框控件,一组复选框允许同时选多个。

正确答案: 正确

三.简答题(共2题,30.0分)

1、你对浏览器了解吗?说出你常用的浏览器,并比较一下各自的优缺点。(3-5种浏览器)

2、同学们应该浏览过不少网站了,谈谈你最喜爱的网站并说明理由。

例如,我喜爱使用淘宝,因为

1) 该网站是国内最大的销售型网站,……。

2) 设计合理,浏览方便……

3) 付款方便,安全性高,……。

考试试卷(4卷)

选择题(每题2分,共20分)

1.在下列的 HTML 中,哪个可以产生超链接?( )

A.

B.W3School

C.

D.

2.

中的TR意义?( )

A. 行 B. 列

C. 单元格之间间隔大小 D. 表格宽度

3.下面哪个不是FORM的元素?( )

A. frame B. Input

C. textarea D. select

4. 下面哪个标签可以将外部样式表文件链入到HTML文档中。( )

A.

B.

C.

D.

5.下列哪一项表示的不是按钮。( )

A.type="submit" B.type="reset"

C.type="image" D.type="button"

6.如果一个表格包括有1行4列,表格的总宽度为“699”,间距为“5”,填充为“0”,边框为“3”,每列的宽度相同,那么应将单元格定制为多少像素宽。( )

A.126 B.136

C.147 D.167

7.下列哪一项是在新窗口中打开网页文档。( )

A._self B._blank

C._top D._parent

样式表不可能实现( )功能。

A.将格式和结构分离

B.一个CSS文件控制多个网页

C. 控制图片的精确位置

D.兼容所有的浏览器

9.常用的网页图像格式有( )和( )。

,tiff B.tiff,jpg

C.gif,jpg D.tiff,png

10. 在HTML中,标记

的作用是(    )。       

A.标题标记 B.预排版标记

C.转行标记 D.文字效果标记

二.问答题(每题6分,共30分)

1. CSS中margin和padding的区别是什么?

2.将一个div定位到body的左上角,CSS代码是?

3. 在HTML文档中使用CSS样式的方式有哪些?

4.表单的action属性可以取GET和POST,请问两者之间的区别是什么?

5. 请解释css sprites,其作用是什么?

三.程序题(共50分)

1.请利用html完成图1所示的表格,利用CSS设置表格背景色为#CCC,字体宋体,字号14px,居中对齐。(10分)

图1 程序题1效果

2.请利用html、css完成图文混排,图片名为,与网页文件在同一目录下,效果如图2所示。

图2 程序题2效果

3.请利用html、css完成图3页面布局,其中(20分)

(1)header宽度充满页面,高度自定;

(2)left部分占页面30%;

(3)nav1……nav4为导航,当鼠标悬浮时:下划线,背景黄色,前景红色;

(4)footer宽度充满页面,高度自定;

图3程序题3效果

4.用HTML标记语言实现个人注册信息表单,使其运行结果如图4所示:

(其中职业选项包括学生、职员、经理)(10分)

图4 程序题4效果

…………………装…………………………订…………………………线…………………………………………考试试卷(5卷)

一、选择题(每题2分,共20分)

1、目前在Internet上应用最为广泛的服务是( )

A.FTP服务 B.WWW服务 C.Telnet服务 D.Gopher服务

2、在域名系统中,域名采用( )

A.树型命名机制 B.星型命名机制

C.层次型命名机制 D.网状型命名机制

3、HTTP协议是一种( )

A.文件传输协议 B.远程登录协议

C.邮件协议 D.超文本传输协议

4、HTML语言中的换行标记是( )

A. B.

C. D.<p> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>5、.在HTML中,标题字体标记<hx>中x的最大取值是( ) </p><p style="text-indent: 2em;";>A.4 B.5 C.6 D.7 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>6、以下不能用来定义表格内容的标记为( ) </p><p style="text-indent: 2em;";>A.</p><p style="text-indent: 2em;";> B.<tr> C.<th> D.<td> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>7、下面不是组成一个HTML文件基本结构标记的是( ) </p><p style="text-indent: 2em;";>A.<html> </html> B.<head> </head> </p><p style="text-indent: 2em;";>C.<form> </form> D.<body> </body> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>8、加入一条水平线的HTML代码是( ) </p><p style="text-indent: 2em;";>A. <hr> B. </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>C. <img src="" alt="" > D. <input type="text"> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>9、在HTML中,标记<pre>的作用是( ) </p><p style="text-indent: 2em;";>A.标题标记 B.预排版标记 </p><p style="text-indent: 2em;";>C.转行标记 D.文字效果标记 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>10、构成Web站点的最基本的单位是( ) </p><p style="text-indent: 2em;";>A.网站 B.主页 C.网页 D.文字 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>二.问答题(每题6分,共30分) </p><p style="text-indent: 2em;";>1. 简述HTML、CSS在网页制作中各自的作用。 </p><p style="text-indent: 2em;";>2. 简述内联元素和块级元素的区别。 </p><p style="text-indent: 2em;";>3. 简述Web工作原理。 </p><p style="text-indent: 2em;";>4. 经过一学期的学习,你认为如何建设一个好的网站? </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>5.什么是HTML?简述HTML文档的基本结构。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>三.编程题(共50分) </p><p style="text-indent: 2em;";>1. 利用HTML和CSS实现下图所示网页。(20分) </p><p style="text-indent: 2em;";>HTML要求: </p><p style="text-indent: 2em;";> 用div标签实现网页所示内容 </p><p style="text-indent: 2em;";>CSS要求: </p><p style="text-indent: 2em;";>Body标签: </p><p style="text-indent: 2em;";>背景:黄色 </p><p style="text-indent: 2em;";>字色:白色 </p><p style="text-indent: 2em;";>字号:20 对齐:居中 </p><p style="text-indent: 2em;";>上边距:40px </p><p style="text-indent: 2em;";>盒子一: </p><p style="text-indent: 2em;";>背景:红色 </p><p style="text-indent: 2em;";>宽度:60% 高度80px </p><p style="text-indent: 2em;";>边框:宽度1px,黑色,实线 </p><p style="text-indent: 2em;";>浮动方式:居左 </p><p style="text-indent: 2em;";>盒子二: </p><p style="text-indent: 2em;";>背景:红色 </p><p style="text-indent: 2em;";>宽度35% 高度80px </p><p style="text-indent: 2em;";>边框:宽度1px,黑色,实线 </p><p style="text-indent: 2em;";>浮动方式:居右 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>2、编写样式规则,实现鼠标移到div上时,其形状由方形变为圆形。div的宽高均是100px,背景为蓝色,变化时间为3秒。(10分) </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>3、在页面中插入一个表格,用于放置两幅人物图片和他们的名字,编写样式规则实现如下图所示的效果。(20分) </p><p style="text-indent: 2em;";>(1)页面背景颜色为#ccc,字号为16px,行距为1.2倍; </p><p style="text-indent: 2em;";>(2)图片宽97px,高137px; </p><p style="text-indent: 2em;";>(3)表格宽214px,具有蓝色、1px的实线边框,单元格具有1px的黑色虚线框,表格内的文本居中,表格的外边距是10px。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p><p><h2></h2></p><img style="max-width:35%; max-height:35%" src="/uploads/image/0725.jpg" alt="HTML5考试试卷"/></img></p> </div> <!--分页导航--> <div class="th_page th_page_color4 th_top"> </div> <!--内容底部广告--> <div class="th_ad3 th_top"> <div class="pcd_ad"><script src="https://www.4u4v.net/it/d/js/acmsd/thea22.js"></script></div> <div class="mbd_ad"></div> </div> <div class="umCopyright"> <p>本文发布于:2024-02-08 07:07:32,感谢您对本站的认可!</p> <p>本文链接:<a href="https://www.4u4v.net/it/170734725266890.html" target="_blank" style="color:#999">https://www.4u4v.net/it/170734725266890.html</a></p> <p>版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。</p> </div> <!--上一篇下一篇--> <div class="detail-arr"> <div class="detail-arr-left">上一篇:<a href='https://www.4u4v.net/it/170734722566889.html'>响应式网页设计中常见的导航栏固定效果实现技巧(一)</a></div> <div class="detail-arr-right">下一篇:<a href='https://www.4u4v.net/it/170734730166891.html'>html基本语法及常用控件的使用方法</a></div> </div> <!--内容页tags--> <div class="detail-tags"> <i class="iconfont icon-x-tags"></i> 标签:<a href="https://www.4u4v.net/it/tags/%E6%A0%87%E8%AE%B0_0.html" target="_blank">标记</a>   <a href="https://www.4u4v.net/it/tags/%E5%85%83%E7%B4%A0_0.html" target="_blank">元素</a>   <a href="https://www.4u4v.net/it/tags/%E8%AE%BE%E7%BD%AE_0.html" target="_blank">设置</a>   <a href="https://www.4u4v.net/it/tags/%E8%A1%A8%E6%A0%BC_0.html" target="_blank">表格</a>   <a href="https://www.4u4v.net/it/tags/%E5%B1%9E%E6%80%A7_0.html" target="_blank">属性</a></div> </section> <!--评论--> <a name="comments" id="comments"></a> <div class="showpage" id="plpost"> <link href="https://www.4u4v.net/it/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论(共有 <span id="infocommentnumarea">0</span> 条评论)</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗?"); obj.saytext.focus(); return false; } return true; } </script> <form action="https://www.4u4v.net/it/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="https://www.4u4v.net/it/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定,不要发布广告和违法内容!"></textarea> <script src="https://www.4u4v.net/it/d/js/js/plface.js"></script>    <table width='100%' align='left' cellpadding=3 cellspacing=1 bgcolor='#FFF'> <tr> <td width="80%" height="40" bgcolor="#FFFFFF">验证码:<input name="key" type="text" class="inputText" size="16" /> <img src="https://www.4u4v.net/it/e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='https://www.4u4v.net/it/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> </td> <td width="20%" height="40" bgcolor="#FFFFFF"> <input name="sumbit" type="submit" value="提交评论" tabindex="6" style="border-radius: 5px;font-size: 16px;background: #e94c3d none repeat scroll 0% 0%;border: 0px none;margin: 0px 16px;padding: 1px 16px;height: 33px;line-height: 30px;color: rgb(255, 255, 255);opacity: 0.95;"> <input name="id" type="hidden" id="id" value="66890" /> <input name="classid" type="hidden" id="classid" value="41" /> <input name="enews" type="hidden" id="enews" value="AddPl" /> <input name="repid" type="hidden" id="repid" value="0" /> <input type="hidden" name="ecmsfrom" value="https://www.4u4v.net/it/170734725266890.html"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table></form> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td bgcolor="#FFFFFF" id="infocommentarea"></td> </tr> </table> <script src="https://www.4u4v.net/it/e/extend/infocomment/commentajax.php?classid=41&id=66890"></script> </div> </div> </div> <!--侧边栏--> <div class="col-md-3 col-xs-12"> <!--推荐文章--> <div class="thleftcon wap_top th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">推荐文章</span></div> <ul class="th-5" style="padding-top:0px"> <li> <span class="date">12-19</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/1734573086563307.html" title="南昌勇星喷绘有限公司介绍企业发展分析报告" target="_blank">南昌勇星喷绘有限公司介绍企业发展分析报告</a></li> <li> <span class="date">12-19</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/1734573072563306.html" title="南昌市灌城纸箱厂介绍企业发展分析报告" target="_blank">南昌市灌城纸箱厂介绍企业发展分析报告</a></li> <li> <span class="date">12-19</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/1734573059563305.html" title="2020新版江西省南昌市进贤县装修公司工商企业公司商家名录名单黄页联" target="_blank">2020新版江西省南昌市进贤县装修公司工商企业公司商家名录名单黄页联</a></li> <li> <span class="date">12-19</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/1734573036563304.html" title="南昌市瑞洋实业有限公司企业信用报告-天眼查" target="_blank">南昌市瑞洋实业有限公司企业信用报告-天眼查</a></li> <li> <span class="date">12-19</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/1734572995563303.html" title="南昌鸿图制衣有限公司介绍企业发展分析报告" target="_blank">南昌鸿图制衣有限公司介绍企业发展分析报告</a></li> <li> <span class="date">12-19</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/1734572981563302.html" title="南昌庭轩制衣有限公司介绍企业发展分析报告" target="_blank">南昌庭轩制衣有限公司介绍企业发展分析报告</a></li> <li> <span class="date">12-19</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/1734572968563301.html" title="南昌宇涂图文广告营业部介绍企业发展分析报告" target="_blank">南昌宇涂图文广告营业部介绍企业发展分析报告</a></li> <li> <span class="date">12-19</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/1734572943563300.html" title="南昌新望彩印有限公司介绍企业发展分析报告" target="_blank">南昌新望彩印有限公司介绍企业发展分析报告</a></li> <li> <span class="date">12-19</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/1734572929563299.html" title="南昌比林门窗店介绍企业发展分析报告" target="_blank">南昌比林门窗店介绍企业发展分析报告</a></li> <li> <span class="date">12-19</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/1734572916563298.html" title="南昌亿诺印刷品销售有限公司介绍企业发展分析报告" target="_blank">南昌亿诺印刷品销售有限公司介绍企业发展分析报告</a></li> </ul> </div> <!--右侧广告1--> <div class="th_ad3 th_top"> <div> <script src='https://www.4u4v.net/it/d/js/acmsd/thea15.js'></script> </div> </div> <!--按点击量排序--> <div class="thleftcon th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">排行榜</span></div> <ul class="th-5"> <li class="th_li"> <div class="bottom1 gundongimg"> <a href="https://www.4u4v.net/it/17061710611.html" title="JS - JavaScript(一种直译式脚本语言)"><img class="th_img banner_bottom" style="height:90px" src="https://www.4u4v.net/it/skin/8n6/images/notimg.gif" /></a> </div> <div class="bottom2 gundongimg"> <a class="th_hover_a4" href="https://www.4u4v.net/it/17061710611.html" title="JS - JavaScript(一种直译式脚本语言)" target="_blank">JS - JavaScript(一种直译式脚本语言)</a> <div class="bottom2_info"> JS 即 JavaScript。JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的 </div> </div> </li> <li><span class="date">527℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/17061780993.html" title="idea 快捷键 类方法" target="_blank">idea 快捷键 类方法</a></li> <li><span class="date">60℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/17061781314.html" title="idea 快捷键 方法" target="_blank">idea 快捷键 方法</a></li> <li><span class="date">573℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/17061781625.html" title="idea重写方法的快捷键" target="_blank">idea重写方法的快捷键</a></li> <li><span class="date">64℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/17061781826.html" title="IDEA快捷键" target="_blank">IDEA快捷键</a></li> <li><span class="date">58℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/17061782147.html" title="idea方法注解快捷键" target="_blank">idea方法注解快捷键</a></li> <li><span class="date">139℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/17061783468.html" title="idea重写方法的快捷键2篇" target="_blank">idea重写方法的快捷键2篇</a></li> <li><span class="date">48℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/17061783809.html" title="idea中artifacts" target="_blank">idea中artifacts</a></li> <li><span class="date">47℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/170617839610.html" title="idea的artifacts" target="_blank">idea的artifacts</a></li> <li><span class="date">37℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.4u4v.net/it/170617848211.html" title="IntelliJIDEA上JFinal开发环境搭建手册" target="_blank">IntelliJIDEA上JFinal开发环境搭建手册</a></li> </ul> </div> <!--右侧广告2--> <div class="th_ad3 th_top"> <div> <script src='https://www.4u4v.net/it/d/js/acmsd/thea16.js'></script> </div> </div> <!--标签云--> <div class="thleftcon th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">热门标签</span></div> <ul class="th-7 th_tag4"> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E7%B3%BB%E7%BB%9F">系统</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%95%B0%E6%8D%AE">数据</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E4%BD%BF%E7%94%A8">使用</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%9C%8D%E5%8A%A1%E5%99%A8">服务器</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E8%BD%AF%E4%BB%B6">软件</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%96%B9%E6%B3%95">方法</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E8%BF%9B%E8%A1%8C">进行</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E5%87%BD%E6%95%B0">函数</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E9%A1%B9%E7%9B%AE">项目</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%96%87%E4%BB%B6">文件</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=Windows">Windows</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E4%BB%A3%E7%A0%81">代码</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E7%94%B5%E8%84%91">电脑</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E4%BC%81%E4%B8%9A">企业</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E9%9C%80%E8%A6%81">需要</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E8%AE%A1%E7%AE%97%E6%9C%BA">计算机</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E8%AF%AD%E8%A8%80">语言</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E7%94%A8%E6%88%B7">用户</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E7%A8%8B%E5%BA%8F">程序</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=python">python</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%95%B0%E6%8D%AE%E5%BA%93">数据库</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=java">java</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%95%99%E7%A8%8B">教程</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E8%AE%BE%E8%AE%A1">设计</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E5%B7%A5%E4%BD%9C">工作</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80">编程语言</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%8A%80%E6%9C%AF">技术</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%9C%89%E5%93%AA%E4%BA%9B">有哪些</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=linux">linux</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E5%BC%80%E5%8F%91">开发</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%8A%A5%E5%91%8A">报告</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%9A%82%E6%97%A0">暂无</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E5%86%85%E5%AE%B9">内容</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E7%BD%91%E7%BB%9C">网络</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E6%93%8D%E4%BD%9C">操作</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E5%8A%9F%E8%83%BD">功能</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E5%88%86%E6%9E%90">分析</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E5%91%BD%E4%BB%A4">命令</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E7%BD%91%E7%AB%99">网站</a></li> <li><a href="https://www.4u4v.net/it/e/tags/?tagname=%E5%AD%97%E7%AC%A6%E4%B8%B2">字符串</a></li> </ul> </div> <!--右侧广告3--> <div class="th_ad3 th_top"> <div> <script src='https://www.4u4v.net/it/d/js/acmsd/thea17.js'></script> </div> </div> </div> </div> </div> <!--页面底部--> <div class="footer2"> <p>Copyright ©2019-2022 Comsenz Inc.Powered by © <a rel="external nofollow" href="https://beian.miit.gov.cn/"> </a> </p> <a href="https://www.4u4v.net/it/sitemap/news_1.xml">网站地图1</a> <a href="https://www.4u4v.net/it/sitemap/news_2.xml">网站地图2</a> <a href="https://www.4u4v.net/it/sitemap/news_3.xml">网站地图3</a> <a href="https://www.4u4v.net/it/sitemap/news_4.xml">网站地图4</a> <a href="https://www.4u4v.net/it/sitemap/news_5.xml">网站地图5</a> <a href="https://www.4u4v.net/it/sitemap/news_6.xml">网站地图6</a> <a href="https://www.4u4v.net/it/sitemap/news_7.xml">网站地图7</a> <a href="https://www.4u4v.net/it/sitemap/news_8.xml">网站地图8</a> <a href="https://www.4u4v.net/it/sitemap/news_9.xml">网站地图9</a> <a href="https://www.4u4v.net/it/sitemap/news_10.xml">网站地图10</a> <a href="https://www.4u4v.net/it/sitemap/news_11.xml">网站地图11</a> <a href="https://www.4u4v.net/it/sitemap/news_12.xml">网站地图12</a> <a href="https://www.4u4v.net/it/sitemap/news_13.xml">网站地图13</a> <a href="https://www.4u4v.net/it/sitemap/news_14.xml">网站地图14</a> <a href="https://www.4u4v.net/it/sitemap/news_15.xml">网站地图15</a> <a href="https://www.4u4v.net/it/sitemap/news_16.xml">网站地图16</a> <a href="https://www.4u4v.net/it/sitemap/news_17.xml">网站地图17</a> <a href="https://www.4u4v.net/it/sitemap/news_18.xml">网站地图18</a> <a href="https://www.4u4v.net/it/sitemap/news_19.xml">网站地图19</a> <a href="https://www.4u4v.net/it/sitemap/news_20.xml">网站地图20</a> <a href="https://www.4u4v.net/it/sitemap/news_21.xml">网站地图21</a> <a href="https://www.4u4v.net/it/sitemap/news_22.xml">网站地图22/a> <a href="https://www.4u4v.net/it/sitemap/news_23.xml">网站地图23</a> </div> <!--右侧悬浮客服--> <div class="thgotop"> <ul> <li id="guan" class="ditop th_bg4"> <div class="yewan"> <i class="iconfont icon-guandeng"></i> <span class="">我要关灯</span> </div> <div class="baitian"> <i class="iconfont icon-zu"></i> <span class="">我要开灯</span> </div> </li> <li id="go_top" class="ditop th_bg4"> <i class="iconfont icon-zhiding"></i> <span>返回顶部</span> </li> </ul> </div> <script type="text/javascript" > var swiper = new Swiper('.thbanner', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: true, autoplay: { delay: 1500, stopOnLastSlide: false,//如果设置为true,当切换到最后一个slide时停止自动切换 disableOnInteraction: true,//用户操作swiper之后,是否禁止autoplay }, pagination: {//分页器 el: '.swiper-pagination', clickable: true,//点击分页器的指示点分页器会控制Swiper切换 }, }); var swiper = new Swiper('.thslide2', { slidesPerView: 4, spaceBetween: 10, loop: true, autoplay: { delay: 1500, stopOnLastSlide: false,//如果设置为true,当切换到最后一个slide时停止自动切换 disableOnInteraction: false,//用户操作swiper之后,是否禁止autoplay } }); </script> <script type="text/javascript" src="https://www.4u4v.net/it/skin/8n6/js/main.js"></script> <!--百度自动推送--> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>