zoukankan      html  css  js  c++  java
  • 三级标题的实现

    三级标题

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>三级导航</title>
    <style>
    	/*导航条预定义信息*/
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	ul,li {
    		list-style: none;
    	}
    	a {
    		text-decoration: none;
    	}
    	/*一级导航样式*/
    	.nav {
    		border: 2px solid #ccc;
    		border-right: none;
    		overflow: hidden;
    		float: left;
    		margin: 100px 0 0 300px;
    	}
    	.nav ul li {
    		float: left;
    	}
    	.nav ul li a {
    		 120px;
    		height: 40px;
    		text-align: center;
    		line-height: 40px;
    		display: block;
    		border-right: 2px solid #ccc;
    	}
    	.nav ul li a:hover {
    		color: red;
    	}
    	/*二级导航*/
    	.nav ul li ul {
    		display: none;
    		position: absolute;
    	}
    	.nav ul li ul li {
    		float: none;
    		 120px;
    		height: 40px;
    	}
    	.nav ul li ul li a {
    		border-right: none;
    		border-top: 1px dotted #ccc;
    		background: #f5f5f5;
    	}
    	.nav ul li:hover ul {
    		display: block;
    	}
    	/*三级导航*/
    	.nav ul li:hover ul li ul {
    		display: none;
    	}
    	.nav ul li:hover ul li:hover ul {
    		display: block;
    		position: relative;
    		left: 122px;
    		top: -40px;
    		background-color: #b4b4b4;
    		overflow: hidden;
    	}
    	.nav ul li ul li ul li {
    		float: left;
    		overflow: hidden;
    	}
    	.nav ul li ul li ul li a {
    		border-right: 3px dotted #ccc;
    		border-top: none;
    		background: #aabbff;	
    	}
    </style>
    </head>
    <body>
    <div class="nav">
    	<ul>
    		<li><a href="##">栏目一</a>
    			<!-- 二级标签 -->
    			<ul>
    				<li><a href="##">2.栏目一</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目二</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目三</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目四</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目五</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    	
    		<li><a href="##">栏目二</a>
    			<!-- 二级标签 -->
    			<ul>
    				<li><a href="##">2.栏目一</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目二</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目三</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目四</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目五</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    		<li><a href="##">栏目三</a>
    			<!-- 二级标签 -->
    			<ul>
    				<li><a href="##">2.栏目一</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目二</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目三</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目四</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目五</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    		<li><a href="##">栏目四</a>
    			<!-- 二级标签 -->
    			<ul>
    				<li><a href="##">2.栏目一</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目二</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目三</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目四</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目五</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    		<li><a href="##">栏目五</a>
    			<!-- 二级标签 -->
    			<ul>
    				<li><a href="##">2.栏目一</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目二</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目三</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目四</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    				<li><a href="##">2.栏目五</a>
    					<!-- 三级导航 -->
    					<ul>
    						<li><a href="##">3.栏目一</a></li>
    						<li><a href="##">3.栏目二</a></li>
    						<li><a href="##">3.栏目三</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    	
    	</ul>
    </div>
    </body>
    </html>
    

    结果图:

    三级标题

  • 相关阅读:
    UVa 568 Just the Facts
    UVa 253 Cube painting
    百钱买百鸡问题Java
    jsp-4 用cookie实现记住密码
    (动态规划)有 n 个学生站成一排,每个学生有一个能力值,从这 n 个学生中按照顺序选取kk 名学生,要求相邻两个学生的位置编号的差不超过 d,使得这 kk 个学生的能力值的乘积最大,返回最大的乘积
    c++ 根据生产日期,保质期求出过期时间
    汉诺塔的非递归解决办法
    链表实现多项式的加法和乘法
    暗时间--刘未鹏
    hdoj1013(数根,大数,九余数算法)
  • 原文地址:https://www.cnblogs.com/lucky-lf/p/7090083.html
Copyright © 2011-2022 走看看