10.两个导航例子

最新推荐文章于 2021-08-21 23:21:41 发布

neilro

最新推荐文章于 2021-08-21 23:21:41 发布

阅读量459

点赞数

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

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

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

例子1：

例子2：

例子2素材：

例子1代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body,ul,li{
			/*将标签自带的内外边距属性初始化*/
			margin:0;
			padding: 0;
		}
		.nav{
			width: 800px;
			height: 40px;
			background: pink;
			margin: 20px auto;
		}
		.nav ul li{
			list-style: none;
			float: left;
		}
		.nav ul li a{
			/**
			 * 虽然上面已经用float制作出浮动的效果了，
			 * 但是这里还是要转成行内块元素，
			 * 否则鼠标触发的背景无法正常展示
			 * 
			 * 注意：虽然float:left;可以直接将行内元素转成类似行内块元素，
			 * 但是不推荐使用
			 */
			display: inline-block;
			height: 40px;
			font: 14px/40px 微软雅黑;
			padding:0 20px;
			text-decoration: none;
		}
		.nav ul li a:hover{
			background: #aaa;
		}

	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li><a href="#">百度</a></li>
			<li><a href="#">百度一下</a></li>
			<li><a href="#">嘻嘻哈哈哈</a></li>
		</ul>
	</div>
</body>
</html>

例子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">
		/*初始化元素块内外边距*/
		body,ul,li{
			margin:0;
			padding: 0;
		}
		li{
			/*清空li风格*/
			list-style:none;
		}
		.nav{
			/*定义总体高度*/
			height: 55px;
			background:url("images/head_bg.jpg");
			margin-top:30px;
			border-top:1px solid #666666;
		}
		.nav-con{
			/*定义块元素宽高*/
			width:1000px;
			height:55px;
			/*内容居中效果*/
			margin: 0 auto;
			position: relative;
			/*父相子绝：父类相对定位，子类绝对定位。子类的绝对定位是根据父类的定位出发*/
		}
		.nav-con ul li{
			/*将块元素从左浮动排列*/
			float:left;
			background: url("images/li_bg.png") no-repeat right;
			height: 55px;
			padding: 0 30px;
		}
		.nav-con ul li a{
			/*将行内元素转成行内块元素*/
			display: inline-block;
			height: 55px;
			font:18px/55px "微软雅黑";
			text-decoration: none;
			color:#000;
		}
		.nav-con ul li a:hover{
			color:green;
		}
		.news{
			position: absolute;
			/*因为是父相子绝的形式,所以子块是根据父块的大小来进行绝对定位,而非浏览器*/
			left:30px;
			bottom:40px;
		}
	</style>
</head>
<body>
	<div class="nav">
		<!--因为要将内容整体居中所以外面还要套一个盒子-->
		<div class="nav-con">
			<ul>
				<li><a href="#">智能手机</a></li>
				<li><a href="#">智能手机</a></li>
				<li><a href="#">智能手机</a></li>
				<li><a href="#">智能手机</a></li>
			</ul>
			<div class="news"><img src="images/new.png"/></div>
		</div>
	</div>
</body>
</html>

neilro

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
10.两个导航例子

例子1：例子2：例子2素材：例子1代码： Document body,ul,li{ /*将标签自带的内外边距属性初始化*/ margin:0; padding: 0; } .nav{ width: 800px; height: 40px; background: pink; margin:
复制链接

扫一扫