单元1:网站基础入门

1.1 blog网站的建立随堂测验

1、以下哪个工具是用来开发网页的:
    A、word
    B、excel
    C、hbuilder
    D、photo shop

2、以下那种网页的命名方式是正确的:
    A、随意命名
    B、中文词语
    C、英文单词
    D、数字

3、标题的html代码是:
    A、html
    B、title
    C、body
    D、head

4、img文件夹的作用是什么:

5、css文件夹的作用是什么:

1.2 滚动的文字、超连接的制作随堂测验

1、一般html代码都是以何种方式出现:
    A、单独出现
    B、成对出现
    C、随机出现
    D、根据用户需求出现

2、html标签需要放在那种标记内:
    A、<>
    B、()
    C、[]
    D、{}

3、以下那种超连接格式正确:
    A、<ahref="https://www.qq.com">腾讯</a>
    B、<a href="https://www.qq.com"腾讯</a>
    C、<a href="https://www.qq.com">腾讯<a>
    D、<a href="https://www.qq.com">腾讯</a>

4、滚动文字的html代码是什么:

5、超连接的html标签是什么:

1.3 新闻内容页面的制作随堂测验

1、html代码h1~h6的含义是:
    A、网页主体
    B、标题
    C、网页头部
    D、网页尾部

2、p标签的含义是:
    A、paper
    B、page
    C、paragraph
    D、purple

3、br标签的含义是:

4、i标签的含义是:

5、b标签的含义是:

1.4 图片显示、图片链接随堂测验

1、图片是不可以做超连接的。

2、一张图片只能制作一个超连接。

3、图片的html标签是:

4、图片标签的src属性的作用是:

5、图片标签的alt属性的作用是:

1.5 天气预报随堂测验

1、制作天气预报一般采用哪个html标签:
    A、weather
    B、img
    C、iframe
    D、tianqi

2、<iframe>的name和超连接的target的值要保持一致,且要唯一。

单元1测试

1、以下哪个工具是用来开发网页的:
    A、word
    B、excel
    C、hbuilder
    D、photo shop

2、以下那种网页的命名方式是正确的:
    A、随意命名
    B、中文词语
    C、英文单词
    D、数字

3、标题的html代码是:
    A、html
    B、title
    C、body
    D、head

4、一般html代码都是以何种方式出现:
    A、单独出现
    B、成对出现
    C、随机出现
    D、根据用户需求出现

5、html标签需要放在那种标记内:
    A、<>
    B、()
    C、[]
    D、{}

6、以下那种超连接格式正确:
    A、<ahref="http://www.qq.com">腾讯</a>
    B、<a href="http://www.qq.com"腾讯</a>
    C、<a href="http://www.qq.com">腾讯<a>
    D、<a href="http://www.qq.com">腾讯</a>

7、html代码h1~h6的含义是:
    A、网页主体
    B、标题
    C、网页头部
    D、网页尾部

8、p标签的含义是:
    A、paper
    B、page
    C、paragraph
    D、purple

9、制作天气预报一般采用哪个html标签:
    A、weather
    B、img
    C、iframe
    D、tianqi

10、图片是不可以做超连接的。

11、一张图片只能制作一个超连接。

12、<iframe>的name和超连接的target的值要保持一致,且要唯一。

13、img文件夹的作用是什么:

14、css文件夹的作用是什么:

15、滚动文字的html代码是什么:

16、超连接的html标签是什么:

17、br标签的含义是:

18、i标签的含义是:

19、b标签的含义是:

20、图片的html标签是:

21、图片标签的src属性的作用是:

22、图片标签的alt属性的作用是:

单元1作业

1、开发电子商务网站,请写出网页的名称以及对应的中文含义,网页个数不得低于5个。

2、marquee标记的缺点是什么?

3、iframe标签还可以在哪些场景下使用?

单元2:表单基础及CSS样式入门

2.1 HTML表单基础随堂测验

1、以下哪个标签用于为用户输入创建 HTML 表单:
    A、html
    B、form
    C、body
    D、a

2、input标签设置成单选按钮,那么其type的值是:

3、input标签设置成复选按钮,那么其type的值是:

4、input标签设置成单选按钮,那么其type的值是:

5、html中,下拉列表的标签是:

2.2 input标签的使用随堂测验

1、input必须要用户填入数据的属性值是:

2、input提示用户输入的属性值是:

3、input只读的属性值是:

4、input设置成密码,type的属性值是:

5、input使用正则表达式验证各类数据的属性值是:

2.3 网页背景、文字修饰、超连接a修饰随堂测验

1、以下哪个选项可以设置字体、页边距、背景等属性:
    A、.body
    B、.baby
    C、body
    D、baby

2、以下哪个选项可以设置字体颜色为白色:
    A、font-color:white;
    B、font-color:black;
    C、color:white;
    D、color:black;

3、以下哪个选项可以设置背景图片横向重复:
    A、repeat
    B、repeat-x
    C、repeat-y
    D、no-repeat

4、以下哪个选项可以设置网页字体行高:
    A、height
    B、line-height
    C、high
    D、weight

5、body样式可以设置高度:

6、a:link代表什么含义:

7、a:hover代表什么含义:

8、a:active代表什么含义:

9、a:visited代表什么含义:

10、a样式包含了哪两种样式:

2.4 新闻内容页面的文字修饰随堂测验

1、以下哪个选项为文本两端对齐:
    A、text-align: left;
    B、text-align: right;
    C、text-align: justify;
    D、text-align: none;

2、CSS中英文单词间距属性为:

3、CSS中英文字母间距属性为:

4、CSS中中文单词间距属性为:

5、CSS中中文字母间距属性为:

6、字体间距只对英文单词有效的是:

7、字体间距只对中文和英文都有效的是:

8、CSS中规定文本块中首行文本缩进的属性为:

2.5 元素选择器、ID选择器、CSS类选择、全局样式、局部样式随堂测验

1、以下关于CSS优先级的论述中,哪个是正确的:
    A、局部样式的优先级高于全局样式
    B、全局样式优先级高于局部优先级
    C、全局样式优先级等于局部优先级
    D、对于一个页面元素,如果他已使用内嵌样式表,那么外部样式表对它不起作用

2、id选择器采用哪个符号来定义:

3、id属性可以在每个html文档中出现多少次:

4、css类选择器采用哪个符号来定义:

5、类属性可以在每个html文档中出现多少次:

6、并列关系的两个样式中间用什么符号(写中文):

7、从属关系的两个样式中间用什么符号(写中文):

8、h1>strong采用了哪种css选择器:

9、选择器用于选取指定选择器的首字母的是:

10、选择器匹配属性值以指定值结尾的每个元素的是:

2.6 内联式、嵌入式、外部式样式、CSS样式优先级、CSS重置样式随堂测验

1、以下哪个选项的优先级是正确的:
    A、id选择器指定的样式>类选择器指定的样式>元素类型选择器指定的样式
    B、id选择器指定的样式>元素类型选择器指定的样式>类选择器指定的样式
    C、类选择器指定的样式>id选择器指定的样式>元素类型选择器指定的样式
    D、类选择器指定的样式>元素类型选择器指定的样式>id选择器指定的样式

2、CSS的三种样式的优先级正确的是:
    A、内联样式>内部样式>外部样式
    B、内联样式>外部样式>内部样式
    C、内部样式>外部样式>内联样式
    D、内部样式>内联样式>外部样式

3、CSS中“!important”的作用是什么:
    A、注释
    B、优先级最低
    C、优先级最高
    D、失效

4、CSS重置样式的作用是什么:
    A、浏览器重启
    B、为了让各个浏览器的CSS样式有一个统一的基准,使HTML元素样式在跨浏览器时有一致性的效果。
    C、防止浏览器死机
    D、无任何作用

5、CSS的三种样式:

单元2测试

1、以下哪个标签用于为用户输入创建 HTML 表单:
    A、html
    B、form
    C、body
    D、a

2、以下哪个选项可以设置字体、页边距、背景等属性:
    A、.body
    B、.baby
    C、body
    D、baby

3、以下哪个选项可以设置字体颜色为白色:
    A、font-color:white;
    B、font-color:black;
    C、color:white;
    D、color:black;

4、以下哪个选项可以设置背景图片横向重复:
    A、repeat
    B、repeat-x
    C、repeat-y
    D、no-repeat

5、以下哪个选项可以设置网页字体行高:
    A、height
    B、line-height
    C、high
    D、weight

6、以下哪个选项为文本两端对齐:
    A、text-align: left;
    B、text-align: right;
    C、text-align: justify;
    D、text-align: none;

7、以下关于CSS优先级的论述中,哪个是正确的:
    A、局部样式的优先级高于全局样式
    B、全局样式优先级高于局部优先级
    C、全局样式优先级等于局部优先级
    D、对于一个页面元素,如果他已使用内嵌样式表,那么外部样式表对它不起作用

8、body样式可以设置高度:

9、input标签设置成单选按钮,那么其type的值是:

10、input标签设置成复选按钮,那么其type的值是:

11、input标签设置成单选按钮,那么其type的值是:

12、html中,下拉列表的标签是:

13、input必须要用户填入数据的属性值是:

14、input提示用户输入的属性值是:

15、input只读的属性值是:

16、input设置成密码,type的属性值是:

17、input使用正则表达式验证各类数据的属性值是:

18、a:link代表什么含义:

19、a:hover代表什么含义:

20、a:active代表什么含义:

21、a:visited代表什么含义:

22、a样式包含了哪两种样式:

23、CSS中英文单词间距属性为:

24、CSS中英文字母间距属性为:

25、CSS中中文单词间距属性为:

26、CSS中中文字母间距属性为:

27、字体间距只对英文单词有效的是:

28、字体间距只对中文和英文都有效的是:

29、CSS中规定文本块中首行文本缩进的属性为:

30、id选择器采用哪个符号来定义:

31、id属性可以在每个html文档中出现多少次:

32、css类选择器采用哪个符号来定义:

33、类属性可以在每个html文档中出现多少次:

34、并列关系的两个样式中间用什么符号(写中文):

35、CSS的三种样式:

单元2作业

1、2.3 网页背景、文字修饰、超连接a修饰

2、2.6 内联式、嵌入式、外部式样式、CSS样式优先级

单元3:DIV基础、CSS修饰及网页经典布局

3.1 DIV基本属性、块级元素和内联元素随堂测验

1、以下哪个选项将元素显示为块级元素:
    A、display: inline;
    B、display: block;
    C、display: none;
    D、display: inherit;

2、以下哪个选项将元素显示为内联元素:
    A、display: inline;
    B、display: block;
    C、display: none;
    D、display: inherit;

3、DIV是块级元素。

4、DIV默认是看不见的:

5、span是内联元素。

6、span默认是看不见的。

3.2 盒子模型基础、margin和padding随堂测验

1、div:width:300px,height:300px,border:50px,padding:50px,margin:50px,其实际宽度是多少:
    A、600px
    B、500px
    C、400px
    D、300px

2、div:width:300px,height:300px,border:50px,padding:50px,margin:50px,其实际高度是多少:
    A、600px
    B、500px
    C、400px
    D、300px

3、padding:A B C D;中A、B、C、D分别代表哪四个值:
    A、上下左右
    B、左右上下
    C、上左下右
    D、上右下左

4、margin代表外边距:

5、padding代表内边距。

3.3 CSS浮动定位、网页分块样式、布局、clearfix和clear随堂测验

1、左右浮动生效的元素为:
    A、任何元素
    B、块状元素
    C、内联元素
    D、仅仅是div元素

2、clearfix的原理是通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点“.” ,并且设置clear属性清除浮动。

3、div居中的css代码:

4、文本左右居中的css代码:

5、div的高度为50px,使其内部文字上下居中的css代码:

6、左浮动的代码:

7、右浮动的代码:

8、clear:both;的作用:

3.4 多种经典布局随堂测验

1、关于文本对齐,源代码设置不正确的一项是:
    A、居中对齐:<div align="middle">…</div>
    B、居右对齐:<div align="right">…</div>
    C、居左对齐:<div align="left">…</div>
    D、两端对齐:<div align="justify">…</div>

2、关于float描述错误的是:
    A、float:left;
    B、float:center;
    C、float:right;
    D、float:none;

3、CSS是利用什么XHTML标记构建网页布局:
    A、<dir>
    B、<div>
    C、<dis>
    D、<dif>

4、在CSS语言中下列哪一项是"左边框"的语法:
    A、border-left-width: <值>
    B、border-top-width: <值>
    C、border-left: <值>
    D、border-top-width: <值>

5、下列哪个css属性能够设置盒模型的内补丁为10.20.30.40(顺时针方向):
    A、padding:10px 20px 30px 40px;
    B、padding:10px 1px;
    C、padding:5px 20px 10px;
    D、padding:10px;

单元3测试

1、以下哪个选项将元素显示为块级元素:
    A、display: inline;
    B、display: block;
    C、display: none;
    D、display: inherit;

2、div:width:300px,height:300px,border:50px,padding:50px,margin:50px,其实际宽度是多少:
    A、600px
    B、500px
    C、400px
    D、300px

3、div:width:300px,height:300px,border:50px,padding:50px,margin:50px,其实际高度是多少:
    A、600px
    B、500px
    C、400px
    D、300px

4、padding:A B C D;中A、B、C、D分别代表哪四个值:
    A、上下左右
    B、左右上下
    C、上左下右
    D、上右下左

5、左右浮动生效的元素为:
    A、任何元素
    B、块状元素
    C、内联元素
    D、仅仅是div元素

6、关于文本对齐,源代码设置不正确的一项是:
    A、居中对齐:<div align="middle">…</div>
    B、居右对齐:<div align="right">…</div>
    C、居左对齐:<div align="left">…</div>
    D、两端对齐:<div align="justify">…</div>

7、关于float描述错误的是:
    A、float:left;
    B、float:center;
    C、float:right;
    D、float:none;

8、CSS是利用什么XHTML标记构建网页布局:
    A、<dir>
    B、<div>
    C、<dis>
    D、<dif>

9、在CSS语言中下列哪一项是"左边框"的语法:
    A、border-left-width: <值>
    B、border-top-width: <值>
    C、border-left: <值>
    D、border-top-width: <值>

10、下列哪个css属性能够设置盒模型的内补丁为10.20.30.40(顺时针方向):
    A、padding:10px 20px 30px 40px;
    B、padding:10px 1px;
    C、padding:5px 20px 10px;
    D、padding:10px;

11、以下哪个选项将元素显示为内联元素:
    A、display: inline;
    B、display: block;
    C、display: none;
    D、display: inherit;

12、DIV是块级元素。

13、DIV默认是看不见的。

14、span是内联元素。

15、span默认是看不见的。

16、margin代表外边距。

17、padding代表内边距。

18、clearfix的原理是通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点“.” ,并且设置clear属性清除浮动。

19、div居中的css代码:

20、文本左右居中的css代码:

21、div的高度为50px,使其内部文字上下居中的css代码:

22、左浮动的代码:

23、右浮动的代码:

24、clear:both;的作用:

单元3作业

1、3.2 盒子模型基础、margin和padding

2、3.4 多种经典布局

单元4:表格基本知识、表格制作简历

4.1 表格基本知识、细边框表格三种做法随堂测验

1、表格标记的基本结构是:
    A、<tr></tr>
    B、<br></br>
    C、<table></table>
    D、<bg></bg>

2、以下标记中,用于定义一个单元格的是:
    A、<td> </td>
    B、<tr>…</tr>
    C、<table>…</table>
    D、<caption>…</caption>

3、要使表格的边框不显示,应设置border的值是:
    A、1
    B、0
    C、2
    D、3

4、在HTML的<th>和<td>标记中,不属于valign属性的是:
    A、top
    B、middle
    C、low
    D、bottom

5、HTML中,合并两个单元格应该使用的属性是:
    A、colspan
    B、nowrap
    C、colwrap
    D、nospan

6、如果一个表格包括有1行4列,表格的总宽度为“699”,间距为“5”,填充为“0”,边框为“3”,每列的宽度相同,那么应将单元格定制为多少像素宽:
    A、126
    B、136
    C、147
    D、167

4.2 表格隔行变色、鼠标移上去行变色随堂测验

1、thead的含义:

2、tr的含义:

3、td的含义:

4、tbody的含义:

5、tfoot的含义:

4.3 个人简历的制作-框架制作随堂测验

1、border-collapse的含义是:
    A、用于表格属性, 表示表格的两边框合并为一条
    B、用于表格属性, 表示去除表格边框
    C、用于表格属性, 表示表格的边框分成两条
    D、用于表格属性, 表示表格的单元格具有边框

2、cellspacing的含义是:

3、cellpadding的含义是:

4、colspan的含义是:

5、rowspan的含义是:

单元4测试

1、表格标记的基本结构是:
    A、<tr></tr>
    B、<br></br>
    C、<table></table>
    D、<bg></bg>

2、以下标记中,用于定义一个单元格的是:
    A、<td> </td>
    B、<tr>…</tr>
    C、<table>…</table>
    D、<caption>…</caption>

3、要使表格的边框不显示,应设置border的值是:
    A、1
    B、0
    C、2
    D、3

4、在HTML的<th>和<td>标记中,不属于valign属性的是:
    A、top
    B、middle
    C、low
    D、bottom

5、HTML中,合并两个单元格应该使用的属性是:
    A、colspan
    B、nowrap
    C、colwrap
    D、nospan

6、如果一个表格包括有1行4列,表格的总宽度为“699”,间距为“5”,填充为“0”,边框为“3”,每列的宽度相同,那么应将单元格定制为多少像素宽:
    A、126
    B、136
    C、147
    D、167

7、border-collapse的含义是:
    A、用于表格属性, 表示表格的两边框合并为一条
    B、用于表格属性, 表示去除表格边框
    C、用于表格属性, 表示表格的边框分成两条
    D、用于表格属性, 表示表格的单元格具有边框

8、thead的含义:

9、tr的含义:

10、td的含义:

11、tbody的含义:

12、tfoot的含义:

13、cellspacing的含义是:

14、cellpadding的含义是:

15、colspan的含义是:

16、rowspan的含义是:

单元4作业

1、4.1 表格基本知识、细边框表格三种做法

2、4.2 表格隔行变色、鼠标移上去行变色

单元5:表格制作简历、表格制作QQ邮箱

5.1 个人简历的制作-内容填充随堂测验

1、网页的表格可以像word一样拖拉。

2、表格不可以嵌套使用。

3、网页可以用表格进行排版。

4、表格是主要用来显示数据。

5、做网络爬虫很难捕获到表格的数据。

5.2 qq邮箱界面制作-框架制作随堂测验

1、制作个人简历时候,不需要添加form标签。

2、制作个人简历时候,最好新建独立的样式表。

3、 代表空格。

4、<td colspan="5"> </td>代表合并5列。

5、<td class="col-four bg">  </td>代表td同时采用了col-four和bg两种样式。

5.3 qq邮箱界面制作-上部、左部内容填充随堂测验

1、<table cellpadding="0" cellspacing="0">代表表格单元格之间的间距和单元格内的间距都是0。

2、表格制作qq邮箱界面时,采用了表格嵌套。

3、表格制作qq邮箱界面时,采用了iframe标签。

4、iframe不可以采用class类进行修饰。

5、<td valign="top">代表单元格内的内容靠上。

5.4 qq邮箱界面制作-右部内容填充随堂测验

1、html,body { margin: 0; padding: 0; width: 100%; height: 100%; }代表需要撑满整个浏览器

2、.left { float: left; } .right { float: right; } 代表反复使用的公共样式

3、.logo { width: 201px; height: 55px; background-image: url(../img/logo.png); background-repeat: no-repeat; } 代表logo图像不需要重复

4、tr:nth-child(odd) { background: #efefef; } 代表隔行变色

5、tr:hover { background: #efefef; } 代表鼠标移到行上会变色

单元5测试

1、网页的表格可以像word一样拖拉。

2、表格不可以嵌套使用。

3、网页可以用表格进行排版。

4、表格是主要用来显示数据。

5、做网络爬虫很难捕获到表格的数据。

6、制作个人简历时候,不需要添加form标签。

7、制作个人简历时候,最好新建独立的样式表。

8、 代表空格。

9、<td colspan="5"> </td>代表合并5列。

10、<td class="col-four bg">  </td>代表td同时采用了col-four和bg两种样式。

11、<table cellpadding="0" cellspacing="0">代表表格单元格之间的间距和单元格内的间距都是0。

12、表格制作qq邮箱界面时,采用了表格嵌套。

13、表格制作qq邮箱界面时,采用了iframe标签。

14、iframe不可以采用class类进行修饰。

15、<td valign="top">代表单元格内的内容靠上。

16、html,body { margin: 0; padding: 0; width: 100%; height: 100%; }代表需要撑满整个浏览器

17、.left { float: left; } .right { float: right; } 代表反复使用的公共样式

18、.logo { width: 201px; height: 55px; background-image: url(../img/logo.png); background-repeat: no-repeat; } 代表logo图像不需要重复

19、tr:nth-child(odd) { background: #efefef; } 代表隔行变色

20、tr:hover { background: #efefef; } 代表鼠标移到行上会变色

单元5作业

1、5.1 个人简历的制作

2、5.4 qq邮箱界面制作

期末项目化考核。

期末项目化考核

1、一、需求分析 1.设计主题,例如:家乡、美食、游戏、汽车、游戏、电影、专业、校园、班级、室友等等,收集文字、图片、音视频等网站素材。 2.设计好网站的栏目、栏目对应的页面名称。 3.设计好网页的大块,每大块分别放什么内容,哪些地方放什么特效。 4.将设计好的网站模块及每个模块放置的内容整理成电子文档。 二、项目要求 1.页面不得低于10个,页面名称一律采用英文表示,页面都以图片为模板进行修改。 2.开发分辨率在1024*768以上,采用google浏览器调试。 3.自己处理的图片至少5个,类型不得相同,至少下载5种非windows字体,图片需要保存好,后缀为psd。 4.需要使用5个以上的jquery特效(例如:无间隙滚动,天气预报,图片弹出带阴影背景,轮转图片等等,单独的marquee标记不为特效)。 5.每个网站需要有主题和logo(自己找logo制作工具开发)。 6.联系我们采用内嵌地图,QQ在线服务。 7.每一个链接都需点通,每页都要有醒目的返回首页的链接。 8.css样式和html代码必须分离,网页中不得出现样式。

单元6:列表的高级应用

6.1 纯CSS制作选项卡随堂测验

1、li必须嵌套在ul或者ol中使用。

2、ul是哪两个英文单词的缩写:

3、ol是哪两个英文单词的缩写:

4、li是哪两个英文单词的缩写:

5、溢出隐藏的css代码:

6.2 横向菜单栏、带有背景图像的横向菜单随堂测验

1、去除ul前面的小黑点的css代码:

2、把ul菜单的每一项横过来的css代码:

3、去除ul,li的默认样式的代码:

4、list-style-position哪个属性值将项目符号放置在文本以内:

5、list-style-position哪个属性值将项目符号放置在文本以外:

6.3 只有标题的新闻列表、带有标题和日期的新闻列表随堂测验

1、a:hover { cursor: pointer; } 代表移上去鼠标样式是手的形状

2、.date { float: right; } 代表日期靠右

3、<a href="#"></a>代表空链接

4、a { height: 40px; line-height: 40px; } 代表这一行内文字上下居中

5、overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 代表文本溢出省略文字

6.4 新闻图文混排列表、缩略图列表随堂测验

1、“新闻图文混排列表”采用了ul嵌套div的制作方法

2、img { width: 150px; height: 100px; border-radius: 8px; } 代表设置网页上所有图片的样式

3、text-align: justify;代表文本分散对齐

4、more的位置采用了相对定位和绝对定位

5、ul.imglist { width: 536px; } 代表.imglist是用来修饰ul的

单元6测试

1、li必须嵌套在ul或者ol中使用。

2、a:hover { cursor: pointer; } 代表移上去鼠标样式是手的形状

3、.date { float: right; } 代表日期靠右

4、<a href="#"></a>代表空链接

5、a { height: 40px; line-height: 40px; } 代表这一行内文字上下居中

6、overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 代表文本溢出省略文字

7、“新闻图文混排列表”采用了ul嵌套div的制作方法

8、img { width: 150px; height: 100px; border-radius: 8px; } 代表设置网页上所有图片的样式

9、text-align: justify;代表文本分散对齐

10、more的位置采用了相对定位和绝对定位

11、ul.imglist { width: 536px; } 代表.imglist是用来修饰ul的

12、ul是哪两个英文单词的缩写:

13、ol是哪两个英文单词的缩写:

14、li是哪两个英文单词的缩写:

15、溢出隐藏的css代码:

16、去除ul前面的小黑点的css代码:

17、把ul菜单的每一项横过来的css代码:

18、去除ul,li的默认样式的代码:

19、list-style-position哪个属性值将项目符号放置在文本以内:

20、list-style-position哪个属性值将项目符号放置在文本以外:

单元6作业

1、6.3 只有标题的新闻列表、带有标题和日期的新闻列表

2、6.4 新闻图文混排列表、缩略图列表

单元7:CSS3高级应用

7.1 多种图片特效随堂测验

1、filter的高斯模糊:

2、filter的亮度:

3、filter的对比度:

4、filter的阴影:

5、filter的灰度:

6、filter的色相旋转:

7、filter的反转:

8、filter的透明度:

9、filter的饱和度:

10、filter的深褐色:

7.2 CSS3文本阴影、自定义字体、CSS3溢出样式随堂测验

1、text-shadow是用来制作文本阴影的。

2、@font-face可以用来自定义字体。

3、网页不可以远程调用字体库。

4、网页不可以使用第三方字体。

5、<link href="http://fonts.googleapis.com/css?family=Condiment" rel="stylesheet" type="text/css">代表调用了服务器字体。

7.3 渐变属性使用、圆角属性使用随堂测验

1、radial-gradient属性值是用来设置径向渐变的。

2、linear-gradient属性值是用来设置线性渐变的。

3、border-radius属性值是用来设置圆角的。

4、radial-gradient和linear-gradient可以同时使用。

5、radial-gradient和border-radius可以同时使用。

6、linear-gradient和border-radius可以同时使用。

7.4 CSS3图片背景随堂测验

1、background-attachment:fixed;代表随着页面的滚动轴背景图片不会移动。

2、background-size:cover;代表把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉。

3、background-size:100% 100%;表示按容器比例撑满,图片变形。

4、background-size:contain;表示图片自身的宽高比不变,缩放至整个图片自身能完全显示出来,所以容器会有留白区域。

5、background-size属性是CSS3的新属性。

7.5 min-width、max-width、min-height、max-height和content、before、after随堂测验

1、min-width属性设置元素的最小宽度。

2、max-width属性设置段落的最大宽度。

3、min-height属性设置段落的最小高度。

4、max-height属性设置段落的最大高度。

5、::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。

7.6 响应式布局-设置网页的可视区域、CSS3@media查询随堂测验

1、<meta name="viewport" content="width=device-width,initial-scale=1.0">width:可视区域的宽度,值可为数字或关键词device-width。

2、<meta name="viewport" content="width=device-width,initial-scale=1.0">intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放。

3、<meta name="viewport" content="width=device-width,initial-scale=1.0">maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别。

4、<meta name="viewport" content="width=device-width,initial-scale=1.0">maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。

5、<meta name="viewport" content="width=device-width,initial-scale=1.0">user-scalable:是否可对页面进行缩放,no 禁止缩放。

6、使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

7、@media screen and (min-width:1200px) 意思是当浏览器的宽度大于等于1200px的时候。

8、@media screen and ( max-width: 980px ) 意思是当浏览器的的可视区域小于980px的时候。

9、@media screen and (min-width: 960px) and (max-width: 1199px)意思是当浏览器的的可视区域小于1200px并且大于等于960的时候。

单元7测试

1、text-shadow是用来制作文本阴影的。

2、@font-face可以用来自定义字体。

3、网页不可以远程调用字体库。

4、网页不可以使用第三方字体。

5、<link href="http://fonts.googleapis.com/css?family=Condiment" rel="stylesheet" type="text/css">代表调用了服务器字体。

6、radial-gradient属性值是用来设置径向渐变的。

7、linear-gradient属性值是用来设置线性渐变的。

8、border-radius属性值是用来设置圆角的。

9、radial-gradient和linear-gradient可以同时使用。

10、radial-gradient和border-radius可以同时使用。

11、linear-gradient和border-radius可以同时使用。

12、background-attachment:fixed;代表随着页面的滚动轴背景图片不会移动。

13、background-size:cover;代表把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉。

14、background-size:100% 100%;表示按容器比例撑满,图片变形。

15、background-size:contain;表示图片自身的宽高比不变,缩放至整个图片自身能完全显示出来,所以容器会有留白区域。

16、background-size属性是CSS3的新属性。

17、min-width属性设置元素的最小宽度。

18、max-width属性设置段落的最大宽度。

19、min-height属性设置段落的最小高度。

20、max-height属性设置段落的最大高度。

21、::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。

22、<meta name="viewport" content="width=device-width,initial-scale=1.0">width:可视区域的宽度,值可为数字或关键词device-width。

23、<meta name="viewport" content="width=device-width,initial-scale=1.0">intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放。

24、<meta name="viewport" content="width=device-width,initial-scale=1.0">maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别。

25、<meta name="viewport" content="width=device-width,initial-scale=1.0">maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。

26、<meta name="viewport" content="width=device-width,initial-scale=1.0">user-scalable:是否可对页面进行缩放,no 禁止缩放。

27、使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

28、@media screen and (min-width:1200px) 意思是当浏览器的宽度大于等于1200px的时候。

29、@media screen and ( max-width: 980px ) 意思是当浏览器的的可视区域小于980px的时候。

30、@media screen and (min-width: 960px) and (max-width: 1199px)意思是当浏览器的的可视区域小于1200px并且大于等于960的时候。

31、filter的高斯模糊:

32、filter的亮度:

33、filter的对比度:

34、filter的阴影:

35、filter的灰度:

36、filter的色相旋转:

37、filter的反转:

38、filter的透明度:

39、filter的饱和度:

40、filter的深褐色:

单元7作业

1、7.2 CSS3文本阴影、自定义字体、CSS3溢出样式

2、7.3 渐变属性使用、圆角属性使用

单元8:登录界面的制作、典型网站制作

8.1 登录界面的制作随堂测验

1、绝对居中的css代码为position: absolute;left: 50%;top: 50%;。

2、登录界面一般都要加入form标签。

3、<a href="https://www.cssmoban.com/" title="网页模板" target="_blank">点击我</a>代表超连接到https://www.cssmoban.com/网站。

4、<input class="pwd" type="password" placeholder="Password" />代表密码文本框。

5、<input class="submit" type="submit" value="LOGIN" />代表提交按钮。

8.2 1024px网页制作随堂测验

1、在HTML中,哪个选项不是链接的目标属性:
    A、self
    B、new
    C、blank
    D、top

2、在HTML中,标记<font>的Size属性最大取值可以是:
    A、5
    B、6
    C、7
    D、8

3、用于设置文本框显示宽度的属性是:
    A、Size
    B、MaxLength
    C、Value
    D、Length

4、<a href="#csust">郑州大学软件学院</a>的作用是:
    A、超级链接到郑州大学软件学院网页上
    B、超级链接到本文件中csust标记处
    C、超级链接暂时不被运行
    D、超级链接到#csust网页上

5、在表单标记中,用哪个选项属性来提交填写的信息、调用表单处理程序:
    A、method
    B、name
    C、style
    D、action

8.3 Blog网页制作随堂测验

1、用于设置表格背景颜色的属性的是:
    A、background
    B、bgcolor
    C、BorderColor
    D、backgroundColor

2、引用外部样式表的元素应该放在:
    A、HTML文档的开始的位置
    B、HTML文档的结束的位置
    C、在head元素中
    D、在body元素中

3、以下哪个选项是定义样式表中的注释语句:
    A、/* 注释语句 */
    B、// 注释语句
    C、// 注释语句 //
    D、'注释语句

4、外边距可以为负数。

5、定义盒模型外补丁的时候是否可以使用负值。

8.4 企业网页制作随堂测验

1、以下哪个选项表示列表项符号是小方块:
    A、list-style-type: square
    B、type: square
    C、list-type: square
    D、type: 2

2、下列选项中,不属于文本属性的是:
    A、font-size
    B、font-style
    C、text-align
    D、font-color

3、选出你认为最合理的定义标题的方法:
    A、<span class="heading">文章标题</span>
    B、<p><b>文章标题</b></p>
    C、<h1>文章标题</h1>
    D、<strong>文章标题</strong>

4、html中的注释标签是:
    A、<-- -->
    B、<--! -->
    C、<!-- -->
    D、<-- --!>

5、在页面设计中,涉及到的页面布局有:
    A、框架布局
    B、表格布局
    C、层布局
    D、混合布局(框架布局、表格布局、层布局)

8.5 采用IIS发布网站随堂测验

1、一般windows服务器安装的是windows server系统。

2、windows服务器一般采用iis发布网站。

3、IIS只可以发布静态网站。

4、IIS发布动态网页需要安装对应的环境。

5、IIS发布网站不需要设置权限。

单元8测试

1、在HTML中,哪个选项不是链接的目标属性:
    A、self
    B、new
    C、blank
    D、top

2、在HTML中,标记<font>的Size属性最大取值可以是:
    A、5
    B、6
    C、7
    D、8

3、用于设置文本框显示宽度的属性是:
    A、Size
    B、MaxLength
    C、Value
    D、Length

4、<a href="#csust">郑州大学软件学院</a>的作用是:
    A、超级链接到郑州大学软件学院网页上
    B、超级链接到本文件中csust标记处
    C、超级链接暂时不被运行
    D、超级链接到#csust网页上

5、在表单标记中,用哪个选项属性来提交填写的信息、调用表单处理程序:
    A、method
    B、name
    C、style
    D、action

6、用于设置表格背景颜色的属性的是:
    A、background
    B、bgcolor
    C、BorderColor
    D、backgroundColor

7、引用外部样式表的元素应该放在:
    A、HTML文档的开始的位置
    B、HTML文档的结束的位置
    C、在head元素中
    D、在body元素中

8、以下哪个选项是定义样式表中的注释语句:
    A、/* 注释语句 */
    B、// 注释语句
    C、// 注释语句 //
    D、'注释语句

9、以下哪个选项表示列表项符号是小方块:
    A、list-style-type: square
    B、type: square
    C、list-type: square
    D、type: 2

10、下列选项中,不属于文本属性的是:
    A、font-size
    B、font-style
    C、text-align
    D、font-color

11、选出你认为最合理的定义标题的方法:
    A、<span class="heading">文章标题</span>
    B、<p><b>文章标题</b></p>
    C、<h1>文章标题</h1>
    D、<strong>文章标题</strong>

12、html中的注释标签是:
    A、<-- -->
    B、<--! -->
    C、<!-- -->
    D、<-- --!>

13、在页面设计中,涉及到的页面布局有:
    A、框架布局
    B、表格布局
    C、层布局
    D、混合布局(框架布局、表格布局、层布局)

14、绝对居中的css代码为position: absolute;left: 50%;top: 50%;。

15、登录界面一般都要加入form标签。

16、<a href="http://www.cssmoban.com/" title="网页模板" target="_blank">点击我</a>代表超连接到http://www.cssmoban.com/网站。

17、<input class="pwd" type="password" placeholder="Password" />代表密码文本框。

18、<input class="submit" type="submit" value="LOGIN" />代表提交按钮。

19、外边距可以为负数。

20、定义盒模型外补丁的时候是否可以使用负值。

21、一般windows服务器安装的是windows server系统。

22、windows服务器一般采用iis发布网站。

23、IIS只可以发布静态网站。

24、IIS发布动态网页需要安装对应的环境。

25、IIS发布网站不需要设置权限。

单元8作业

1、8.2 1024px网页制作

2、8.4 企业网页制作