根據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>
運行結果:
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/193471.html
標籤：python
上一篇：layui 的基本使用介紹
下一篇：制作一個簡單的chrome插件