导航条菜单的制作（一）

最新推荐文章于 2019-07-13 13:23:00 发布

moluchase

最新推荐文章于 2019-07-13 13:23:00 发布

阅读量819

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/molu_chase/article/details/52340532

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

垂直菜单设计

同样的先写HTML结构

<body>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">售后</a></li>
	</ul>
</body>

在其中加入css样式

这里本来是设置的块级元素li的样式，由于块级元素只有一个a，就直接将a设置为块级元素，然后对a写鼠标经过事件

a:HOVER{background-color: red;color: #fff;}

当鼠标经过的时候，a的背景颜色变为red，文本颜色变为白色

下面是样式，其中text-indent是内部缩进，保持了a的大小不变，只是对内部进行缩进

<style type="text/css">
* {
	margin: 0;
	padding: 0;
	font-size: 14px;
}

ul {
	list-style: none;
	width: 100px
}

a {
	text-decoration: none;
	display: block;
	height: 30px;
	line-height: 30px;
	width: 100px;
	background-color: #ccc;
	margin-bottom:1px;
	text-indent: 10px;
}
a:HOVER{background-color: red;color: #fff;}
li {
	
}
</style>

水平菜单设计

将上面的css中li设置为左浮动(float:left)，然后要将ul的width删除后才能看到效果，因为ul的width只有100px，而a中的width就为100px，即便是左浮动，因为占据了父类的全部空间，因此仍然显示的是垂直排列，浮动的原理是，将块级元素变成行级元素，并按照浮动的方法排列，当排满一行后，就会移到下一行中

其中将text-indent改为了text-align:center（即文字相对文字的外边界居中）

moluchase

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
导航条菜单的制作（一）

垂直菜单设计同样的先写HTML结构首页新闻产品售后在其中加入css样式这里本来是设置的块级元素li的样式，由于块级元素只有一个a，就直接将a设置为块级元素，然后对a写鼠标经过事件a:HOVER{background-color: red;color: #fff;}当鼠标经过的时候，a的背景颜色变为red，文本颜色变为白色下面是样式，
复制链接

扫一扫

专栏目录