请输入

乱的HTML+css

下载 
<div>
  <div class="container">
  <div class="output" id="output">0</div>
    <button class="button" onclick="appendToOutput('1')">1</button>
  <button class="button" onclick="appendToOutput('2')">2</button>
  <button class="button" onclick="appendToOutput('3')">3</button>
  <button class="button" onclick="appendToOutput('4')">4</button>
  <button class="button" onclick="appendToOutput('5')">5</button>
  <button class="button" onclick="clearOutput()" id="clear">C</button>
  <button class="button" onclick="appendToOutput('+')">+</button>
  <button class="button" onclick="appendToOutput('6')">6</button>
  <button class="button" onclick="appendToOutput('7')">7</button>
  <button class="button" onclick="appendToOutput('8')">8</button>
  <button class="button" onclick="appendToOutput('9')">9</button>
  <button class="button" onclick="appendToOutput('0')">0</button>
  <button class="button" onclick="appendToOutput('-')">-</button>
  <button class="button" onclick="appendToOutput('%')">%</button>
  <button class="button" onclick="appendToOutput('/')">/</button>
  <button class="button" onclick="appendToOutput('*')">*</button>
  <button class="button equals" onclick="calculate()">=</button>
  <button class="button" onclick="appendToOutput('.')">.</button>
</div>
  
  <div class="div-left">
   	<p>
    <ul>
    <li><a href="#home" class="active">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li>
        <div class="dropdown"> <a href="#" class="dropbtn">下拉菜单</a>
            <div class="dropdown-content"> <a href="https://www.baidu.com/">百度</a> <a href="https://www.google.com">谷歌</a> <a href="#">链接 3</a> </div>
        </div>
    </li>
    <li><a href="#about">关于</a></li>
    </ul>
    </p>
  </div>
</div>

<script>

let output = document.getElementById("output");

function appendToOutput(value) {
  if (output.innerHTML === "0") {
    output.innerHTML = value;
  } else {
    output.innerHTML += value;
  }
}

function clearOutput() {
  output.innerHTML = "0";
}

function calculate() {
  output.innerHTML = eval(output.innerHTML);
}
</script>


body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}

.container {
  float:left;
  margin: 300px 0px 0px;
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0px 0px 10px #ccc;
}

.output {
  font-size: 2em;
  text-align: right;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.button {
  font-size: 1.5em;
  margin: 2px;
  width: 30px;
  height: 30px;
  border: none;
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
}

.button:hover {
  background-color: #999;
}

.clear {
  background-color: #ff6666;
}

.equals {
  background-color: #66cc66;
}
.div-left{
  float:left;
  margin:300px 100px;
}
ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     background-color: #999;
     overflow: hidden;
     /*        注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(当li{float:left}时)。         来源链接：https://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_float&basepath=0        */
 }

 li {
     float: left;
 }

 li a {
     color: white;
     padding: 14px 16px;
     display: inline-block;
     text-decoration: none;
 }

 li>a.active {
     background-color: green;
 }

 li>a:hover:not(a.active),
 .dropbtn:hover {
     background-color: #555;
 }

 .dropdown-content {
     display: none;
     position: absolute;
     /* 默认相对于<html>进行绝对定位 */
     background-color: #f9f9f9;
     min-width: 100px;
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
 }

 .dropdown-content a {
     color: black;
     display: block;
     /* 因为<a>标签不是块元素，min-width:100px不会生效 */
 }

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

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

 /* 中间的空格表示，鼠标悬念在.dropdown上时，dropdown的子元素.dropdown-content变为块元素 */
 /* ### 待完善 ###   
    因为.dropdown只用过一次，觉得可以删除<div class="dropdown"></div>来减少代码量，尝试  将.dropdown:hover .dropdown-content {display: block;} 修改为.dropbtn:hover+.dropdown-content {display: block;} 并删除<div class="dropdown"></div>后，鼠标悬停在“下拉菜单”上，会显示下拉菜单， 但无法选中菜单中的“链接 x”， ### 为什么？该如何完善？ ###    
 */


上一个
测试发布报错
下一个
untitled document
最近修改: 2025-05-26Powered by