css简单练习1

最新推荐文章于 2023-04-23 11:55:40 发布

crraxx

最新推荐文章于 2023-04-23 11:55:40 发布

阅读量1.3k

点赞数 5

分类专栏：网页文章标签： html

本文链接：https://blog.csdn.net/crraxx/article/details/109278391

版权

网页专栏收录该内容

18 篇文章 5 订阅

订阅专栏

根据css现学内容完成京东导航菜单,参考图片如下:

在这里插入图片描述

要求:

鼠标悬浮在某行，当前行背景颜色改变
鼠标悬浮在某个超链接，链接颜色改变

分析:

css中有三类样式表分别是行内样式表,内嵌样式表和外部样式表,本题中使用内嵌样式表来实现.

代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			form{
			background-color: #A9A9A9;
			width: 250px;	
			font-size: 25px;
			}
			.b1:hover{
				color: #0000FF;
				background-color: blanchedalmond;
			}
			.b1:active{
				color: #FF0000;
				background-color: chartreuse;
			}
			.b2:hover{
				color: #7FFF00;
				background-color: #8A2BE2;
			}
			.b2:active{
				color: #FFEBCD;
				background-color: aquamarine;
			}
			.b3:hover{
				color: #FF7F50;
				background-color: azure;
			}
			.b3:active{
				color: blue;
				background-color: burlywood;
			}
		</style>
	</head>
	<body>
		<img src="img/jd.JPG"/>
		<form>
			<p class="b1">家用电器</p>
			<p class="b2">手机/运营商/数码</p>
			<p class="b3">电脑/办公</p>
			<p class="b1">家具/家具/家装/厨具</p>
			<p class="b2">男装/女装/童装</p>
			<p class="b3">男鞋/运动鞋/户外</p>
			<p class="b1">汽车/汽车用品</p>
			<p class="b2">母婴/玩具乐器</p>
			<p class="b3">图书/玩具乐器</p>
			<p class="b1">理财/众筹/白条/保险</p>
		</form>
	</body>
</html>