码迷,mamicode.com
首页 > 其他好文 > 详细

我要自学网导航栏设计

时间:2021-01-20 11:56:23      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:伪类   网页设计   idt   课程   img   取消   col   列表   load   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
	*{
		/*清除所有元素内外边距*/
		margin: 0;
		padding: 0;
	}
	nav ul{
		/*取消列表样式*/
		list-style: none;
		margin: 0 auto;
	}
	nav{
		/*设置导航栏*/
		width: 1000px;
		height: 40px;
		margin: 100px auto;
		padding: 0;
		background-color: #363636;
	}
	nav ul li{
		width: 100px;
		height: 40px;
		line-height: 40px;
		float: left;
		text-align: center;
		color: #ffffff;
		font-size: 14px;
	}
	nav ul li a:hover{
		/*用伪类选择器设置鼠标悬浮样式*/
		font-size: 16px;
		color: #00aeff;
	}
</style>
</head>
<body>
	<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>
	</nav>
	
</body>
</html>

  技术图片

 

我要自学网导航栏设计

标签:伪类   网页设计   idt   课程   img   取消   col   列表   load   

原文地址:https://www.cnblogs.com/nanfengnan/p/14299580.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!