作者的話
偶然一個機會，在網上看到一篇ted公開課【讓我們教孩子編程吧】
裏面有一個實例，說是一個小男孩製作了一個大魚喫小魚的遊戲，他想爲這個遊戲做一個計分板（喫一條魚加一分），便他在網上求教，後來被網站創作者發現後，告訴了他答案：變量。通過這個學到的知識點【變量】也許小男孩永遠不會忘記。
從中可以看出，通過需求學習編程往往比爲了學編程而學習編程要記得更勞並且更有價值。這也對我之後的學習以及寫作產生的改變。
PS:以下代碼每次只寫出有更改的地方，無更改的地方不再贅述。每一部分的格式都是:效果圖——思路——代碼的順序書寫，目的是希望初學者可以根據效果圖，輔以思路試着自己寫出代碼，最後再與作者的代碼作比較，希望能通過這個方法明白，實現效果的方式是多種多樣的，不要只侷限在作者的思路中，當然最重要的是能鍛鍊自己編寫代碼的能力
任務概述
需要達到的效果
- 鼠標懸浮彈出下來菜單
- 鼠標離開下拉菜單彈回
所涉及的知識點
ul,li列表的使用- css：display，僞類選擇器，基於關係的選擇器
任務
製作html部分
效果圖：
思路：
1. 整個架構通過<ul>,<li>組件
2. 層級關係通過將新的<ul>放入上一級<li>中完成
注：如下代碼爲一個下拉，三個就重複三遍即可
代碼：
<div class="menu-bar">
<ul>
<li>
<a href="#">Menu</a>
<ul>
<li><a href="#">Menu_1</a></li>
<li><a href="#">Menu_2</a>
<ul>
<li><a href="#">Menu_2_1</li>
<li><a href="#">Menu_2_2</li>
<li><a href="#">Menu_2_3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div> css部分
縱向的下拉列表
效果圖：
思路：
- 通過
display:none使列表消失 - 通過hover設置懸浮狀態
代碼：
.menu-bar ul ul{
display: none;
}
.menu-bar li:hover>ul{
display: block;
}橫向下拉列表
效果圖：
思路：
- 通過float實現橫向佈局
- 注意不要讓列表擠在一起
代碼：
.menu-bar>ul>li{
float: left;
width: 64px;
}稍微修飾一下
效果圖：
思路：
- 首先將列表，鏈接的默認樣式取消，更改字體顏色
- 給列表設置一定高度，並且使文字水平垂直居中
- 這裏可以通過基於關係的選擇器來選擇多重列表
- 設置顏色時可以使用rgba使顏色更舒服。
代碼：
ul,li{list-style: none;}
li{height: 40px;border-radius: 20px;}
a{text-decoration: none;color: black;}
.menu-bar>ul>li{
margin-left: 30px;
line-height: 40px;
text-align: center;
background-color: rgba(228,238,243,.5);
.menu-bar>ul>li>ul>li{
width: 70px;
background-color: rgb(228,238,243);
}
.menu-bar>ul>li>ul>li li{
width: 85px;
background-color: rgb(228,238,243);
}
.menu-bar li:hover>ul,.menu-bar li:hover{
background-color: rgb(228,238,243);
}所有代碼
html
<body>
<div class="menu-bar">
<ul>
<li>
<a href="#">Menu</a>
<ul>
<li><a href="#">Menu_1</a></li>
<li><a href="#">Menu_2</a>
<ul>
<li><a href="#">Menu_2_1</li>
<li><a href="#">Menu_2_2</li>
<li><a href="#">Menu_2_3</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">biu</a>
<ul>
<li><a href="#">biu_1</a></li>
<li><a href="#">biu_2</a>
<ul>
<li><a href="#">biu_2_1</li>
<li><a href="#">biu_2_2</li>
<li><a href="#">biu_2_3</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">duang</a>
<ul>
<li><a href="#">duang_1</a></li>
<li><a href="#">duang_2</a>
<ul>
<li><a href="#">duang_2_1</li>
<li><a href="#">duang_2_2</li>
<li><a href="#">duang_2_3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>css:
div{position: relative;
left: 35%;margin-top: 20%;
}
ul,li{list-style: none;}
li{height: 40px;
border-radius: 20px;}
a{text-decoration: none;color: black;}
.menu-bar>ul>li{
float: left;
width: 64px;
margin-left: 30px;
line-height: 40px;
text-align: center;
background-color: rgba(228,238,243,.5);}
.menu-bar>ul>li>ul>li{
width: 70px;
background-color: rgb(228,238,243);
}
.menu-bar>ul>li>ul>li li{
width: 85px;
background-color: rgb(228,238,243);
}
.menu-bar ul ul{
display: none;
}
.menu-bar li:hover>ul,.menu-bar li:hover{
display: block;
background-color: rgb(228,238,243);
}