一.水平菜单
灵活应用之前所学到的知识,注意点都写着注释里了。
实例:
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
width:100%; /*水平*/
background-color:lightgrey;
position:fixed; /*固定菜单栏位置*/
top:0; /*永远在上方*/
overflow:auto;
}
li
{
float:left; /*向左浮动*/
border:1px solid white;/*添加白色分割线*/
}
li a
{
display:block; /*块级元素*/
padding:16px 8px;
color:#000;
text-decoration:none;
}
li a:hover /*伪元素,鼠标移动到选项的那一刻为蓝色白字*/
{
color:white;
background-color:blue;
}
li a.active /*class选择器,激活的时候为绿色白字*/
{
color:white;
background-color:green;
}
</style>
<meta charset = "utf-8"/>
<title>菜单</title>
</head>
<body>
<ul>
<li><a class = "active" href = "#home">主页</a></li>
<li><a href = "#nextpage">下一页</a></li>
<li><a href = "#lastpage">上一页</a></li>
<li style = "float:right"><a class = "active" href = "#about">关于</a></li>
<!--向右对齐-->
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;width:100%;">
<h1>An Title about...</h1>
<h2>An Title about...</h2>
<h2>An Title about...</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
结果:
2.下拉菜单
关键点就是运用:hover
实例:
<!DOCTYPE html>
<html>
<head>
<style>
/*下拉菜单按钮设置*/
.dropbutton
{
background-color:green;
color:white;
padding:10px;
border:1px solid black;
}
/*div区域设置*/
.dropdown
{
position:relative;
display:inline-table;
}
/*下拉内容*/
.dropdown-content
{
/*默认隐藏*/
display:none;
position:absolute;
background-color:lightgrey;
min-width:160px;
}
/*下拉内容里的链接*/
.dropdown-content a
{
display:block;
color:black;
text-decoration:none;
padding:8px 16px;
}
/*鼠标移动到链接时*/
.dropdown-content a:hover
{
background-color:grey;
}
/*移动到div区域时,隐藏内容显现,可以根据需要改变显现的位置*/
.dropdown:hover .dropdown-content
{
display:block;
}
</style>
<meta charset = "utf-8"/>
<title>下拉菜单</title>
</head>
<body>
<div class="dropdown">
<button class="dropbutton">下拉菜单</button>
<div class="dropdown-content">
<a href="#home">主页</a>
<a href="#lastpage">上一页</a>
<a href="#nextpage">下一页</a>
</div>
</div>
</body>
</html>
结果:
3.提示语句
不仅提示语句,你甚至可以插入图片
实例:
<!DOCTYPE html>
<html>
<head>
<style>
/*提示容器*/
.tooltip
{
position:relative;
display:inline-block;
border-bottom:1px solid green;
}
/*提示语句*/
.tooltip .tooltiptext
{
/*可见性隐藏*/
visibility:hidden;
width:300px;
background-color:lightgrey;
color:black;
text-align:center;
padding:5px 10px;
/*定位*/
position:absolute;
z-index:1; /*优先级高*/
/*具体位置设置*/
top:100%;
left:50%;
margin-left:-160px;
}
/*鼠标移动到提示容器时,内容显现*/
.tooltip:hover .tooltiptext
{
visibility:visible;
}
img
{
display:block;
margin:auto;
}
</style>
<meta charset = "utf-8"/>
<title>提示语句</title>
</head>
<body style = "text-align:center">
<h1>没错我又迫害你了</h1>
<div class = "tooltip">
钢板
<span class = "tooltiptext">露西亚<img src = "露西亚.jpg" height = "400px"></span>
</div>
</body>
</html>
结果: