Web前端开发-简单导航栏实例

最新推荐文章于 2024-08-31 08:32:04 发布

原创最新推荐文章于 2024-08-31 08:32:04 发布

· 1.8k 阅读

16 ·

版权

文章标签：

#css #html #html5

HTML+CSS 专栏收录该内容

11 篇文章

订阅专栏

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>夏季导航栏</title>
		<link rel="stylesheet" type="text/css" href="../css/夏季导航栏.css" />
	</head>
	<body>
		<!--logo图片等-->
		<div id="div-banner">
			<img src="../img/banner.jpg" />
		</div>
		<!--导航栏-->
		<div id="div-nav">
			<ul>
				<li><a href="#">首页导读</a></li>
				<li><a href="#">推荐版面</a></li>
				<li><a href="#">推荐文章</a></li>
				<li><a href="#">精品收藏</a></li>
				<li><a href="#">休闲娱乐</a></li>
				<li><a href="#">我的信箱</a></li>
				<li><a href="#">关于我们</a></li>
			</ul>
		</div>
		<!--内容区域-->
		<div id="div-content"></div>
	</body>
</html>

CSS部分

@charset "utf-8";

/*网页 去除干扰边距, 默认背景*/
body {
	font-family: Arial, Helvetica, sans-serif;
	/* 12是最小的了 */
	font-size: 12px;
	background-color: #FFFFCC;
	margin: 0px;
	padding: 0px;
}

/* 列表常规操作 */
ul,
li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

/* banner的背景图 */
#div-banner {
	width: 100%;
	height: 150px;
	background-image: url(../img/banner-bg.gif);
	background-repeat: repeat-x;
}

/*导航栏的默认样式*/
#div-nav {
	width: 100%;
	height: 32px;
	background-image: url(../img/nav-bg.gif);
	background-repeat: repeat-x;
}

/*将li标签进行左浮动*/
#div-nav li {
	float: left;
}

/* 设置链接默认样式 */
#div-nav a {
	width: 80px;
	height: 32px;
	text-align: center;
	/* 垂直居中 */
	line-height: 32px; 
	color: #663600;
	font-size: 12px;
	/* 边框 */
	border-left: solid 1px white;
	/* 去下划线 */
	text-decoration: none;
	/* 行内元素改成块元素 宽度占据父 */
	display: block;
}

/* 链接获取聚集样式*/
#div-nav a:hover {
	color: white;
	font-weight: bold;
	background-color: #996633;

}