HTML 导航栏

最新推荐文章于 2023-06-12 13:17:14 发布

ฅ逸魚

最新推荐文章于 2023-06-12 13:17:14 发布

阅读量247

点赞数

分类专栏： HTML+CSS 学习笔记文章标签： html css

本文链接：https://blog.csdn.net/weixin_47186832/article/details/110334034

版权

HTML+CSS 学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<style type="text/css">
	/*清楚默认样式*/
	*{margin:0;padding:0;}
	/*清楚默认样式并不是将列表里面的点点清除了，而是把它隐藏起来了*/
	.nav{
		/*清楚点点*/
		list-style:none;	
		/*查看ul整个背景有多大*/
		background-color:#bcf;
		/*设置宽度*/
		width:1000px;
		/*设置元素居中*/
		margin:50px auto;
		/*解决高度塌陷问题*/
		overflow:hidden;
		/*在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout*/
		/*zoom:1;*/
		
	}
		/*块元素在文档流里面默认是浮动的*/
	.nav li{
		float:left;
		/*在这里指定会导致超链接可点击的宽度变短，不够灵活*/
		/*可以通过设置宽度来增加或减少栏目的个数*/
		width:25%;
			
	}
	.nav a{
		/*将a转换为块元素*/
		display:block;
		/*为a指定一个宽度*/
		width:100%;
		/*设置文字居中*/
		text-align:center;
		/*设置上下内边距*/
		padding:6px 0;
		/*去除下划线*/
		text-decoration:none;
		/*设置字体颜色，加粗*/
		color:white;
		font-weight:bold;
	}
	/*设置伪类，鼠标移入后的效果*/
	.nav a:hover{
		background-color:#c00;
	}
</style>

<body>
<!--导航栏一般用的标签是无序列表 -->
	<ul class="nav">
    	<li><a href="#">首页</a></li>
    	<li><a href="#">新闻</a></li>
    	<li><a href="#">联系</a></li>
    	<li><a href="#">关于</a></li>
    </ul>
</body>

ฅ逸魚

关注

0
点赞
踩
1

收藏

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

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>导航栏练习</title><style type="text/css"> /*清楚默认样式*/ *{ margin:0; p.
复制链接

扫一扫