tia的学习笔记
0%

html+css鼠标移到图片上时显示下拉菜单

Posted on Edited on In
2.2k 2 mins.

html代码如下：

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
<head>

<title>记帐本</title>

<link rel="stylesheet" type="text/css" href="css/index.css">


</head>

<body>
	<div class="biaoti"><font face="宋体">记账本</font></div>
	<div class="logo"><!--这一步是创建图片的容器，方便待会儿对图片进行处理-->
	<img src="img\more.png" width="50" height="50">
		<div class="form" align="left">
			<form>
				<ul>
					<li><a href="add.jsp">记账</a></li>
					<li><a href="change.jsp">修改账本</a></li>
					<li><a href="check.jsp">查询</a></li>
					<li><a href="delete.jsp">删除账目</a></li>
					<li><a href="all.jsp">账目总览</a></li>
				</ul>
			</form>
		</div>
	</div>
</body>
</html>

css代码如下:

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
59
60
61
62
63
body {
	margin: 0px;
}

ul {
	position:absolute;<!--我的理解是让ul整块的位置和页面保持相对固定的位置，当
	你调节上面标题的div的大小的时候，不会影响到ul的位置，所以我所有的用的都是absolute -->
	list-style: none;<!--这是为了去除ul前面的小黑点的 -->
	top:-10px;<!--调整ul这个整体到网页顶部的距离-->
	left:-8px;<!--调整ul这个整体到网页左边的距离-->
	text-align:center;<!--让ul里面的文字居中显示，不然默认左对齐，像这样
	 记账             记账
	修改账本          修改账本 
	 查询             查询
	-->
}

.biaoti {
	text-align: center;<!--标题居中 -->
	font-weight: bold;
	font-size: 30px;
	text-shadow:5px 5px 5px lightgrey<!--字体阴影,三个值分别是x,y轴,阴影颜色 -->
}

a {
	text-decoration: none;<!--去除a标签链接下面的横线 -->
}

a:link {
	color: #636363<!--代表当一段文本为链接时的属性 -->
}

a:visited {
	color: #808080<!--代表这段文本被点击之后的属性 -->
}

a:hover {
	color: #c0c0c0;<!--代表鼠标指针放在这个链接上时的属性 -->
}

a:active {
	color: #808080<!-- 代表鼠标按下时一瞬间的属性-->
}
img{
	position:absolute;
	right:35px;<!--图片向右移动的距离-->
}
.form {
	position:absolute;
	width: 120px;
	height: 110px;
	margin: 0px;
	top:50px;
	display: none; <!-- form表单里面的东西被隐藏，而且不占据空间-->
}
.logo{
	position:absolute;
	width: 120px;
}

.logo:hover .form {
	display: block;<!--当鼠标移到logo所在部分时隐藏部分出现，实现当鼠标移动到图片时出现下拉菜单 -->
}
点这里请我吃个小蛋糕吧～～

Welcome to my other publishing channels