float 练习

原创2019-07-07 19:03:08159
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float 浮动</title> <style type="text/css"> *{paddi
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>float 浮动</title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			ul li{
				list-style: none;
				float: left;
				background: #9AA4FF;
				margin: 5px;
				padding: 10px;
				border-radius: 5px;
				}
			ul li ul{display: none;}
			ul li:hover ul{display: block;}
			ul li ul li{float: none;}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li>一级菜单1
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单2
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单3
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单4
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单5
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单6
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单7
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单8
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

通过浮动练习一个二级菜单。

批改老师:查无此人批改时间:2019-07-08 09:21:40
老师总结:完成的不错。浮动在移动端用到的比较多。继续加油。

发布手记

热门词条