关于导航栏

最新推荐文章于 2018-09-24 00:25:24 发布

Zjyyyy95

最新推荐文章于 2018-09-24 00:25:24 发布

阅读量386

点赞数

分类专栏： css 按钮导航菜单文章标签： css 按钮标签

本文链接：https://blog.csdn.net/zhoujingying22/article/details/50994561

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

按钮导航菜单

3 篇文章 0 订阅

订阅专栏

1.用ul和li的结构，在li中嵌套a标签

	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">动态</a></li>
		<li><a href="#">帮助</a></li>
	</ul>

竖向：设置display的值为block

横向：inline-block(横向)，这样做是为了使行内元素a变为块级元素从而设置其的高度和宽度,宽度也决定了每个导航链接的间距

3.设置ul中的li向左浮动，如果有父级包含块的问题，记住在父级包含块中设置overflow:auto;

4.让文字居中，去掉下划线，项目符号等

竖向：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		ul li a{

		     display: block;
		     height: 2em;
		     line-height: 2em;
		     color: #0836B9;
		     text-decoration: underline;
		}

	</style>
</head>
<body>
	<ul>
	        <li><a href="#">首页</a></li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">动态</a></li>
		<li><a href="#">帮助</a></li>
	</ul>>
</body>
</html>

横向：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		ul li {

			float: left;
			list-style: none;
		}

		ul li a{

			display: block;
			width: 6em;
			height:3em;
			line-height: 3em;
			text-align: center;

			color:#F4F2F2;
			border-left: 1px solid #c8c8c8;
			background:#564E4E;
			text-decoration: none;
		
		}

	</style>
</head>
<body>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">动态</a></li>
		<li><a href="#">帮助</a></li>
	</ul>
</body>
</html>

Zjyyyy95

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于导航栏

1.用ul和li的结构，在li中嵌套a标签首页新闻动态帮助 2.竖向：设置display的值为block 横向：inline-block(横向)，这样做是为了使行内元素a变为块级元素从而设置其的高度和宽度,宽度也决定了每个导航链接的间距3.设置ul中的li向左浮动，如果有父级包含块的问题，记住在父级包含块中设置overflo
复制链接

扫一扫

专栏目录