Complete the JD navigation menu according to the current content of CSS. The reference picture is as follows:
Claim:
When the mouse is hovering over a line, the background color of the current line changes. When the
mouse is hovering over a hyperlink, the link color changes
analysis:
There are three types of style sheets in css: inline style sheets, inline style sheets and external style sheets. In this question, the inline style sheets are used to implement.
Code:
<!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>
operation result:
