15.背景图+导航练习

最新推荐文章于 2023-02-04 17:02:46 发布

neilro

最新推荐文章于 2023-02-04 17:02:46 发布

阅读量195

点赞数

分类专栏： Div+Css 文章标签：导航

本文链接：https://blog.csdn.net/neilro/article/details/79245653

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

效果：

素材：

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>导航作业</title>
	<style type="text/css">
		/*css样式初始化*/
		body,ul,li{
			margin:0;
			padding:0;
		}
		li{
			list-style:none;
		}
		img{
			/*低版本的IE浏览器里会有一个默认的边框,去掉.*/
			border:0;
		}
		a{
			text-decoration: none;
		}
		/*初始化结束*/
		.banner{
			width:600px;
			margin:0 auto;
		}
		.nav{
			height:32px;
			background:url("images/nav_bg.jpg");
		}
		.nav ul li{
			/*将导航栏变横向*/
			float:left;
		}
		.nav ul li a{
			/*转行内块*/
			display:inline-block;
			width:80px;
			height:32px;
			/*垂直居中*/
			line-height: 32px;
			/*水平居中*/
			text-align:center;
			background:url("images/a_bg.jpg");
		}
		.nav ul li a:hover{
			background:url("images/button2.jpg");
		}
	</style>
</head>
<body>
	<div class="banner">
		<img src="images/banner1.jpg" />
		<div class="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>
			</ul>
		</div>
	</div>
</body>
</html>

neilro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
15.背景图+导航练习

效果：素材：代码：导航作业 /*css样式初始化*/ body,ul,li{ margin:0; padding:0; } li{ list-style:none; } img{ /*低版本的IE浏览器里会有一个默认的边框,去掉.*/ border:0; } a{ tex
复制链接

扫一扫