有没有一种方法可以使用下拉菜单在网页中嵌入图像

时间:2019-12-13 10:31:04

标签: html image drop-down-menu embed

我不知道该给你什么代码,但是当我将其放在消息框中时,它似乎可以运行它。如果您告诉我要给您什么代码,那么我会的,任何其他想法都会有所帮助。 / p>

2 个答案:

答案 0 :(得分:0)

有很多方法可以做到这一点。

<head>
  <style>
  body { padding: 40px; }
.dropdown-toggle, .dropdown-menu { width: 300px }
.btn-group img { margin-right: 10px }
.dropdown-toggle { padding-right: 50px }
.dropdown-toggle .glyphicon { margin-left: 20px; margin-right: -40px }
.dropdown-menu>li>a:hover { background: #f1f9fd } /* $search-blue */
.dropdown-header { background: #ccc; font-size: 14px; font-weight: 700; padding-top: 5px; padding-bottom: 5px; margin-top: 10px; margin-bottom: 5px }
  </style>
</head>
<body>
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img src="http://lorempixel.com/75/50/abstract/">
      0123 4567 8912 3456
      <span class="glyphicon glyphicon-chevron-down"></span>
    </button>

    <ul class="dropdown-menu">
      <li class="dropdown-header">Member name (you)</li>
      <li>
        <a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>
      <li>
        <a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>           
    </ul>
  </div>
</body>

答案 1 :(得分:0)

这是代码:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropdown {
  display: inline-block;
  margin-left; 15px;
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  text-align:center;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<div class="dropdown">
  <button class="dropbtn">Select Skin</button>
  <div class="dropdown-content">
    <a href="#">Mumbo</a>
    <a href="#">Grian</a>
    <a href="#">Iskall</a> 
</div>
</div>

</body>
</html>