html和CSS基础学习（十一）

MsStrbig

于 2017-09-23 20:57:49 发布

阅读量417

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签： css html div布局

本文链接：https://blog.youkuaiyun.com/MsStrbig/article/details/78073370

HTML+CSS 专栏收录该内容

28 篇文章

订阅专栏

本文通过一个具体的实例展示了如何使用CSS来实现一个响应式的导航条布局。从HTML结构的搭建开始，逐步介绍了如何通过CSS样式调整导航条的样式，包括去除列表默认样式、设置背景颜色、解决浮动引起的塌陷问题等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航条的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding:0 ;
			
		}
			 
			.sn{
				list-style: none;
				/*去掉列表的*号*/
				/*设置背景颜色*/
				background-color: #6495EB;
				/*解决父元素的塌陷问题*/
				overflow: hidden;
				/*设置父元素的宽度让其居中对齐*/
				width: 80%;
				margin: 50px auto;
				
			}
			.sn li{
				/*/让其水平排列/*/
				/*width: 25%;宽度给li制定则会造成超链接只有点到字才能点击*/
				width: 25%;
				/*让字体分开超链接*/
				float:left;
				/*由于元素浮动造成父元素塌陷*/
				/*让其居中对齐*/
				text-align: center;
				/*设置外边距*/
				/*margin: 2px 0;*/
				
			}
			a{
				/*去掉下划线*/
				display: inline-block;
				text-decoration: none;
				width: 100%;
				padding:10px 0 ;
				/**由于A内联元素不能设置宽度/*/
				font-family: "微软雅黑";
				font-weight: bold;
			}
			.sn a:hover{
				background-color: red;
				/*设置背景的移入的颜色*/
			}
			
		</style>
		
	</head>
	<body>
		<ul class="sn">
			<li><a href="#">新闻</a></li>
			<li><a href="#">娱乐</a></li>
			<li><a href="#">关于</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</body>
</html>