导航条练习。_php.cn手记

abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用的导航菜单</title> <style type="text/css"> * {/*初始

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>常用的导航菜单</title>
		<style type="text/css">
			* {/*初始化标签 默认的内外边距 设置字体颜色*/
				padding: 0;
				margin: 0;
				color: #666666;
			}
			a{text-decoration: none;color: #ffffff;}/*设置所有a标签颜色*/
			.headr{width: 1200px; margin: 0 auto;}/*设置总宽度1200 并左右居中*/
			.logo{float: left; color: royalblue; font-size: 33px;}/*logo做浮动*/
			.nav{float: right;}/*导航右浮动*/
			ul li {/*让所有的li左浮动 变成一行 设置内外边距*/
				list-style: none;
				float: left;
				background: #9AA4FF;
				margin: 5px;
				padding: 10px;
				border-radius: 5px;
				color: #ffffff;
			}
			/*群组选择器 让鼠标经过li 和 a变色*/
			ul li:hover,
			ul li:hover a{color: #004C96;}
			ul li ul {/*默认隐藏二级菜单*/
				display: none;
			}
			ul li:hover ul {/*鼠标经过一级菜单显示对应二级菜单*/
				display: block;
			}
			
			ul li ul li {/*重置二级菜单浮动 内边距0*/
				float: none;
				display: block;
				padding: 0;
			}
			
		</style>
	</head>

	<body>
		<div class="headr">
			<div class="logo">logo</div>
			<div class="nav">
				<ul>
					<li><a href="/">首页</a></li>
					<li>一级菜单1
						<ul>
							<li>
								<a href="">二级菜单</a>
							</li>
							<li>
								<a href="">二级菜单</a>
							</li>
							<li>
								<a href="">二级菜单</a>
							</li>
						</ul>
					</li>
					<li>一级菜单2
						<ul>
							<li>
								<a href="">二级菜单</a>
							</li>
							<li>
								<a href="">二级菜单</a>
							</li>
							<li>
								<a href="">二级菜单</a>
							</li>
						</ul>
					</li>
					<li>一级菜单3
						<ul>
							<li>
								<a href="">二级菜单</a>
							</li>
							<li>
								<a href="">二级菜单</a>
							</li>
							<li>
								<a href="">二级菜单</a>
							</li>
						</ul>
					</li>
					<li>一级菜单4
						<ul>
							<li>
								<a href="">二级菜单</a>
							</li>
							<li>
								<a href="">二级菜单</a>
							</li>
							<li>
								<a href="">二级菜单</a>
							</li>
						</ul>
					</li>
					<li>一级菜单5
						<ul>
							<li>
								<a href="">二级菜单</a>
							</li>
							<li>
								<a href="">二级菜单</a>
							</li>
							<li>
								<a href="">二级菜单</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>

	</body>

</html>

Correcting teacher：查无此人Correction time：2019-07-08 09:21:49
Teacher's summary：完成的不错。css样式学好，做出来的页面很绚丽。继续加油。

导航条练习。

Popular Entries