24大数据技术10.10实验课作业-2

注意

点击代码块，可使用方向键左右移动查看代码
注释部分不需要敲
提交运行后截图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!--
	网页主页头部使用一幅背景图片，一维水平菜单出现在背景图片的下方
	菜单使用项目列表并浮动列表项制作
	菜单通过使用 padding-top样式属性将水平菜单置于背景图片的下方
-->
<meta charset="utf-8"/>
<title>wustwzx1</title>
<meta name="keywords" content="吴志祥,教学网站,网页设计,网页制作 网站开发">
<div id="top">  <!--网页头部-->
	<div id="menu">  <!--菜单-->
		<ul>
			<li><a href="#" id="first">首页</a></li>
			<li><a href="http://www.wustwzx.com/webFront">Web前端开发</a></li>
			<li><a href="http://www.wustwzx.com/aspNET">.NET Web开发</a></li>
			<li><a href="http://www.wustwzx.com/javaEE">Java Web开发</a></li>
			<li><a href="http://www.wustwzx.com/phpWeb">PHP网站开发</a></li>
			<li><a href="#">Web信息检索</a></li>
			<li><a href="#">其它相关课程</a></li>
		</ul>
	</div>
</div>
<style>
	*{
		margin:0px;padding:0px;
		font-size:13px;
	}
	#top{
		width:1000px; height:190px;  /*与背景图片大小相同*/
		margin:0 auto;  /* 水平居中 */
		background:url(images/top.jpg) center top no-repeat;
	}
	#menu{
		padding-top:155px;  /* 内填充 */
		width:1000px; height:35px;
	}
	#menu ul{
		list-style:none;  /* 项目列表无项目符号 */
	}
	#menu ul li {
		width:120px;
		line-height:35px;
		text-align:center;
		float:left; /* 主菜单列表项水平放置 */
	}
	#menu ul li a{
		display:block;   /* 显示为块级元素，超链接自动扩展其宽度以填满其父容器的宽度 */
		color:#333;
		text-decoration:none;  /* 取消超链接默认的下划线 */
	}
	#menu ul li a:hover{  /* 伪类选择器 */
		color:#fff;   /* #FFF等效#FFFFFF，白色 */
		background:url(images/navhover.png) no-repeat;
	}
	#menu ul li a#first{  /* 交集选择器 */
		color:#fff;
		background:url(./images/navhover.png) no-repeat;
	}
</style>