HTML 練習實現鼠標移到用戶圖像展示更多信息
阿新 • • 發佈:2019-03-13
body tom none oat relative gin -i class img
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .right{ float: right; } .pg-header{ height: 48px; line-height: 48px; background-color: #303a40; color: white; } .pg-header .logo{ float: left; width: 200px; text-align: center; } .pg-header .user{ padding: 0 20px; height: 48px; position: relative; } .pg-header .user:hover{ background-color: #425a66; } .pg-header .user .a{ height: 48px; } .pg-header .user .a img{ width: 40px; height: 40px; margin-top: 4px; border-radius: 50%; } .pg-header .user .more{ width: 200px; border: 1px solid darkgreen; position: absolute; top: 48px; right: 20px; background-color: #C0C0C0; display: none; z-index: 9999; } .pg-header .user:hover .more{ display: block; } .pg-header .user .more a{ display: block; } .pg-body .body-menu{ position: absolute; top: 50px; bottom: 0; left: 0; width: 200px; border: 1px solid #336699; } .pg-body .body-content{ position: absolute; top: 50px; bottom: 0; left: 210px; right: 0; border: 1px solid #336699; overflow: auto; z-index: 10; } </style> </head> <body> <div class="pg-header"> <div class="logo">Hello Python</div> <div class="user right" style="position: relative"> <div class="a"> <img src="1.jpg"> </div> <div class="more"> <a>我的信息</a> <a>註銷</a> </div> </div> </div> <div class="pg-body"> <div class="body-menu"></div> <div class="body-content"> <p>klvchen</p><p>klvchen</p><p>klvchen</p> <p>klvchen</p><p>klvchen</p><p>klvchen</p> <p>klvchen</p><p>klvchen</p><p>klvchen</p> <p>klvchen</p><p>klvchen</p><p>klvchen</p> <p>klvchen</p><p>klvchen</p><p>klvchen</p> <p>klvchen</p><p>klvchen</p><p>klvchen</p> </div> </div> </body> </html>
HTML 練習實現鼠標移到用戶圖像展示更多信息