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>