衡阳师范学院 2017-2018学年第一学期
文学院编辑出版学专业 2015年级《网页制作与网站管理》期末考试试题B卷
答案及评分标准
一、单项选择：
ACABC BDCAD DCBBA
二、填空：
1. <br />（或换行）， enter ，撤销， F12
企业网站制作2．<br /> ，<hr />，<img />
3． ..\img\a.gif
4．Hypertext Markup language ，Cascading style sheet（写中文也可）5．<ol> 、<ul> 、<li>
6．10px
7. p 、body 、form
8. new Date()
9. post、 get
10. title ， meta ， link
11. td ， table， a， form， type， name， src， href
12. absolute， relative， scroll ， fixed ， z-index
13. history ， open
14. getElementById ， style
三、问答题
undeclared1．答：1）a:hover是伪类选择器，当鼠标悬浮在a标记上时应用该选择器定义的样式；
2)a.hover是交集选择器，应用了.hover类选择器的a标记应用该样式；
3)a:hover b是后代选择器，当鼠标悬浮在a标记上时，被a标记包含的b标记将应用该样式；4)a.hover b是后代选择器，应用了.hover类选择器的a标记里的b标记将应用该样式。
2．答：1）DW对CSS的建立和编辑有很好的支持，对CSS的所有操作都集中在“CSS样式”面板中，一般我们首先要点“新建CSS规则”来新建样式，新建选择器类型中的“类”对应类别选择器，“标签”对应标记选择器，“高级”对应除此之外的所有其他选择器，“定义在”的上一项表示将CSS代码写在外部CSS文件中，并通过链接式引入该CSS文档；下一项“仅对该文档”表示用嵌入
式引入CSS，即CSS代码作为<style>元素的内容写在文档头部。
设置完选择器点“确定”后，就会弹出该选择器的样式设置面板，对面板中任何一项进行赋值后，都等价于往该选择器中添加一条声明，如下划线设置为“无”，就相当于在代码视图内为该选择器添加了一条“text-decoration: none;”。设置完样式属性后，单击“确定”，在“CSS样式”面板中将出现指定名称的新样式。
3．答：原理是设置下拉菜单为绝对定位，使它能够浮动在网页上，同时设置导
航项为相对定位，使下拉菜单以导航项为定位基准。
首先写结构代码，采用二级列表结构，第一级放导航项，第二级放下拉菜单项。
设置第一层li为左浮动，这样导航项就会水平排列，设置下拉菜单为绝对定位，
往导航项下偏移。平时导航项未被访问时应隐藏下拉菜单ul，所以ul默认值是不
显示，再添加交互，当鼠标滑过时显示下拉菜单ul。
html个人网页完整代码div+css4．CSS布局的步骤：
（1）将页面用div分块；
（2）通过CSS中的（margin、padding）等属性设计各块的位置，通过（width、height）等属性设计各块的大小，再通过其他属性（如浮动）设置块的相互关系；（3）在网页的各大div块中插入作为各个栏目框的小块。
四、程序设计题：（25分）
1．制作如下图所示的水平导航条。（10分）
<style type="text/css">
#nav{
font-size: 14px;
background: #99CCFF;
}
#nav a {
color: #FF0000; （1分）
text-align: center; （1分）
text-decoration: none; （1分）
padding:6px 10px 4px; （1分）
margin:0 2px; （1分）
float:left; (1分)
}
#nav a:hover {
color: #FFFFFF;
background: #993300 url('images/top.gif') no-repeat; } （hover选择器设计正确给2分）java正则表达式相关类教案
</style>
<div id="nav">
<a href="#">许愿池</a>
<a href="#">港湾在线</a>
<a href="#">网友作品</a>
<a href="#">心灵倾诉</a>
<a href="#">语音聊天</a>
<a href="#">心情留言</a></div> (结构代码合理给2分)
（结构代码合理给2分，hover选择器设计正确给2分，其他每个关键语句正确分别给1分）
2．编写DIV+CSS代码实现如下图所示的1-3-1布局结构。（要求：网页在浏览器中居中）（15分）
<style type="text/css">
#header,#pagefooter,#container{
margin:0 auto; （2分）
width:772px; （1分）
}
#navi{
float:left; （1分）
width:200px; （1分）
}
#content{
lambda x:x[1float:left; （1分）
width:360px; （1分）
ignorecase怎么用}
#side{
float:left; （1分）
width:200px;
}
#pagefooter{
clear:both; （2分）
}
</style>
<body>
<div id="header">id="header"</div> （1分）
<div id="container"> （1分）
<div id="navi">id="navi"</div>
<div id="content">id="content"</div>
<div id="side">id="side"</div> （2分）
</div>
<div id="pagefooter">id="pagefooter"</div> （1分）
</body>
（结构代码合理给5分，居中和清除浮动方法正确分别给2分，其他每个关键语句正确分别给1分）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论