歡迎來的我的小院，恭喜你今天又要漲知識了面哼！
案例內(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è)/資源。
