HTML/CSS 练习

最新推荐文章于 2025-05-31 20:44:09 发布

转载最新推荐文章于 2025-05-31 20:44:09 发布 · 508 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Tony98/p/10950920.html

博客包含提示框、箭头、透明度以及导航栏相关内容，转载自https://www.cnblogs.com/Tony98/p/10950920.html 。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.提示框/箭头/透明度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body style="text-align:center;">

<h2>底部提示框/顶部箭头</h2>

<div class="tooltip">鼠标移动到我这
  <span class="tooltiptext">提示文本</span>
</div>
</body>
</html>

.tooltip{
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltiptext{
  visibility: hidden;
  text-align: center;
  background-color: black;
  color: white;
  width:120px;
  padding: 6px 0px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  right: 105%;
  margin-top: -3px;
  
  opacity: 0;
  transition: opacity 2.5s;
}
.tooltiptext::after{
  content: "";
  position:absolute;
  border-style:solid;
  top:50%;
  left:100%;
  margin-top:-5px;
  border-width:5px;
  border-color:transparent transparent transparent black;
}
.tooltip:hover .tooltiptext{
  visibility:visible;
  opacity:1;
}

2.导航栏

    *{
        box-sizing:border-box;      
    }
    body{
          margin:0;
    }
    .header{
      background-color:#1E90FF;
      text-align:center;
      color:white;
      padding:15px;
    }
    .footer{
      
      background-color:#696969;
      color:white;
      padding:10px;
    }
    .topmenu{    
      list-style-type:none;
      margin:0;
      padding:0;
      overflow:hidden;/*显示出内容。其他的会被剪辑*/
      background-color:#777;
    }
    .topmenu li{
      float:left;
    }
    .topmenu li a{
      display:inline-block; /* 对象为内联，内容为块级*/
      color:white;
      padding:16px;
      text-decoration:none;
    }
    .topmenu li a:hover{
      background-color:#222;
    }
    .topmenu li a.active{
      color:white;
      background-color:#32CD32
    }
    .column{
      float:left;
      padding:15px;
    }
    .clearfix:after{    /*在元素clearfix后添加内容*/
      content:"";
      clear:both;
      display:table;/*为一个块级表格元素 */
    }
    
    .sidemenu{
    width:25%;      
    }
    .content{
      width:65%;
    }
    .sidemenu ul{
      list-style-type:none;
      margin:0px;
      padding:0px;
    }
    .sidemenu li a{
      margin-bottom:4px;
      display:block;
      padding:8px;
      text-decoration:none;
      background-color:#eee;
      color:#666;
    }
    .sidemenu li a:hover{
      background-color:#555;
      color: white;
    }
    .sidemenu li a.active{
      background-color: #008CBA;
      color: white;
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
  
<body>
  <ul class="topmenu">
    <li><a href="#home" class="active">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系我们</a></li>
    <li><a href="#about">关于我们</a></li>
 </ul>
  
  <div class="clearfix">
    <div class="column sidemenu">
      <ul>
        <li><a href="#flight">The Flight</a></li>
        <li><a href="#City" class="active">The City</a></li>
        <li><a href="#island">The Island</a></li>
        <li><a href="#Food">The Food</a></li>
        <li><a href="#People">The People</a></li>
        <li><a href="#History">The History</a></li>
        <li><a href="#Oceans">The Oceans</a></li>
      </ul>  
    </div>
    
    <div class="column content">
      <div class="header">
        <h1>The City</h1>
      </div>
      <h1>Chania</h1>
      <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
      <p>You will learn more about responsive web pages in a later chapter.</p>
      </div>
 </div>

    <div class="footer">
      <p>底部文本</p>
    </div>
</body>
</html>