Navigation Bar

judy_hope123

于 2017-10-18 10:48:38 发布

阅读量156

点赞数 1

本文链接：https://blog.csdn.net/judy_hope123/article/details/78270351

版权

任务二

要点：

1. 浮动

2. 取消ul默认样式

3. border设置

4. 蓝色背景（div背景）

5. 白色分割线（li背景）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.nav {
				width: 100%;
				margin: 0;
			}
			
			.nav ul {
				/*这里必须设置内边距和外边距，因为浏览器会给ul设定默认值，会把导航栏挤歪*/
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			.nav li {
				/*本来ul是竖直排列的，对所有li元素进行float:left他就会自动全部靠左*/
				float: left;
				position: relative;
			}
			
			.nav ul li a,
			.nav ul li a:hover {
				display: block;
				text-align: center;
				text-decoration: none;
				width: 100px;
				color: black;
				/*文字颜色 */
				border: 1px solid #FFFFFF;
				/*边框大小和颜色 */
				border-width: 1px 1px 0 0;
				/*四个边框的宽度 ,注意，左右边框没有像素哦，仔细看导航栏左右有缝隙*/
				background: #00BFFF;
				/*背景颜色 */
				height：50px;
				line-height: 50px;
				/*这里将height和line-height设置为一样的高度文字就会水平竖直居中 */
				font-size: 17px;
			}
			
			.nav ul li:hover a {
				/*这是一个css伪类，将鼠标移上去的时候字体和背景都会变色，移开又会变回来 */
				color: #fff;
				background: #CCCCFF;
			}
		</style>
	</head>

	<body>
		<div class="nav">
			<ul>
				<li>
					<a>首      页</a>
				</li>
				<li>
					<a>学校概况</a>
				</li>
				<li>
					<a>师资队伍</a>
				</li>
				<li>
					<a>人才培养</a>
				</li>
				<li>
					<a>科学研究</a>
				</li>
				<li>
					<a>国际教育</a>
				</li>
				<li>
					<a>合作交流</a>
				</li>
				<li>
					<a>校园文化</a>
				</li>
				<li>
					<a>招生就业</a>
				</li>
				<li>
					<a>人才招聘</a>
				</li>
			</ul>
		</div>
	</body>

</html>

效果图如下：