前端学习第六弹：制作一个简易导航

最新推荐文章于 2023-04-30 09:19:22 发布

原创最新推荐文章于 2023-04-30 09:19:22 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #导航 #display #布局 #html+css

前端的快乐生活专栏收录该内容

18 篇文章

订阅专栏

本文通过一个实际案例，探讨了CSS中display属性的作用及其不同值的影响。特别是如何利用display:inline实现导航栏的自适应布局。

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

发了一天烧，一会就要洗洗睡了，希望小病快快走开~~~

制作一个简易的导航，遇到了一个问题，可能是脑子发懵的缘故，把#di ul{display：inline}中的“display”写成“dispily”，一个字母的疏忽，查了好久。。变化就是改变前方框占据整个屏幕，修改后变成了自适应，什么情况，不是说display的默认值就是inline嘛。。

<html>
  <head>
    <meta charset=utf-8 />
	<style type=text/css>
	body
	{
	  font-family:serif;
	  background-color:#fff8dc;
	  text-align:center;
	}
	#di{
	    margin-top:40px;
	}
	#di ul{
	   padding:10px;
	   display:inline;
	   background-color:#ccccff;   
	}
	#di ul li{
	   display:inline;
	   text-align:left;
	}
	#di ul li a{
	   font-size:15px;
	   color:#ffffcc;
	   text-decoration:underline;
	   padding:3px 5px;
	}
	#di ul li a:hover{
	color:#ffa500;
	}
	</style>
  </head>
  <body>
    <div id="di">
	 <ul>
	   <li><a href="#">Link1</a></li>
	   <li><a href="#">Link2</a></li>
	   <li><a href="#">Link3</a></li>
	   <li><a href="#">Link4</a></li>
	 </ul>
	</div>
  </body>
</html>

效果图如下：