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

     
底部提示框/顶部箭头
     
      鼠标移动到我这  
      提示文本
     

.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;    }

         
     
    
      
主页
    
      
新闻
    
      
联系我们
    
      
关于我们
 
     
    
     
    
      
      
       
        
        
The Flight
        
        
The City
        
        
The Island
        
        
The Food
        
        
The People
        
        
The History
        
        
The Oceans
      
       
      
      
        
      
      
       
        
        
The City
      
       
      
       
Chania
      
       
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.
      
       
You will learn more about responsive web pages in a later chapter.
      
      
 
     
    
     
      
      
底部文本