<css 十七>导航栏

最新推荐文章于 2021-06-03 12:05:15 发布

Thoby

最新推荐文章于 2021-06-03 12:05:15 发布

阅读量274

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/q869429064/article/details/51187230

版权

css 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

网页的导航栏就如同一本书的目录。在网页中是必不可少的。

导航栏的实现，可以使用边框+背景色实现，但由于每个块级元素的数字设定，要保证元素之间的距离，横竖的对齐，故非常繁琐，所以使用列表设定可以减少很多麻烦。

导航栏显示可以为横向展开和纵向展开：

横向设定：主要属性-display

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		li {
			background-color:#faebd7;
			width:60px;
			height:20px;
			display:inline;
			font-family:微软雅黑;
			color:black;
		}
		li.a {
			margin-left:-7px;
		}
		li.b {
			display:block;
			width:50px;
			height:20px;
			font-family:微软雅黑;
			color:black;
			margin-top:1px;
			border:none;
		}
		li.bb { margin-top:2px;
				border:none;
				width:50px;
		display:block;}
		ul {
			list-style-type:none;
			margin-left:10px;
			padding-left:2px;
		}
		a:link,a:visited { color:black; text-decoration:none; }	
		a:hover {
			background-color:green;
			color:white;
		}
		
	</style>
</head>
<body>
	<ul>
		<li><a href="#">赵子龙</a></li>
		<li class="a"><a href="#">Jobs</a></li>
		<li class="a"><a href="#">@#%^!</a></li>
		<li class="a"><a href="#">BBB</a></li>
		<li class="a"><a href="#">XXX</a></li>
	</ul>
</body>
</html>

、外边框的可以使用负数进行扩张或缩小，而内边框无法起作用；

、如果需要使每个块的属性不一样，可以单独设定边框、字体、背景；

、某些元素有继承的特性，所以在单独设置一些属性的时候，需要将之前的属性当掉（例如：li的背景色为黑色，在设定li.a的背景色时，可以改成其他颜色，或者直接打none等“没有”的属性）;

纵向设定：

		li.b {
			display:block;
			width:50px;
			height:20px;
			font-family:微软雅黑;
			color:black;
			margin-top:1px;
			border:none;
		}
		li.bb { margin-top:2px;
				border:none;
				width:50px;
		display:block;}
		ul {
			list-style-type:none;
			margin-left:10px;
			padding-left:2px;
		}
		ul.AA {
			list-style-type:square;
		}
		a:link,a:visited { color:black; text-decoration:none; }	
		a:hover {
			background-color:green;
			color:white;
		}
		
	</style>
</head>
<body>
	<ul>
		<span style="font-family: Arial, Helvetica, sans-serif;"><li class="bb"><a href="#">大白</a></li></span><pre name="code" class="html">		<li class="b"><a href="#">............</a></li>
		<li class="b"><a href="#">..........</a></li>
		<li class="b"><a href="#">................</a></li>

</ul></body></html>

、在设定纵向边框时，可以和横向边框合并在一起，同时需要注意横纵边框之间的距离，以防效果没有变化；

、横纵边框在整体上类似表格，所以如果框内的文字比较多时，会出现边框线错位，所以仍需要再次设定一些属性；

Thoby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
<css 十七>导航栏

网页的导航栏就如同一本书的目录。在网页中是必不可少的。导航栏的实现，可以使用边框+背景色实现，但由于每个块级元素的数字设定，要保证元素之间的距离，横竖的对其，故非常繁琐，所以使用列表设定可以减少很多麻烦。导航栏显示可以为横向展开和纵向展开：横向设定：主要属性-display li { background-color:#faebd7; width:60px;
复制链接

扫一扫