歡迎來的我的小院，恭喜你今天又要漲知識了！
案例內(nèi)容
利用CSS實現(xiàn)圖片的下拉菜單。
演示
學(xué)習(xí)
<!DOCTYPE html>
<html lang="en">
? <head>
? ? <meta charset="UTF-8">
? ? <title>小院里的霍大俠</title>
? ? <style>
? ? ? .dropdown{
? ? ? ? position: relative;
? ? ? ? display: inline-block;
? ? ? }
? ? ? .dropdown-content{
? ? ? ? display: none;
? ? ? ? position: absolute;
? ? ? ? background-color: #f9f9f9;
? ? ? ? min-width: 160px;
? ? ? ? box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
? ? ? }
? ? ? .dropdown:hover? .dropdown-content{
? ? ? ? display: block;
? ? ? }
? ? ? .desc{
? ? ? ? padding: 15px;
? ? ? ? text-align: center;
? ? ? }
? ? ? .back{
? ? ? ? width: 500px;
? ? ? ? height: 500px;
? ? ? ? position: absolute;
? ? ? ? top: 0;
? ? ? ? right: 0;
? ? ? ? bottom: 0;
? ? ? ? left: 0;
? ? ? ? margin: auto;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <div class="back">
? ? ? <h2>下拉圖片</h2>
? ? ? <div class="dropdown">
? ? ? ? <img src="2.png" width="300" height="150">
? ? ? ? <div class="dropdown-content">
? ? ? ? ? <img src="2.png" width="400" height="200">
? ? ? ? ? <div class="desc">關(guān)注我，每天學(xué)習(xí)一點點，讓你不再枯燥不再孤單</div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </body>
</html>
總結(jié)思考
學(xué)習(xí)點：
1、position 屬性指定了元素的定位類型
relative 定位：相對定位元素的定位是相對其正常位置。
absolute 定位：絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>
2、display 屬性規(guī)定元素應(yīng)該生成的框的類型
none ：此元素不會被顯示
inline-block ：行內(nèi)塊元素
3、box-shadow屬性可以設(shè)置一個或多個下拉陰影的框
使用CSS完成圖片的下拉菜單，可以在圖片縮略的情況下，不打開的頁面，不添加按鈕完成圖片查看，減少界面按鈕，優(yōu)化界面。
關(guān)注我，跟著我每天學(xué)習(xí)一點點，讓你不在枯燥，不在孤單..
全網(wǎng)可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰(zhàn)編程案例。編程/就業(yè)/副業(yè)/創(chuàng)業(yè)/資源。
